update theme

This commit is contained in:
2026-02-10 21:17:10 +08:00
parent 522a86b511
commit 4fff64f05f
6 changed files with 106 additions and 39 deletions

View File

@@ -6,4 +6,6 @@ if use
when 'addtoany'
!=partial('includes/third-party/share/addtoany', {}, {cache: true})
when 'sharejs'
include ./share-js.pug
include ./share-js.pug
when 'web_share'
include ./web_share.pug

View File

@@ -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)
})()

View File

@@ -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);
}

View File

@@ -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;
}
}
}

View File

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