SHESHUI.ME

一言:许巍歌词作品的内容展示

最后更新 Mar 08, 2019

一言:许巍歌词作品的内容展示

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

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

通过JS随机获取文本并在页面展示,这个实现不麻烦,至于如何通过API的方式输出,只能Google一下,于是进入 Ctrl+CCtrl+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>

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

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

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

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

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

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

THE END.

评论

comment

暂无留言。

目录