Hexo添加两句诗词
前言
本文将介绍如何增添随机诗词的展示。
之前在很多主题中见过这类设置，正好最近想在站点添加一个留言页，想着内容太过空洞，于是就把随机诗词搬了过来。
具体效果如下：
刷新页面会有变化哦~~~~
操作
- 输入命令hexo n page "Message"在\source文件夹下新建一个Message文件夹（名字可以自定义）
- 进入Message文件夹，编辑index.md文件，添加如下代码：
<div class="poem-wrap">
<div class="poem-border poem-left"></div>
<div class="poem-border poem-right"></div>
<h>念两句诗</h>
<p id="poem">挑选中...</p>
<p id="info">
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
jinrishici.load(function(result) {
poem.innerHTML = result.data.content
info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
document.getElementById("poem").value(poem);
document.getElementById("info").value(info);
});
</script>
</div>3.在\themes\butterfly\source\css\index.styl中添加以下代码（直接在底部添加）：
/*诗*/
.poem-wrap {
position: relative;
width: 730px;
max-width: 80%;
border: 2px solid #797979;
border-top: none;
text-align: center;
margin: 80px auto;
}
.poem-wrap h {
font-size: 40px;
font-style:oblique;
position: relative;
margin-top: -40px;
display: inline-block;
letter-spacing: 4px;
color: #797979
}
.poem-wrap p {
width: 70%;
margin: auto;
line-height: 30px;
color: #797979;
}
.poem-wrap p#poem {
font-size: 22px;
margin: 15px auto;
}
.poem-wrap p#info {
font-size: 15px;
margin: 15px auto;
}
.poem-border {
position: absolute;
height: 2px;
width: 27%;
background-color: #797979;
}
.poem-right {
right: 0;
}
.poem-left {
left: 0;
}
@media (max-width: 685px) {
.poem-border {
width: 18%;
}
}
@media (max-width: 500px) {
.poem-wrap {
margin-top: 60px;
margin-bottom: 20px;
border-top: 2px solid #797979;
}
.poem-wrap h {
margin: 20px 6px;
}
.poem-border {
display: none;
}
}4.找到主题配置文件_config.butterfly.yml，在menu位置中添加留言页面的连接：
menu:
留言: /Message/ || fas fa-comment5.重新部署，就可以看到效果啦。
后记
这里调用的是今日诗词API，是一个可以返回一句古诗词名句的接口。
它可以通过图片和 JSON 格式调用。今日诗词 API 根据不同地点、时间、节日、季节、天气、景观、城市进行智能推荐。
访问链接：https://www.jinrishici.com/
可以访问：https://v2.jinrishici.com/one.json 查看效果
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-05-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
