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

前言：看到很多个人博客都带有每日一言功能，所以决定也弄一个，挺好看的。基于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;}

最后，上效果：

本文参考了以下博客：如果你使用的是和我一样的matery主题，则可以直接复制上面代码，再做酌情修改样式即可，其他主题的也一样，逻辑都是一样的。

Sanarous’s Blog

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

关于给hexo博客增加相册页面（实现瀑布流相册，实现加密相册）
前言: 本文是关于给自己的博客网站添加一个相册页面,并且实现瀑布流相册效果,基于matery主题,其他主题亦可参考. 首先,直接上效果图,详细浏览地址: 关于给hexo博客增加相册页面(实现瀑布流相册 ...
关于给hexo博客增加随笔页面（并对页面仿信纸作业纸样式修饰）
前言: 本文是给hexo博客增加随笔页面,并对页面仿信纸作业纸样式修饰,基于matery主题,其他主题亦可参考. 至于为什么要写本文,是因为有一天,突然有了一个想法,想把以前初高中写的那些作文,整理一 ...
关于给hexo博客增加节日气氛主题切换（包括中国春节和圣诞节）
前言: 有段时间没折腾过博客页面样式了,偶然间看到了一个春节红灯笼的小demo,感觉很棒,所以拿过来了,并且自己新增了一些小挂件,加上了关键帧动画,圣诞树等元素.主题切换按钮原理和以前教程里面提到的暗 ...
关于给hexo博客增加视频vlog页面（主要引入哔哩哔哩视频）
前言: 这里是博主的vlog区,博主也是B站的一名普通up
Hexo博客搭建与部署
Hexo简介 Hexo是一款基于Node.js的静态博客框架,使用Markdown(或其他渲染引擎)解析文章,依赖少易于安装,可在几秒内利用现有主题生成静态网页.框架提供了很详细的中文文档,大家可以进 ...
hexo博客添加暗色模式_我如何将暗模式添加到我的网站
hexo博客添加暗色模式 I recently redesigned my website. Here are 2 pictures of how it looked, for reference: ...
Hexo博客（Snail主题）搭建回顾概览
Hexo博客(Snail主题)搭建回顾概览笔者搭建博客地址:saltyfishyjk's Blog 文章目录 Hexo博客(Snail主题)搭建回顾概览 Part 0 前言写作背景定位您在这里 ...
hexo博客搭建及主题优化(一)
个人博客个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客介 ...
腾讯云部署hexo博客系统
腾讯云部署hexo博客系统 1. 云服务器端配置 git 1. 安装依赖库和编译工具安装依赖库: yum install curl-devel expat-devel gettext-devel o ...