前言
看到许多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清除一下网页缓存就可以看到效果啦。
后记
这里调用的是今日诗词API，是一个可以返回一句古诗词名句的接口。
