关于给hexo博客增加每日一言（诗句，影视名句，网易云热评等）

hexo博客增加每日一言

技术

发布日期: 2020-09-23

文章字数: 825

阅读时长: 3 分

前言：看到很多个人博客都带有每日一言功能，所以决定也弄一个，挺好看的。基于matery主题设置的，其他主题原理也一样可参考。

每日一言API

一言网（hitokoto.cn）创立于 2016 年，隶属于萌创团队，目前网站主要提供一句话服务。
简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。或是感动，或是开心，有或是单纯的回忆。来到这里，留下你所喜欢的那一句句话，与大家分享，这就是一言存在的目的。—节选自一言网
详细介绍请转步：
一言网（hitokoto.cn）

封装一个获取接口

官方的获取路径为：https://v1.hitokoto.cn/,可以自定义获取的参数类型。
例如我这里的c=d&c=h&c=j,就是获取的文学、影视、网易云的文本,若要自定义获取的类型，请参考官网请求参数部分文档。
也可以直接引入下面我的也可。注意：这部分js代码放在引入页面的ejs文件下,我存放的位置为/layout/contact.ejs,与后面的html代码放在一起也可。

    <script>
        $.get("https://v1.hitokoto.cn?c=d&c=h&c=j",function(datastatus){
            if(status=='success'){
                $('#poem').html(data.hitokoto)
                if(data.from_who!=null){
                    $('#info').html(data.from_who+" · "+《 "+data.from+" 》");
                    }
                    else{
                        $('#info').html(" “ "+data.from+"” ");
                    }
            }
            else{$('#poem').html("获取出错啦");}});
    </script>

引入html

同上,这部分html代码放在引入页面的ejs文件下,我存放的位置为/layout/contact.ejs

<!-- 加入网易云音乐热门评论，实时更新 -->
<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样式

这部分放在一个全局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;
    }

最后，上效果：
每日一言