看到很多站点上都有每日一句这样的功能，随机展现一句经典的话语，可能是一句歌词，一段名人名言，或是一句逗趣的俏皮话。碰到类似的站点总是忍不住多刷新几次，看看会冒出什么惊喜，今天发现利用萌创团队的一言api可以很方便的实现这个功能，于是就有了站点右下角的一言模块。
一言官方的简介
动漫也好、小说也好、网络也好，不论在哪里，我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来，形成一言网络，以传递更多的感动。如果可以，我们希望我们没有停止服务的那一天。 简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。 或是感动，或是开心，有或是单纯的回忆。来到这里，留下你所喜欢的那一句句话，与大家分享，这就是一言存在的目的。
使用示例
- 随机抽取句子：https://v1.hitokoto.cn/
- 请求获得一个分类是漫画的句子：https://v1.hitokoto.cn/?c=b
- 纯文本格式输出一个分类是网络的句子：https://v1.hitokoto.cn/?c=f&encode=text
官方的使用示例
<!-- 请注意，以下的示例包含超链接，您可能需要手动配置样式使其不变色。如果您嫌麻烦，可以移除。 -->
<p id="hitokoto"><a href="#" id="hitokoto_text">:D 获取中...</a></p>
<!-- 以下写法，选取一种即可 -->
<!-- 现代写法，推荐(不支持 IE) -->
<script>
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
const hitokoto = document.getElementById('hitokoto_text')
hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
hitokoto.innerText = data.hitokoto
})
.catch(console.error)
</script>
<!-- 如果你配置了 axios -->
<script>
axios.get('https://v1.hitokoto.cn')
.then(({ data }) => {
const hitokoto = document.getElementById('hitokoto_text')
hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
hitokoto.innerText = data.hitokoto
})
.catch(console.error)
</script>
<!-- 如果你的站点使用了 jQuery(如果是 JQ 3.x 以及更新的版本， 你得使用完整版的 JQ)， 那么你可以... -->
<script>
$.ajax({
type: 'GET',
url: 'https://v1.hitokoto.cn',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'hitokoto',
success (data) {
$('#hitokoto_text').attr('href', 'https://hitokoto.cn/?uuid=' + data.uuid)
$('#hitokoto_text').text(data.hitokoto)
},
error (jqXHR, textStatus, errorThrown) {
// 错误信息处理
console.error(textStatus, errorThrown)
}
})
</script>
<!-- P.S 我们不推荐使用 jQuery Ajax。 推荐使用 fetch api 或者 axios.js-->
<!-- 老式写法，兼容性最好; 支持 IE -->
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://v1.hitokoto.cn');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
var hitokoto = document.getElementById('hitokoto_text');
hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
hitokoto.innerText = data.hitokoto;
}
}
xhr.send();
</script>
<!-- 新 API 方法， 十分简洁 -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>虾比比站点的实现方法
虾比比博客用了示例代码的第一种方法来获取数据，因为wordpress有现成的文本小工具，所以没有单独为一言定义一个p元素，而是拉了一个文本框在侧栏，因为之前尝试过这个小工具，所以侧栏的id变成了"text-3"，于是把getElementById的元素id修改成为"text-3"，顺便取消了原程序中的链接功能，这个办法方便之余有一个弊端，因为文本框的id在不同的博客中因拖放次数不同会有不同的数字后缀，也就导致这段代码失去了通用性：
<script>
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
const hitokoto = document.getElementById("text-3")
hitokoto.children[1].innerText = data.hitokoto
})
.catch(console.error)
</script>因为只想获取到一言的文字部分，所以修改了一下请求的地址为“https://v1.hitokoto.cn/?encode=text”，顺便替换了查找id定位元素的办法，改为使用文本工具的类名来定位元素，当然这么做也有弊端，如果页面上同时有两个文本工具的话，以下语句只能够定位到前一个，更好的办法，还是单独为一言设置一个具备独立id的元素：
<script>
fetch('https://v1.hitokoto.cn/?encode=text')
.then(response => response.text())
.then(data => {
const hitokoto = document.getElementsByClassName("widget_text")[0];
hitokoto.children[1].innerText = data
})
.catch(console.error)
</script>请求参数
| 参数 | 值 | 可选 | 说明 |
|---|---|---|---|
| c | 见后表 | 是 | 句子类型 |
| encode | 见后表 | 是 | 返回编码 |
| charset | 见后表 | 是 | 字符集 |
| callback | 如：moe | 是 | 调用的异步函数 |
| select | 默认：.hitokoto | 是 | 选择器。配合 encode=js 使用 |
| min_length | 默认：0 | 是 | 返回句子的最小长度（包含） |
| max_length | 默认：30 | 是 | 返回句子的最大长度（包含） |
