说明

一口心灵毒鸡汤，
快乐赛过去打桩。
要问这个怎么搞，
快来看看这文章。

一言API的搭建方法可以看这里：

“一言 API” 2.0版

前言想借用“一言 API” 搭建一个"毒鸡汤"的网页。之前的API只能输出固定文本库，每个特殊分类都要单独搭建一个...

部署html文件

毒鸡汤根目录内新建index.php，写入以下代码

<html>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>毒鸡汤 - 壮士可要来一碗！</title>
    <link href="jitang/min.css" rel="stylesheet">
</head>
<body>
<div class="top-wrap" style="position: absolute; top: 1vh;width: 100%;z-index: 999"> 
    <div class="container">
        <div class="row" style="margin-top: 30px;">
            <div class="col">
                <div class="float-right" style="padding-top: 0px;">
                    <a class="btn btn-primary btn-filled btn-xs" href="https://your-domain.com" >My Blog</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="main-wrapper" style="position: relative; top: -6vh;">
    <div class="container main-sentence justify-content-center text-center">
        <span id="sentence" style="font-size: 2rem;">
    <!-- 这里是输出的“一言”句子 -->  
        <script type="text/javascript" src="hitokoto/index.php?encode=js&type=jitang"></script>
        <p class="content"><script>hitokoto()</script></p>

    <!-- 这里是输出的“一言”句子 --> 
        </span>  
    </div>
</div>

<div class="foot-1" style="position: absolute; bottom: 7vh;width: 100%;">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <span class="btn btn-primary btn-filled btn-xs">
                <a onclick="
                location.reload()
                ">扶我起来，我还能喝！</a>
                </span>
        </div>
          </div>
    </div>
</div>
<div class="foot-2" style="position: absolute; bottom: 2vh;width: 100%;">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                Modified By <a target="_blank" href="https://blog.imvann.com">Vann</a>
            </div>
          </div>
    </div>
</div>

</body>
</html>

第15行末尾https://your-domain.com替换为自己的博客。

部署CSS文件

下载CSS文件，与上述index.php放入同一文件夹内。

部署文本库

新建jitang.txt，与上述index.php放入同一文件夹内。

实现效果

注意事项

文件相对位置

本文默认毒鸡汤与一言 API根目录相对位置为：

一言 API : */api/hitokoto
毒鸡汤   : */api/jitang

如果相对位置有变化，修改index.php第24行"hitokoto/index.php?encode=js&type=jitang"为自己一言 API路径。

文本库调整

毒鸡汤index.php文件指定文本库为jitang.txt，如需调整，修改第24行"type=jitang"为所需文本库名称。

打包文件

解压缩直接食用。
包含了默认读取的hitokoto.txt和毒鸡汤jitang.txt文本文件。
记得第15行末尾https://your-domain.com替换为自己的博客。

文章作者：Vann

本文链接：https://blog.imvann.com/7.html

转载请注明本文链接