博客集成Hitokoto·一言经典语句功能-微语录就是这么简单

博客集成Hitokoto·一言经典语句功能-微语录就是这么简单(图1)

说一下个人之所以选择这代码的原因吧。

1.纯代码,无需写入数据库。这个功能的实现是通过随机调用一个TXT文本中的句子来实现的,所以就避免了每一次请求调去数据库中的信息的过程,减轻了数据库的负担。WordPress有一款名叫的插件,但是需要将语录文字写进数据库,当然这有助于对语录文字的分类,但是个人感觉对于个人博客,如果不是专门做经典语录的话没有必要如此消耗数据库。

2.模块化,方便随时添加或移出。这一点对于喜欢折腾的站长及新手站长还是挺好的,模块化的网站管理方式可以使得我们对于网站各个功能的清晰把握,即使某一模块出现故障也不会对网站整体有什么影响,但是模块化也会造成系统臃余的问题,具体如何大家自己把握。

好了,废话不多说了,来看下具体实现的步骤吧。

部署接口

新建一个index.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;    
}

新建一个名为hitokoto.txt的文本文档,将hitokoto.txt文本文档与上面的index.php文件同时放入一个名为hitokoto的文件夹中,当然这里文本文档及文件夹的名称可以更改为其他任意字符,但是要将代码中对应调用部分也做更改。现在通过浏览器访问路径“http://你的域名/hitokoto/”就可以查看输出内容了,借此我们也可以确认自己的接口部署是否正确。

网站集成

在网站中你需要显示语录文字的地方添加上如下代码既可以实现对hitokoto.txt中文字语录的调用。

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

建议大家使用Notepad++编辑工具对hitokoto.txt文件进行编辑,一行一句语录。Windows默认的文本工具打开TXT文档后可能会无法智能分句。

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

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

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

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

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

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

<script type=”text/javascript” src=” 
<div id=”hitokoto”><script>hitokoto()</script></div>

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

当然,Begin 主题或者不会 css 的朋友可以先试下我这边写好的 css 代码(可以加到 style.css):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文件加入即可。

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


赞(0) 打赏
未经允许不得转载:HTML/CSS » 博客集成Hitokoto·一言经典语句功能-微语录就是这么简单

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏