From 4fff64f05ff212c5752d1cf3211288476f4c6e7d Mon Sep 17 00:00:00 2001 From: bisnsh Date: Tue, 10 Feb 2026 21:17:10 +0800 Subject: [PATCH] update theme --- _config.butterfly.yml | 4 +- .../includes/third-party/share/index.pug | 4 +- .../includes/third-party/share/web_share.pug | 53 +++++++++++++++++++ themes/butterfly/source/css/poem.css | 26 ++++++++- .../butterfly/source/css/shuoshuoshouye.css | 27 ++++++++-- themes/butterfly/source/css/style.css | 31 +---------- 6 files changed, 106 insertions(+), 39 deletions(-) create mode 100644 themes/butterfly/layout/includes/third-party/share/web_share.pug diff --git a/_config.butterfly.yml b/_config.butterfly.yml index 59df352..12f584f 100644 --- a/_config.butterfly.yml +++ b/_config.butterfly.yml @@ -622,7 +622,7 @@ search: share: # Choose: sharejs / addtoany # Leave it empty if you don't need share - use: sharejs + use: web_share # Share.js # https://github.com/overtrue/share.js @@ -1185,7 +1185,7 @@ inject: - - - - - + - - - - diff --git a/themes/butterfly/layout/includes/third-party/share/index.pug b/themes/butterfly/layout/includes/third-party/share/index.pug index 447c589..458a6ee 100644 --- a/themes/butterfly/layout/includes/third-party/share/index.pug +++ b/themes/butterfly/layout/includes/third-party/share/index.pug @@ -6,4 +6,6 @@ if use when 'addtoany' !=partial('includes/third-party/share/addtoany', {}, {cache: true}) when 'sharejs' - include ./share-js.pug \ No newline at end of file + include ./share-js.pug + when 'web_share' + include ./web_share.pug \ No newline at end of file diff --git a/themes/butterfly/layout/includes/third-party/share/web_share.pug b/themes/butterfly/layout/includes/third-party/share/web_share.pug new file mode 100644 index 0000000..d62bf13 --- /dev/null +++ b/themes/butterfly/layout/includes/third-party/share/web_share.pug @@ -0,0 +1,53 @@ +//- web_share.pug + +style. + #web-share-btn { + background: var(--btn-bg); + color: var(--btn-color); + border: none; + padding: 0.5rem 1rem; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s; + } + #web-share-btn:hover { + background: var(--btn-hover-color); + } + +#web-share-component + button#web-share-btn(title='分享本文') + i.fas.fa-share-alt + span= ' ' + _p('分享') + +script. + (() => { + const setupWebShare = () => { + const btn = document.getElementById('web-share-btn') + if (!btn) return + + // 点击事件处理 + btn.addEventListener('click', async () => { + if (navigator.share) { + try { + await navigator.share({ + title: '!{page.title || config.title}', + text: '!{truncate(strip_html(page.content), {length: 100})}', + url: window.location.href + }) + } catch (err) { + console.log('分享取消或失败', err) + } + } else { + // 降级处理：比如弹出提示或复制链接 + const shareData = window.location.href + navigator.clipboard.writeText(shareData).then(() => { + btf.snackbarShow('系统不支持分享，已将链接复制到剪贴板') + }) + } + }) + } + + // 考虑到 Butterfly 的 Pjax 跳转，需要重新绑定 + setupWebShare() + document.addEventListener('pjax:complete', setupWebShare) + })() \ No newline at end of file diff --git a/themes/butterfly/source/css/poem.css b/themes/butterfly/source/css/poem.css index ee89d8e..cb7df37 100644 --- a/themes/butterfly/source/css/poem.css +++ b/themes/butterfly/source/css/poem.css @@ -1,14 +1,12 @@ [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{ @@ -42,4 +40,28 @@ div#poem_dynasty{ background: var(-btn-bg); color: var(--fontcolor); border-radius: 8px; +} + +#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); } \ No newline at end of file diff --git a/themes/butterfly/source/css/shuoshuoshouye.css b/themes/butterfly/source/css/shuoshuoshouye.css index 97a5f49..4159010 100644 --- a/themes/butterfly/source/css/shuoshuoshouye.css +++ b/themes/butterfly/source/css/shuoshuoshouye.css @@ -54,12 +54,17 @@ } } +/* 重点修改：bber-talk 的磨砂玻璃背景 */ #bber-talk { - /* border-radius: 8px; */ - /* background: var(--card-bg); */ - /* box-shadow: none; */ + /* 统一磨砂玻璃效果 */ + 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); + -webkit-backdrop-filter: blur(10px); + + border-radius: 12px; /* 给哔哔栏加一点圆角，更符合玻璃质感 */ + border: 1px solid rgba(255, 255, 255, 0.3); /* 增加边缘高光 */ + box-sizing: border-box; - /* transition: all .3s ease-in-out; */ cursor: pointer; width: 100%; min-height: 50px; @@ -68,6 +73,18 @@ align-items: center; overflow: hidden; font-weight: 700; + transition: all .3s ease-in-out; +} + +/* 暗黑模式适配 */ +[data-theme=dark] #bber-talk { + 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; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +#bber-talk:hover { + transform: translateY(-2px); /* 悬停微动，增加交互感 */ + box-shadow: 0 8px 20px rgba(0,0,0,0.1); } #bber-talk, @@ -120,4 +137,4 @@ text-align: center; margin-right: 20px; } -} +} \ No newline at end of file diff --git a/themes/butterfly/source/css/style.css b/themes/butterfly/source/css/style.css index 9e23daa..f5e5bc9 100644 --- a/themes/butterfly/source/css/style.css +++ b/themes/butterfly/source/css/style.css @@ -23,8 +23,7 @@ rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6), - rgba(255, 255, 255, 0.7)), - url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */ + rgba(255, 255, 255, 0.7)); /* 鼠标悬停时显示的背景图片 */ background-size: cover; background-repeat: no-repeat; opacity: 0.5; @@ -37,8 +36,7 @@ rgba(24, 40, 72, .1), rgba(35, 37, 58, .3), rgba(35, 37, 58, .6), - rgba(24, 40, 72, .7)), - url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */ + rgba(24, 40, 72, .7)); /* 鼠标悬停时显示的背景图片 */ background-size: cover; background-repeat: no-repeat; } @@ -150,31 +148,6 @@ border-radius: 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); -} - /*文章页面*/ .layout>#post { background: linear-gradient(-45deg, rgba(255, 255, 255, .7),