Butterfly今日诗词侧边栏小组件

组件样式

安装教程

创建组件

主题新建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/[email protected]/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 + '》'
  });

引入组件

在themes/butterfly/layout/includes/widget/index.pug中你需要的位置添加以下内容

!=partial('includes/widget/card_poem', {}, {cache: true})

在_config.butterfly.yml的head处添加css：

inject:
  head:
    - <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/mainColor/heoMainColor.css">
    - <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/poem/poem.css">

完毕！