add poem card

themes/butterfly/layout/includes/widget/card_poem.pug

@@ -0,0 +1,17 @@
+#card-poem.card-widget
+    #poem_sentence
+    #poem_info
+        #poem_dynasty
+        #poem_author
+script(src='https://cdn.liumingye.cn/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

@@ -9,6 +9,7 @@
     else
       !=partial('includes/widget/card_author', {}, {cache: true})
       !=partial('includes/widget/card_announcement', {}, {cache: true})
+      !=partial('includes/widget/card_poem', {}, {cache: true})
       !=partial('includes/widget/card_top_self', {}, {cache: true})
       .sticky_layout
         if showToc
@@ -21,6 +22,7 @@
     //- page
     !=partial('includes/widget/card_author', {}, {cache: true})
     !=partial('includes/widget/card_announcement', {}, {cache: true})
+    !=partial('includes/widget/card_poem', {}, {cache: true})
     !=partial('includes/widget/card_top_self', {}, {cache: true})
 
     .sticky_layout

themes/butterfly/source/css/poem.css

@@ -0,0 +1,45 @@
+[data-theme=light] {
+  --fontcolor: #363636;
+  --text: rgba(60, 60, 67, 0.6);
+  --btn-bg: #edf0f7;
+  --bg: #edf0f7;
+}
+
+[data-theme=dark] {
+  --fontcolor: #F7F7FA;
+  --text: #a1a2b8;
+  --btn-bg: #30343f;
+  --bg: #30343f;
+}
+div#poem_sentence{
+  text-align: center;
+  font-family: serif,cursive;
+  line-height: 1.4;
+  margin-bottom: 0.5rem;
+  padding: 1rem;
+  border-radius: 12px;
+  background: var(--bg);
+  min-height: 62px;
+}
+
+div#poem_info{
+  display: flex;
+  color: var(--text);
+  font-size: 0.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+div#poem_author{
+  order: 1;
+  padding: 2px;
+  margin-left: 8px;
+}
+
+div#poem_dynasty{
+  order: 0;
+  padding: 2px 4px 2px 6px;
+  background: var(-btn-bg);
+  color: var(--fontcolor);
+  border-radius: 8px;
+}

themes/butterfly/source/css/style.css

@@ -163,6 +163,29 @@
     backdrop-filter: blur(10px); 
      /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
 }
+/* 古诗词卡片 */
+#card-poem{
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem!important;
+  min-height: 130px;
+    background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
+            rgba(255, 255, 255, .8),
+            rgba(255, 255, 255, .8),
+            rgba(255, 255, 255, .7))!important;
+    backdrop-filter: blur(10px); 
+}
+
+[data-theme=dark] #card-poem{
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem!important;
+  min-height: 130px;
+    background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
+            rgba(35, 37, 58, .8),
+            rgba(35, 37, 58, .8),
+            rgba(24, 40, 72, .7))!important;
+    backdrop-filter: blur(10px); 
 
 /* 个人信息Follow me按钮 */
 #aside-content>.card-widget.card-info>#card-info-btn {
@@ -203,8 +226,8 @@
     background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
             rgba(35, 37, 58, .8),
             rgba(35, 37, 58, .8),
-            rgba(24, 40, 72, .7));
-    backdrop-filter: blur(10px); 
+            rgba(24, 40, 72, .7))!important;
+    backdrop-filter: blur(10px)!important; 
      /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
 }