网站美化：Hitokoto·一言经典语句功能

2018年10月9日23:26:18 2 2,698 °C

摘要

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

网站美化：Hitokoto·一言经典语句功能

一、前言

Hitokoto·一言是一个很有意思的项目，官方的自我介绍如下：

一言网(Hitokoto.cn)创立于 2016 年，隶属于萌创 Team，目前网站主要提供一句话服务。
动漫也好、小说也好、网络也好，不论在哪里，我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来，形成一言网络，以传递更多的感动。如果可以，我们希望我们没有停止服务的那一天。
简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。
或是感动，或是开心，有或是单纯的回忆。来到这里，留下你所喜欢的那一句句话，与大家分享，这就是一言存在的目的。

效果展示：

每次刷新文章页面，文章末尾都会出现不同的一言。

二、部署

在网站根目录创建hitokoto文件夹，随后创建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;
}

<?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 文本文件（密码：fw2p）：

下载地址

将下载好的hitokoto.txt文本文件放在hitokoto文件夹内。

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

三、网站集成

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

部署方法和其他网站基本一致，非常简单，将下面两行代码添加到网站中任意一个你想要展示一言的位置即可：

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

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

我是在文章页面末尾添加Hitokoto，想添加到相同位置的知更鸟主题用户，可以在主题根目录下的template/social.php添加上述代码。

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

知更鸟主题的用户可以添加代码到外观->主题设置->定制风格->自定义样式里面。

#hitokoto{
    border-left: 5px solid #0073d8;
    border-right: 5px solid #0073d8;
    background-color: #3288d31a;
    padding: 10px;text-align: center;
    color: #0073d8;
    margin: 5px 0 5px 0;
}

#hitokoto{

border-left: 5px solid #0073d8;

border-right: 5px solid #0073d8;

background-color: #3288d31a;

padding: 10px;text-align: center;

color: #0073d8;

margin: 5px 0 5px 0;

}