嘘~ 正在从服务器偷取页面 . . .

一言 配置说明


参考文档1:关于给hexo博客增加每日一言(诗句,影视名句,网易云热评等) | itsNekoDeng (gitee.io)

参考文档2:Hexo博客添加一言_过客~励む-CSDN博客_hexo一言

每日一言API

以下文字节选自一言网

一言网创立于 2016 年,隶属于萌创团队,目前网站主要提供一句话服务。
​ 简单来说,一言指的就是一句话,可以是动漫中的台词,也可以是网络上的各种小段子。 或是感动,或是开心,有或是单纯的回忆。来到这里,留下你所喜欢的那一句句话,与大家分享,这就是一言存在的目的。

封装一个获取接口

​ 官方的获取路径为:https://v1.hitokoto.cn/,可以自定义获取的参数类型。

以下参数及说明来自官网

​ 请求参数:

参数名称 是否必选 参数类型 示例 说明
type string a 一言类型
format string json 返回数据类型,json 或者 text

​ Type 参数说明

参数 说明
a 动画
b 漫画
c 游戏
d 文学
e 原创
f 来自网络
g 其他
h 影视
i 诗词
j 网易云
k 哲学
l 抖机灵
其他 作为 动画 类型处理

接口封装

fetch('https://v1.hitokoto.cn?c=a&c=c&c=d')
        .then(function (res) {
            return res.json();
        })
        .then(function (data) {
            var poem = document.getElementById('poem');
            var info = document.getElementById('info');
            poem.innerText = data.hitokoto;
            if(data.from_who!=null)
                info.innerText = data.from_who+" · "+"《"+data.from+"》";
            else
                info.innerText = " “ "+data.from+"” ";
        })
        .catch(function (err) {
            console.error(err);
        })

引入 html

<!-- 加入网易云音乐热门评论,实时更新 --> 
<div class="poem-wrap"> 
    <div class="poem-border poem-left"> 
    </div> 
    <div class="poem-border poem-right"> 
    </div> 
    <h1>热评</h1> 
    <p id="poem">loading...</p> 
    <p id="info">loading...</p> 
</div>

设置 css 样式

​ 在主题文件夹下的 source/css/my.css末尾加上下面的代码:

/* 增加每日一言模块 */

.poem-wrap {
    position: relative;
    width: 730px;
    max-width: 80%;
    border: 2px solid #797979;
    border-top: 0;
    text-align: center;
    margin: 80px auto;
}

.poem-left {
    left: 0;
}

.poem-border {
    position: absolute;
    height: 2px;
    width: 27%;
    background-color: #797979;
}

.poem-right {
    right: 0;
}

.poem-wrap h1 {
    position: relative;
    margin-top: -20px;
    display: inline-block;
    letter-spacing: 4px;
    color: #797979;
}

.poem-wrap p:nth-of-type(1) {
    font-size: 25px;
    text-align: center;
    margin: 0 auto;
}

.poem-wrap p {
    width: 70%;
    margin: auto;
    line-height: 30px;
    color: #797979;
    font-family: "Linux Biolinum", "Noto Serif SC", Helvetica, Arial, Menlo, Monaco, monospace, sans-serif;
}

.poem-wrap p:nth-of-type(2) {
    font-size: 18px;
    margin: 15px auto;
}

.bozhushuo {
    text-align: center;
    font-size: 19px!important;
    margin: 0 0 12px!important;
    line-height: 1.9rem;
    font-family: "Linux Biolinum", "Noto Serif SC", Helvetica, Arial, Menlo, Monaco, monospace, sans-serif;
}

.notice {
    margin: 30px auto;
    padding: 20px;
    border: 1px dashed #e6e6e6;
    color: #969696;
    position: relative;
    display: inline-block;
    width: 95%;
    background: #fbfbfb50;
    border-radius: 10px;
    font-size: 16px;
}

.notice-content {
    display: initial;
    vertical-align: middle;
}

​ 这样就各个部分就大功告成了。

​ 想要在哪个页面显示,就在对应页面加上这个 js 跟 html 代码,具体的还是要靠个人微调。


文章作者: 目棃
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 目棃 !
评论
  目录