今日诗词侧边栏小组件

本文转载自：张洪Heo《Butterfly美化：今日诗词侧边栏小组件》
根据CC 4.0 BY-SA版权协议发布，请遵守协议要求

Butterfly美化：今日诗词侧边栏小组件


API

该组件api由今日诗词提供

安装教程

创建组件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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 + '》'
  });

引入组件

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

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

填写示例：
填写示例

引入css

1
2
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/mainColor/heoMainColor.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/poem/poem.css">