与其说是展示，不如说是信仰。太美的歌曲，太美的作词作曲，感谢许少年音乐作品的一路同行，虽然你已过了知天命的年纪，但在大多数巍迷心中，甚至你自己也一定坚信永远是那个少年。

偶然间通过很多独立博客的友链去搜寻一些比较精致的博客作品，因为毕竟诸如网易博客这种平台型的产品也下线了，或多或少都会滋生一些新的独立博客，然而好品质的博客不常有，但 Inwao World 算是一类较好品质的作品。更值得幸会的是这位博主也是一名“巍迷”，于是大家有了共同的话题。

通过JS随机获取文本并在页面展示，这个实现不麻烦，至于如何通过API的方式输出，只能Google一下，于是进入 Ctrl+C 与 Ctrl+V 模式。

<?php
//定义内容文件路径
$path = dirname(__FILE__);
$file = file($path."/yiyan.txt");
//以每一行的方式随机读取
$arr  = mt_rand( 0, count( $file ) - 1 );
$content  = trim($file[$arr]);
//编码判断，用于输出相应的响应头部编码
if (isset($_GET['charset']) && !emptyempty($_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;
}
// 以上来源参考： https://laod.cn/design/page/hitokoto-yiyan.html

以下开始在页面通过JS进行调用并展示。

<script type="text/javascript" src="https://www. yourdomain.com/yiyan/?format=js&charset=utf-8"></script>
<div id="yiyan"><script>hitokoto()</script></div>
/* via: https://laod.cn/design/page/hitokoto-yiyan.html*/

到此为止，页面每次刷新就可以获取新的文本内容。 yiyan.txt 文件格式参考：

此刻谁在群山云海之巅，自在的心畅游天外之天。 ——「此时此刻」
是谁在风中奔跑，自由穿行梦想，向着幸福的远方。 ——「风行」
静静看着开始到结束，就像是经历一场生命洗礼。 ——「出离」
世界宛如一场梦，我不能在这里轮回不已。 ——「出离」
没有什么能够阻挡，你对自由的向往。 ——「蓝莲花」
此刻我在远方思念你，桃花已不觉开满了西山。 ——「世外桃源」

为了取得更好的展示效果，且不需要刷新页面的前提下可滚动更新页面显示。可更换以上 Script 部分的脚本如下：

(function() {
    var server = 'https://www. yourdomain.com/yiyan/?format=js';
    var target = document.getElementById('hitokoto');
    var fadeDur = 1;
    var waitDur = 10;
    var errorMsg = '加载出现了问题！';
    /* -- 配置部分结束 -- */
    var first = true;
    var present = '';
    target.style.opacity = 0;
    target.style.transition = 'opacity ' + fadeDur + 's';
    function loadData() {
        var connect = new XMLHttpRequest();
        connect.open('GET', server, true);
        connect.onload = function() {
            if (connect.status >= 200 && connect.status < 400) {
                present = connect.responseText;
                if (first) {
                    first = false;
                    target.textContent = present;
                    fadeIn();
                } else {
                    fadeOut();
                }
            } else {
                  target.style.opacity = 1;
                  target.textContent = errorMsg;
                  setTimeout(loadData, (fadeDur + waitDur) * 1000);
            }
        }
        connect.onerror = function() {
            target.textContent = errorMsg;
            setTimeout(loadData, (fadeDur + waitDur) * 1000);
        }
        connect.send();
    }
    function fadeOut() {
        target.style.opacity = 0;
        setTimeout(function() {
            target.textContent = present;
            fadeIn();
        }, fadeDur * 1000);
    }
    function fadeIn() {
        target.style.opacity = 1;
        setTimeout(loadData, (fadeDur + waitDur) * 1000);
    }
    loadData();
})();
// 来源参考：https://www.tcdw.net/post/hitokoto-auto/

对应的 HTML 显示对象需修改如下：

<span id="hitokoto"></span>

以上就是关于在页面显示一言¹，当然也可以是Mission、格言等等的最简单操作。而关于一言 hitokoto¹ 在 Github 也还有很多相关项目可以参考学习。比如：

• hitokoto本地源 ：不依赖任何在线API和本地数据库调用一言
• A high performance hitokoto api ：一言php版 version 1.2.0，需要依赖 MySQL、Swoole
• A simple PHP hitokoto api ：通过php格式存储文本内容，并处理了跨域调用的问题。

当然，通过Google还可以发现有更复杂的解决方案，具体还要看自己的实际应用场景，对于类似这种博客上仅需要提升下文艺小清晰的页面氛围，我觉得本文所提供的就足够用了。

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

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

简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。

或是感动，或是开心，有或是单纯的回忆。来到这里，留下你所喜欢的那一句句话，与大家分享，这就是一言存在的目的。
via: hitokoto.us

— THE END.