本文作者:阿豪

个人网站如何添加经典语句功能

阿豪 11-04 209
个人网站如何添加经典语句功能摘要: 前言今天看到有的网站内容底部有一句话功能挺酷的,百度了下找到了Hitokoto·一言项目,借鉴了下它的调用代码效果展示教学内容1、在网站根目录创建classic文件夹(classi...

前言

今天看到有的网站内容底部有一句话功能挺酷的,百度了下找到了Hitokoto·一言项目,借鉴了下它的调用代码

效果展示

image.png

教学内容

1、在网站根目录创建classic文件夹(classic文件名可以自定义),随后创建index.php,classic.txt为一句话存放文件。编写代码如下

<?php
//获取句子文件的绝对路径
//如果你介意别人可能会拖走这个文本,可以把文件名自定义一下,或者通过Nginx禁止拉取也行。
$path = dirname(__FILE__);
$file = file($path."/classic.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 classic(){document.write('" . $content ."');}";
} else {
    echo $content;
}

2、下载站长自用的classic.txt文件  或者可以自定义classic.txt这个文件的内容

文件下载:classic.txt

3、将下载好的classic.txt文本文件放在classic文件夹内。

4、浏览器访问 http://你的域名/classic/ 就可以看到输出内容了。

5、网站上调用

刚刚我们已经自建了接口,部署方法和其他网站基本一致,非常简单,将下面两行代码添加到网站中任意一个你想要展示的位置即可

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

6、默认的样式有点丑我们可以加载下自定义CSS样式(也可以自己自定义CSS样式

#classic{
    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;
}

总结

部署完成之后,前台刷新就可以看到效果了,每次刷新都会随机展示经典句子。如果你有新的句子,也只需编辑 classic.txt 文件加入新的句子即可。


文章版权及转载声明

作者:阿豪本文地址:https://www.ahaoyw.com/article/661.html发布于 11-04
文章转载或复制请以超链接形式并注明出处阿豪运维笔记