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),