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

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

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

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

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

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

一、他山之石

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

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

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

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

二、部署接口

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

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

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

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

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

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

三、博客集成

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

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

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

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

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

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

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:18   其中:访客  15   博主  3

  1. 六维空间 3 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省盐城市 移动

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

  2. 老王经销商 1 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省台州市 网宿科技电信CDN节点

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

  3. 祭夜 1 火狐浏览器 Windows 10 IANA 保留地址

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

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_3 湖南省长沙市 电信

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

      • 祭夜 1 来自天朝的朋友 QQ浏览器  Android 7.1.2 Lenovo K3 Note Build/NJH47F 福建省福州市连江县 联通

        好的

  4. 橘子书 1 来自天朝的朋友 谷歌浏览器 Windows 10 福建省漳州市 电信

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

  5. 亦枫 0 来自天朝的朋友 谷歌浏览器 Windows 10 安徽省淮北市 移动

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

    • 张戈 [博主] 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 10_3_3 like Mac OS X 广东省广州市 电信

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

  6. 龙笑天 4 来自天朝的朋友 火狐浏览器 Windows 7 广东省深圳市 天威视讯

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

  7. 莉莉 1 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

    很不错的项目。

  8. 时光在路上 2 Canada 谷歌浏览器 Windows 10 加拿大

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

  9. 九哥 1 来自天朝的朋友 QQ浏览器 Windows 7 四川省内江市 电信

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

  10. 雅兮网 3 来自天朝的朋友 谷歌浏览器 Windows 7 广东省 电信

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

  11. 闲木鱼 2 来自天朝的朋友 谷歌浏览器 Windows 10 重庆市渝中区 电信

    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. 闲木鱼 2 来自天朝的朋友 谷歌浏览器 Windows 10 重庆市渝中区 电信

    css不对

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_3 湖南省长沙市 电信

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

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

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

  13. 杨泽业 2 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省金华市 电信

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

  14. 杨泽业 2 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省金华市 电信

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

加载中,请稍候...