diff --git a/_config.butterfly.yml b/_config.butterfly.yml index 28b6f8c..748a8b8 100644 --- a/_config.butterfly.yml +++ b/_config.butterfly.yml @@ -1054,6 +1054,7 @@ inject: - - - + - - bottom: # - diff --git a/themes/butterfly/layout/includes/widget/card_poem.pug b/themes/butterfly/layout/includes/widget/card_poem.pug new file mode 100644 index 0000000..97d6ad6 --- /dev/null +++ b/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 + '》' + }); \ No newline at end of file diff --git a/themes/butterfly/layout/includes/widget/index.pug b/themes/butterfly/layout/includes/widget/index.pug index b298878..bb23caa 100644 --- a/themes/butterfly/layout/includes/widget/index.pug +++ b/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 diff --git a/themes/butterfly/source/css/poem.css b/themes/butterfly/source/css/poem.css new file mode 100644 index 0000000..451ee09 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/themes/butterfly/source/css/style.css b/themes/butterfly/source/css/style.css index 16c4182..43d87eb 100644 --- a/themes/butterfly/source/css/style.css +++ b/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);兼容性前缀,适用于一些旧版本的浏览器 */ }