Hexo Chic 底部添加古诗词

使用 Hexo 搭建博客后可能需要一些自定义修改。
要得可口，亲自动手。很喜欢chic的整体风格，但很多细节上的呈现有些自己的想法，空闲时间一点一点实现吧。
例如，想要实现在页面底部添加随机古诗词，并且每次加载时刷新。

修改 Chic/layout/_partial/footer.ejs

在文件中添加以下代码：

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<div class="poem-container">
    <div id="poem_sentence" style="display: inline;"></div>
    ——
    <div id="poem_info" style="display: inline;"></div>
</div>
<script type="text/javascript">
jinrishici.load(function(result) {
    var sentence = document.querySelector("#poem_sentence")
    var info = document.querySelector("#poem_info")
    sentence.innerHTML = result.data.content
    info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
});
</script>

修改 Chic/source/css/layout.styl

由于 layout.styl 中规定了 height 与 line-height 数值，因此直接添加换行 <br> 可能效果不佳。建议调整 footer 字段样式：

.footer
  height 4rem
  width 100%
  text-align center
  line-height 1.5rem

后续

后续可能修改成自己词库的内容，暂时先用这个吧。

参考

个人网站底部添加中华诗词 - Xiao-Le Deng (邓小乐)