一言API调用

发表于 | 更新于

一言是一个非常棒的一句话服务

Hitokoto - 一言

关于如何调用一言API到自己的博客中呢?首先可以看一下一言的API的内容：http://hitokoto.cn/api
这里提供一个简单的调用js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload=function () {
    var hitokoto = document.querySelector('.hitokoto');
    var from = document.querySelector('.from');
    update();
    function update() {
        gethi = new XMLHttpRequest();
        gethi.open("GET","https://sslapi.hitokoto.cn/?c=a");
        //这里选择类别，详见官方文档
        gethi.send();
        gethi.onreadystatechange = function () {
            if (gethi.readyState===4 && gethi.status===200) {
                var Hi = JSON.parse(gethi.responseText);
                hitokoto.innerHTML = Hi.hitokoto;
                from.innerHTML = "from: <b>" + Hi.from + "</b>"; //可自定义输出格式
            }
        }
    }
}

接下来可以直接在网页上通过hitokoto和from两个class调用了，例如：

1
2
3
4
<div>
    <p class="hitokoto"></p>
    <p class="from"></p>
</div>

如何在Hexo中调用一言呢？
很简单。以我的主题next为例。在目录\themes\next\source\js\src（新版next没有src文件夹）下新建hitokoto.js把调用js写进去。如果要经常性的调用，要写在网页中，那么就在\themes\next\layout\_layout.swig的最下面的</body>前新增一行。

1
<script type="text/javascript" src="/js/src/hitokoto.js"></script>

如果只在某个网页中使用不必这样，在md中引用javascript即可，引用格式同上面的_layout.swig增加的那行相同。
在写文章时在md文件里直接写

1
2
3
4
<div>
    <p class="hitokoto"></p>
    <p class="from"></p>
</div>

就可以了。效果如下：





当然，你可以改成任何你喜欢的样子。js代码可以改，html也可以。我感觉这样斜体也不错（参见关于）：
1
2
3
<div>
    <i class="hitokoto"></i><i class="from"></i>
</div>

还有一个带二维码的hitokoto.html
值得注意的是，这种调用方法只能同时调用一次，需要重新load。如有需要可以自己改一下代码。
参考文章：一言Hitokoto API 调用指南

0%