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

  • A+
所属分类:网站优化

 在浏览其他的人的博客的时候发现了一个很有意思的东西,就是在每一篇文章后面都会随机的显示一句经典语录,主要是调用了自由天空的一言api接口,稳定性和速度都相当的不错,自己也部署了下,怎么看都觉得有点别扭,后面还是果断的去掉了,这里也记录下部署的过程。

      Ps:官方API接口介绍参考部署一言API使用说明

一、部署接口

       直接上代码:

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

       在网站的根目录新建一个hitokoto文件,然后把以上代码保存为index.php放到hitokoto中,下载hitokoto

      这里我直放到了百度网盘,方便大家下载:

      下载地址:  https://pan.baidu.com/s/1DYT-TlKRavzGk1X-JHzzPg

      把hitokoto.txt也放到hitokoto文件夹中,与index.php在同一级目录

      现在,浏览器访问 http://你的域名/hitokoto/ 就可以看到输出内容了,是不是很神奇呢?

二、部署到博客

       第一步我们已经完成了接口的部署,接下来就是把这个功能搬到自己的博客上了。  部署方法其实也非常简单,将下面的两行代码放到博客你想显示一言的配置即可(一般是在主题的文章页面,dux主题为single.php文件):

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

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

       当然,题或者不会 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 文件加入即可。

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

发表评论

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