为你的Hexo添加随机诗句
前言
看到许多Hexo构建的博客都有随机诗词功能，在浏览器里面搜集教程之后，于是写了这篇文章。
效果实现代码如下：
<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>刷新页面会有变化哦 ~~~
操作
- 输入命令
hexo n page "Message"在/butterfly/source文件夹下创建一个Message文件夹("" 里是文件名，文件名可以自定义) - 找到主题配置文件
_config.butterfly.yml，在menu位置中添加留言页面的连接：
menu:
留言: /Message/ || fas fa-comment- 进入themes/butterfly/source/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>- 在/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;
}
}- 最后使用命令
hexo g部署完成后，进入你的网站，Ctrl+Fn+F5清除一下网页缓存就可以看到效果啦。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022 年 03 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
