WordPress 博客集成 Hitokoto 一言经典语句功能

方法一、调用官方API

官方已经把接口都做好了，可以直接拿来用，官方API网页使用示例 :

<p id="hitokoto">:D 获取中...</p>
<!-- 以下写法，选取一种即可 -->
 
<!-- 现代写法，推荐 -->
<!-- 兼容低版本浏览器 (包括 IE)，可移除 -->
<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>
<!--End-->
<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>
 
<!-- 老式写法，兼容性最忧 -->
<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');
      hitokoto.innerText = data.hitokoto;
    }
  }
  xhr.send();
</script>
 
<!-- 新 API 方法， 十分简洁 -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

这里不好之处在于，扩展性极差，我们无法自定义句子。所以，最好还是把全部功能移植过来，自定义这个功能。

方法二、集成Hitokoto（自定义方式）

本 API 去除原 API 的各种链接、各种参数，简洁得只剩下字了，还能免去一个插件的使用。

将 PHP 代码保存为 index.php，然后上传到网站根目录下的 hitokoto 文件夹（这个自己随机定义）文末提供下载 hitokoto.txt 文本文件

把 hitokoto.txt 上传到和 index.php 同级目录，比如 hitokoto 文件夹内。

现在，浏览器访问 http://你的域名/hitokoto/ 就可以看到输出内容了

PHP 代码

<?php
//获取句子文件的绝对路径
//如果你介意别人可能会拖走这个文本，可以把文件名自定义一下，或者通过Nginx禁止拉取也行。
$path = dirname(__FILE__);
$file = file($path."/hitokoto.txt");


//随机读取一行
$arr = mt_rand( 0, count( $file ) - 1 );
$content = trim($file[$arr]);


//编码判断，用于输出相应的响应头部编码
if (isset($_GET['charset']) && !empty($_GET['charset'])) {
    $charset = $_GET['charset'];
    if (strcasecmp($charset,"gbk") == 0 ) {
        $content = mb_convert_encoding($content,'gbk', 'utf-8');
    }
} else {
    $charset = 'utf-8';
}
header("Content-Type: text/html; charset=$charset");


//格式化判断，输出js或纯文本
if ($_GET['format'] === 'js') {
    echo "function hitokoto(){document.write('" . $content ."');}";
} else {
    echo $content;
}

博客集成：

第一步我们已经完成了这个接口的自建部署，现在可以把这个功能搬到博客上了。

部署方法和其他博客基本一致，非常简单，将下面两行代码添加到博客你想显示一言的位置即可：

<script type="text/javascript" src="https://你的域名/hitokoto/?format=js&charset=utf-8"></script>
<div id="hitokoto"><script>hitokoto()</script></div>

添加样式

不过，这样输出的字符样式可能是默认的，加入到你博客页脚的标签中，如果没有定义样式，可以自定义一下样式。

#hitokoto {
    border-left: 5px solid #41acf0;
    border-right: 5px solid #41acf0;
    background-color: #ebebeb;
    padding: 10px;
    text-align: center;
    color: #41acf0;
    margin: 5px 0 5px 0;
    position: relative;
    top: -40px;
}

部署完成之后，前台刷新应该就可以看到效果了，每次刷新都会随机展示一言经典句子。如果你有新的句子，也只要编辑 hitokoto.txt 文件加入即可。