预览

在博客每个页面底下添加随机 今日诗词 诗句.

PaperMod 主题完整代码修改记录

github link: Comparing adityatelange:master…ISouthRain:master · adityatelange/hugo-Paper…

为何这篇文章这么短?

本来是想记录完整的对主题 PaperMod 的修改, 例如:

  1. 目录位置放在侧栏

    参考链接: Hugo博客目录放在侧边 | PaperMod主题 | Sulv’s Blog

  2. 添加 utteranc 评论系统

    参考链接: Hugo PaperMod主题添加utterances评论 | 0x4b404ec

  3. 页面底下添加 今日诗词

    参考链接: 在 MemE 主题页脚添加今日诗词 | 荷戟独彷徨

  4. 搜索页面添加 tag

    参考链接: PaperMod 搜索页展示系列列表 | loyayz

  5. 修改网页字体

    参考链接: Hugo + PaperMod搭建技术博客 | Kunyang’s Blog

看见别人已经实现了, 所以我就不重复造轮子了, 我就记录如何添加 今日诗词

PaperMod 主题页面底下添加 今日诗词

修改主题文件: themes/PaperMod/layouts/partials/exten_footer.html

这是默认的:

{{- /* Footer custom content area start */ -}}
{{- /*     Insert any custom code web-analytics, resources, etc. here */ -}}
{{- /* Footer custom content area end */ -}}

这是修改后: 今日诗词

{{- /* Footer custom content area start */ -}}
{{- /*     Insert any custom code web-analytics, resources, etc. here */ -}}
<div class="footer">
    <span class="poem_sentence"></span>
    <span class="poem_info"></span>
</div>

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<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.author;
  });
</script>
{{- /* Footer custom content area end */ -}}

大功告成, 就是这么简单.