步骤1：了解一言API接口
一言(hitokoto)是一个提供随机句子的API服务，可以返回各种类型的优美句子。首先需要了解其基本使用方法：
💡 什么是一言？
一言是一个开源的语句接口，提供各种类型的优美句子，包括动画、漫画、游戏、文学、原创等分类。
步骤2：获取API密钥
访问一言官网(https://hitokoto.cn)获取API使用权限，虽然大部分功能免费，但建议申请密钥以获得更好的服务稳定性。
步骤3：添加JavaScript代码
在主题的JavaScript文件中添加以下代码：
// 一言API调用函数
function loadHitokoto() {
fetch('https://v1.hitokoto.cn/?encode=json&charset=utf-8')
.then(response => response.json())
.then(data => {
const hitokotoElement = document.getElementById('hitokoto-text');
const hitokotoAuthor = document.getElementById('hitokoto-author');
if (hitokotoElement) {
hitokotoElement.textContent = data.hitokoto;
}
if (hitokotoAuthor && data.from) {
hitokotoAuthor.textContent = '—— ' + data.from;
}
})
.catch(error => {
console.error('一言API调用失败:', error);
const hitokotoElement = document.getElementById('hitokoto-text');
if (hitokotoElement) {
hitokotoElement.textContent = '生活就像一盒巧克力，你永远不知道下一颗是什么味道。';
}
});
}
// 页面加载完成后调用
document.addEventListener('DOMContentLoaded', function() {
loadHitokoto();
// 可选：定期刷新一言内容
setInterval(loadHitokoto, 30000); // 每30秒刷新一次
});步骤4：创建显示容器
在需要显示一言的位置添加HTML结构：
<div class="hitokoto-container">
<div class="hitokoto-content">
<p id="hitokoto-text" class="hitokoto-text">加载中...</p>
<span id="hitokoto-author" class="hitokoto-author"></span>
</div>
</div>添加CSS样式美化显示效果：
.hitokoto-container {
text-align: center;
padding: 20px;
margin: 20px 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}
.hitokoto-text {
font-size: 18px;
line-height: 1.6;
margin-bottom: 10px;
color: #333;
}
.hitokoto-author {
font-size: 14px;
color: #666;
font-style: italic;
}步骤5：测试和调试
完成上述步骤后，刷新页面查看效果。如果遇到问题，可以：
- 检查浏览器控制台是否有错误信息
- 确认网络连接正常
- 验证HTML元素ID是否正确
- 测试API接口是否可用
✅ 完成效果
成功接入后，你的网站将显示随机的一言内容，每次刷新页面或定期自动更新显示新的句子。
高级定制选项
一言API支持多种参数定制：
- c: 句子类型（动画、漫画、游戏、文学等）
- encode: 返回格式（json、js、text）
- charset: 字符编码（utf-8、gbk等）