一言网(Hitokoto.cn)创立于 2016 年,隶属于萌创 Team,目前网站主要提供一句话服务。一言,可以是动漫中的台词,可以是网络上的经典话语,也可以是一句著名的诗歌。或是感动,或是开心,又或是单纯的回忆。小说也好、网络也罢,不论在哪里,我们总会看到有那么一两个句子能够穿透你的心,产生心灵上的共鸣。与大家分享,这就是一言存在的目的。
方法一、调用官方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 文件加入即可。
好了,文章就介绍这么多,喜欢的朋友可以试下了。