网站建设

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

Jager · 10月2日 · 2017年 10493次已读

Hitokoto·一言是一个挺有意思的项目,官方的自我介绍如下:

一言网(Hitokoto.cn)创立于 2016 年,隶属于萌创 Team,目前网站主要提供一句话服务。

动漫也好、小说也好、网络也好,不论在哪里,我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来,形成一言网络,以传递更多的感动。如果可以,我们希望我们没有停止服务的那一天。

简单来说,一言指的就是一句话,可以是动漫中的台词,也可以是网络上的各种小段子。
或是感动,或是开心,有或是单纯的回忆。来到这里,留下你所喜欢的那一句句话,与大家分享,这就是一言存在的目的。

自己用了好一段时间了,看到有不少朋友在问文章底部那个一句话是怎么实现的,所以这里来分享下。博客集成Hitokoto·一言经典语句功能

一、他山之石

张戈博客之前是调用的自由天空的一言 API 接口,稳定性和速度还不错,不想折腾的朋友推荐参考他的教程快速部署一个即可。

Ps:喜欢使用官方接口也可以前往官方的 API 介绍地址参考部署:http://hitokoto.cn/api

如果是像我这种比较喜欢折腾的朋友,可以考虑自己部署一个,主要是方便 DIY 句子库内容。当然,自己部署的文章其实也已经有博友分享过了==>传送门 。

下面简单的介绍下张戈博客这边的 DIY 部署过程。

二、部署接口

首先按照我个人编码习惯,把小霖小朋友的代码略微改了下(代码强迫症):

<?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;
}

以上代码保存为 index.php,然后上传到网站根目录下的 hitokoto 文件夹(这个自己随机定义)最后,从小霖分享的文章下载 hitokoto.txt 文本文件

当然这里我也传了一份到微云网盘,方便大家下载:

下载地址:https://share.weiyun.com/cff40cfd057fca81fde3aeb6f00fbfb1

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

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

三、博客集成

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

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

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

不过,这样输出的样式可能会比较丑,如果你懂 CSS 的话可以自己再美化美化。

当然,Begin 主题或者不会 css 的朋友可以先试下我这边写好的 css 代码(可以加到 style.css):

#hitokoto{
    border-left: 5px solid #2f889a;
    border-right: 5px solid #2f889a;
    background-color: #ebebeb;
    padding: 10px;text-align: center;
    color: #095AD4;
    margin: 5px 0 5px 0;
}

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

好了,文章就介绍这么多,喜欢的朋友可以试下了。

37 条回应
  1. 六维空间 2017-10-3 · 6:24

    这很溜啊 抽个时间集成一下!

    • ko 2019-5-9 · 16:51

      可以

  2. 老王经销商 2017-10-4 · 9:40

    大佬最近在搞什么项目咧?

  3. 祭夜 2017-10-4 · 22:55

    版本好多,我转载了! :mrgreen:

    • avatar
      Jager 2017-10-6 · 19:07

      随机读取建议使用我文章分享的那两行代码,既简洁还不需要在意文章行数.

      • 祭夜 2017-10-7 · 7:17

        好的

        • ko 2019-5-9 · 16:51

          好的

  4. 橘子书 2017-10-6 · 11:24

    有空可以玩玩这个,感觉有时候不单调。

  5. 亦枫 2017-10-7 · 23:12

    博主你好,我照着弄了,最后刷新还是原来的语句。请问是CDN的原因吗

    • avatar
      Jager 2017-10-9 · 21:21

      cdn的话排除下这个路径缓存

  6. 龙笑天 2017-10-9 · 19:51

    语句后面再带上出处就更棒了~ :mrgreen:

  7. 莉莉 2017-10-10 · 13:24

    很不错的项目。

  8. 时光在路上 2017-10-10 · 16:13

    这个功能不错,有时间研究一下。

  9. 九哥 2017-10-10 · 21:53

    这个确实不错,添加或更改语句很方便。

  10. 雅兮网 2017-10-11 · 9:44

    这就成了“你好多莉”的前端插件了 不错 不错

  11. 闲木鱼 2017-10-12 · 15:44

    2
    3
    4
    5
    6
    7
    8
    #hitokoto{
    border-left: 5px solid #2f889a;
    border-right: 5px solid #2f889a;
    background-color: #ebebeb;
    padding: 10px;text-align: center;
    color: #095AD4;
    margin: 5px 0 5px 0;
    }
    css不行

  12. 闲木鱼 2017-10-12 · 15:47

    css不对

    #hitokoto{
        border-left: 5px solid #2f889a;
        border-right: 5px solid #2f889a;
        background-color: #ebebeb;
        padding: 10px;text-align: center;
        color: #095AD4;
        margin: 5px 0 5px 0;
    }
    • avatar
      Jager 2017-10-13 · 17:53

      你看清楚,文章是这样描述的。。。。

      当然,Begin主题或者不会css的朋友可以先试下我这边写好的css代码(可以加到style.css):

      这是我用的css,如果你用了不行,那就自行修改即可,并非全部适用,每个人的网站都不一样。

  13. 大白 2017-10-14 · 19:52

    我使用了WP Super Cache缓存插件,刷新文章页面不会变,请问张哥该怎么处理??

    • avatar
      Jager 2017-10-17 · 22:13

      这个插件不会处理这个自定义路径把。。

      • 大白 2017-10-17 · 22:56

        除了用了缓存插件外,还用了CDN。。但是一言API和网站不在同一个服务器上。CDN怎么设置不缓存这个路径??

  14. 杨泽业 2017-10-14 · 21:21

    这个功能太好了,我也要弄一个,霸气威武!

  15. 杨泽业 2017-10-14 · 23:19

    想和你一样,放到打赏的下面,始终没有找到位置

  16. 子凡 2017-10-19 · 13:22

    很有意思的样子,有空值得折腾玩玩还是可以的

  17. 猿梦博客 2017-12-21 · 16:59

    很有意思,有时间弄上

  18. 月下魔术师 2018-2-1 · 17:37

    这个CSS怎么搞,我不管放在哪都没用

  19. 缙哥哥 2018-3-1 · 20:54

    想把自己多年学中医的经典语句放进去,抽空玩玩!

  20. lwl12 2018-4-11 · 0:47

    撞见自己的接口也是非常震惊了= =

    • avatar
      Jager 2018-4-11 · 11:44

      撞见了接口作者评论也是非常震精了= =

      • lwl12 2018-4-13 · 14:33

        最近我接口文档大更新了一次,感兴趣的话可以去看看(不过你已经用自己的了2333

  21. 兔子 2018-5-6 · 16:23

    张哥我遇到一个小小小问题 :???:
    文中提到的天空一言api、传送门api,还有这个自建的插入我的页面,刷新可以显示,但只要点击页面上任意链接新开页面左上角只有 这一句话。看审查元素发现新开页面只加载了页面HTML和图片和这一个接口的返回内容,其他的如js、css都没有被加载上。。但使用一言官方的那个接口打开页面正常。
    好无奈,折腾俩小时啦。
    (使用的typecho博客,和这会有关系吗

    • avatar
      Jager 2018-5-12 · 16:39

      把js代码放到网站的header试下,不要放到最后

      <script type="text/javascript" src="https://你的域名/hitokoto/?format=js&charset=utf-8"></script>
  22. 小康博客 2018-7-11 · 22:17

    这种一句话戳中心情的还不错,打算入坑。

  23. laohuwang 2018-7-17 · 12:54

    您好,怎么按照您的方法把 PHP和TXT文件放到空间Hitokoto文件夹下按路径打开是乱码?

    • avatar
      Jager 2018-8-4 · 16:51

      编码问题,自己先确定你的网站是UTF-8还是GBK

  24. 老派 2019-2-21 · 15:03

    很好的整合,支持一下,有空试试。

  25. 夜影小窝 2019-4-14 · 15:00

    已转载,想咨询下,吧边框改成调用动态gif怎么加属性,还有就是想把扫描公众号关注的图片加文字一起和它集成在一起怎么实现。谢谢博主

  26. 广州林律 2022-4-11 · 15:45

    换了BEGIN最新主题,又回来找这个教程,发现已不能实现CSS的效果了,请问张哥:css加在哪里才能实现文中的效果呢?

    • avatar
      Jager 2022-4-11 · 19:06

      很久没搞begin了,不记得了,按理说加上文章中的css到style.css,刷新浏览器缓存啥的应该就可以了。