如何在WordPress中引入一言(Hitokoto)API

发布于 2019-05-10  185 次阅读


之前在别的博客看到过“一言”的调用,感觉很帅的样子,所以我也尝试调用了一下,效果就是现在我的博客最底端的样子。

一言网(Hitokoto.cn)创立于2016年,隶属于萌创Team,目前网站主要提供一句话服务。
动漫也好、小说也好、网络也好,不论在哪里,我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来,形成一言网络,以传递更多的感动。如果可以,我们希望我们没有停止服务的那一天。
简单来说,一言指的就是一句话,可以是动漫中的台词,也可以是网络上的各种小段子。
或是感动,或是开心,有或是单纯的回忆。来到这里,留下你所喜欢的那一句句话,与大家分享,这就是一言存在的目的。

一言Hitokoto

想要详细的一言API使用说明,可以访问:

https://hitokoto.cn/api

本文只列示了简单的使用方法:

在WordPress主题“footer.php”的body中添加以下代码:

<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>

<script>
  fetch('https://v1.hitokoto.cn')
    .then(function (res){
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById('hitokoto');
      hitokoto.innerText = data.hitokoto; 
    })
    .catch(function (err) {
      console.error(err);
    })
</script>

然后在需要放置一言的地方添加下列代码,如果想放置在页脚,那么同样添加在footer.php的body中即可

<p id="hitokoto">:D 获取中...</p>

效果如下:

😀 获取中...

如果想要想本站底端一样标注出处,那么在之前的代码中多加一行,变成下面这样:

<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>

<script>
  fetch('https://v1.hitokoto.cn')
    .then(function (res){
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById('hitokoto');
      hitokoto.innerText = data.hitokoto; 
	  var from = document.getElementById('from');
      from.innerText = data.from;
    })
    .catch(function (err) {
      console.error(err);
    })
</script>

然后在需要放置的地方添加下列代码:

<p id="hitokoto">:D 获取中...</p>——「<span id="from">:D 获取中...</span>」

由于HTML要求同一页面中不允许多个相同的id,所以就不放效果了。

同样地,因为前面演示了一言的引用,所以会导致这个页面的底端一言调用显示不正常,点击本站的其他页面可以查看完整的效果。