【Hexo】美化教程合集 3

AiGuoHou2023-07-252023-07-25

鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。
本贴魔改均基于butterfly主题。
本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。
因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。
本帖基于Butterfly主题进行魔改方案编写，因此请读者优先掌握Butterfly主题官方文档的内容后再来进行魔改。
魔改会过程常常引入自定义的css与js文件，方法见【Hexo】添加自定义css和js文件

1 今日诗词侧边栏

点击查看教程

API

本组件的API由今日诗词提供
Demo
本站所有包含侧边栏的页面均有该组件

安装教程
主题新建themes/butterfly/layout/includes/widget/card_poem.pug，内容如下

#card-poem.card-widget
    #poem_sentence
    #poem_info
        #poem_dynasty
        #poem_author
script(src='https://cdn.jsdelivr.net/npm/js-heo@1.0.11/poem/jinrishici.js', charset='utf-8')
script(type='text/javascript').
  jinrishici.load(function(result) {
  var sentence = document.querySelector("#poem_sentence")
  var author = document.querySelector("#poem_author")
  var dynasty = document.querySelector("#poem_dynasty")

  var sentenceText = result.data.content
  sentenceText = sentenceText.substr(0, sentenceText.length - 1);
  sentence.innerHTML = sentenceText
  dynasty.innerHTML = result.data.origin.dynasty
  author.innerHTML = result.data.origin.author + '《' + result.data.origin.title + '》'
  });