Skip to content

Commit 5ae6b32

Browse files
calderbuildcalderbuild
committed
添加背景切换器功能和配置Disqus评论系统
1 parent cfc3335 commit 5ae6b32

File tree

5 files changed

+366
-1
lines changed

5 files changed

+366
-1
lines changed

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ kramdown:
6262
start_line: 1
6363

6464
# Disqus settings
65-
disqus_username: # 如果需要评论功能，请在这里填入你的Disqus用户名
65+
disqus_username: johnrobertdestiny # 如果需要评论功能，请在这里填入你的Disqus用户名
6666

6767
# Netease settings
6868
netease_comment: false

‎_includes/head.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,4 +94,7 @@
9494
<!-- Google AdSense -->
9595
<script data-ad-client="ca-pub-6487568398225121" async
9696
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
97+
98+
<!-- Background Switcher -->
99+
<script src="{{ "/js/background-switcher.js" | prepend: site.baseurl }}"></script>
97100
</head>

‎_layouts/default.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,19 @@
3636
</div>
3737
</div>
3838

39+
<!-- Background Switcher -->
40+
<div class="bg-switcher" id="bg-switcher">
41+
<div class="bg-switcher-toggle" onclick="toggleBackgroundSwitcher()">
42+
<i class="fa fa-palette"></i>
43+
<span>背景</span>
44+
</div>
45+
<div class="bg-switcher-panel" id="bg-switcher-panel">
46+
<div class="bg-switcher-title">选择背景主题</div>
47+
<div class="bg-switcher-themes" id="bg-switcher-themes">
48+
<!-- 主题选项将通过JavaScript动态生成 -->
49+
</div>
50+
</div>
51+
</div>
3952

4053
<!-- Image to hack wechat -->
4154
<img src="/img/icon_wechat.png" width="0" height="0" />

‎css/jason-blog.css‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3386,3 +3386,205 @@ body.dark-mode .intro-header {
33863386
.sidebar-container .friends a:last-child {
33873387
border-bottom: none;
33883388
}
3389+
3390+
/* 背景切换器样式 */
3391+
.bg-switcher {
3392+
position: fixed;
3393+
top: 50%;
3394+
right: 20px;
3395+
transform: translateY(-50%);
3396+
z-index: 9999;
3397+
font-family: 'Helvetica Neue', Arial, sans-serif;
3398+
}
3399+
3400+
.bg-switcher-toggle {
3401+
background: rgba(255, 255, 255, 0.95);
3402+
backdrop-filter: blur(10px);
3403+
border: 1px solid rgba(30, 64, 175, 0.2);
3404+
border-radius: 50px;
3405+
padding: 12px 16px;
3406+
cursor: pointer;
3407+
display: flex;
3408+
align-items: center;
3409+
gap: 8px;
3410+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
3411+
transition: all 0.3s ease;
3412+
color: #1e40af;
3413+
font-weight: 500;
3414+
font-size: 14px;
3415+
}
3416+
3417+
.bg-switcher-toggle:hover {
3418+
background: rgba(30, 64, 175, 0.1);
3419+
border-color: rgba(30, 64, 175, 0.4);
3420+
transform: translateY(-2px);
3421+
box-shadow: 0 6px 25px rgba(30, 64, 175, 0.2);
3422+
}
3423+
3424+
.bg-switcher-toggle i {
3425+
font-size: 16px;
3426+
}
3427+
3428+
.bg-switcher-panel {
3429+
position: absolute;
3430+
right: 0;
3431+
bottom: calc(100% + 10px);
3432+
background: rgba(255, 255, 255, 0.98);
3433+
backdrop-filter: blur(15px);
3434+
border: 1px solid rgba(30, 64, 175, 0.2);
3435+
border-radius: 16px;
3436+
padding: 20px;
3437+
min-width: 280px;
3438+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
3439+
opacity: 0;
3440+
visibility: hidden;
3441+
transform: translateY(10px) scale(0.95);
3442+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
3443+
}
3444+
3445+
.bg-switcher-panel.active {
3446+
opacity: 1;
3447+
visibility: visible;
3448+
transform: translateY(0) scale(1);
3449+
}
3450+
3451+
.bg-switcher-title {
3452+
font-size: 16px;
3453+
font-weight: 600;
3454+
color: #1e40af;
3455+
margin-bottom: 16px;
3456+
text-align: center;
3457+
}
3458+
3459+
.bg-switcher-themes {
3460+
display: grid;
3461+
grid-template-columns: repeat(2, 1fr);
3462+
gap: 12px;
3463+
}
3464+
3465+
.bg-theme-option {
3466+
display: flex;
3467+
flex-direction: column;
3468+
align-items: center;
3469+
padding: 12px;
3470+
border-radius: 12px;
3471+
cursor: pointer;
3472+
transition: all 0.3s ease;
3473+
border: 2px solid transparent;
3474+
background: rgba(248, 250, 252, 0.8);
3475+
}
3476+
3477+
.bg-theme-option:hover {
3478+
background: rgba(30, 64, 175, 0.05);
3479+
border-color: rgba(30, 64, 175, 0.2);
3480+
transform: translateY(-2px);
3481+
}
3482+
3483+
.bg-theme-option.active {
3484+
background: rgba(30, 64, 175, 0.1);
3485+
border-color: #1e40af;
3486+
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.2);
3487+
}
3488+
3489+
.bg-theme-preview {
3490+
width: 40px;
3491+
height: 40px;
3492+
border-radius: 50%;
3493+
margin-bottom: 8px;
3494+
border: 2px solid rgba(255, 255, 255, 0.8);
3495+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
3496+
}
3497+
3498+
.bg-theme-icon {
3499+
font-size: 16px;
3500+
margin-bottom: 4px;
3501+
}
3502+
3503+
.bg-theme-name {
3504+
font-size: 12px;
3505+
font-weight: 500;
3506+
color: #374151;
3507+
text-align: center;
3508+
}
3509+
3510+
/* 响应式设计 */
3511+
@media (max-width: 768px) {
3512+
.bg-switcher {
3513+
right: 15px;
3514+
}
3515+
3516+
.bg-switcher-toggle {
3517+
padding: 10px 12px;
3518+
font-size: 12px;
3519+
}
3520+
3521+
.bg-switcher-toggle span {
3522+
display: none;
3523+
}
3524+
3525+
.bg-switcher-panel {
3526+
min-width: 240px;
3527+
padding: 16px;
3528+
}
3529+
3530+
.bg-switcher-themes {
3531+
grid-template-columns: repeat(3, 1fr);
3532+
gap: 8px;
3533+
}
3534+
3535+
.bg-theme-option {
3536+
padding: 8px;
3537+
}
3538+
3539+
.bg-theme-preview {
3540+
width: 30px;
3541+
height: 30px;
3542+
}
3543+
3544+
.bg-theme-icon {
3545+
font-size: 14px;
3546+
}
3547+
3548+
.bg-theme-name {
3549+
font-size: 10px;
3550+
}
3551+
}
3552+
3553+
/* 深色模式适配 */
3554+
body.dark-mode .bg-switcher-toggle {
3555+
background: rgba(31, 41, 55, 0.95);
3556+
color: #60a5fa;
3557+
border-color: rgba(96, 165, 250, 0.3);
3558+
}
3559+
3560+
body.dark-mode .bg-switcher-toggle:hover {
3561+
background: rgba(96, 165, 250, 0.1);
3562+
border-color: rgba(96, 165, 250, 0.5);
3563+
}
3564+
3565+
body.dark-mode .bg-switcher-panel {
3566+
background: rgba(31, 41, 55, 0.98);
3567+
border-color: rgba(96, 165, 250, 0.3);
3568+
}
3569+
3570+
body.dark-mode .bg-switcher-title {
3571+
color: #60a5fa;
3572+
}
3573+
3574+
body.dark-mode .bg-theme-option {
3575+
background: rgba(55, 65, 81, 0.8);
3576+
}
3577+
3578+
body.dark-mode .bg-theme-option:hover {
3579+
background: rgba(96, 165, 250, 0.1);
3580+
border-color: rgba(96, 165, 250, 0.3);
3581+
}
3582+
3583+
body.dark-mode .bg-theme-option.active {
3584+
background: rgba(96, 165, 250, 0.2);
3585+
border-color: #60a5fa;
3586+
}
3587+
3588+
body.dark-mode .bg-theme-name {
3589+
color: #d1d5db;
3590+
}

‎js/background-switcher.js‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
/**
2+
* 背景切换器组件
3+
* 支持多种背景主题的动态切换
4+
*/
5+
class BackgroundSwitcher {
6+
constructor() {
7+
this.themes = {
8+
'default': {
9+
name: '默认',
10+
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
11+
icon: '🌟'
12+
},
13+
'ocean': {
14+
name: '海洋',
15+
background: 'linear-gradient(135deg, #667db6 0%, #0082c8 25%, #0082c8 75%, #667db6 100%)',
16+
icon: '🌊'
17+
},
18+
'sunset': {
19+
name: '日落',
20+
background: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%)',
21+
icon: '🌅'
22+
},
23+
'forest': {
24+
name: '森林',
25+
background: 'linear-gradient(135deg, #134e5e 0%, #71b280 100%)',
26+
icon: '🌲'
27+
},
28+
'galaxy': {
29+
name: '星空',
30+
background: 'linear-gradient(135deg, #2c3e50 0%, #4a6741 25%, #2c3e50 50%, #4a6741 75%, #2c3e50 100%)',
31+
icon: '🌌'
32+
},
33+
'aurora': {
34+
name: '极光',
35+
background: 'linear-gradient(135deg, #00c6ff 0%, #0072ff 100%)',
36+
icon: '🌈'
37+
}
38+
};
39+
40+
this.currentTheme = localStorage.getItem('bg-theme') || 'default';
41+
this.init();
42+
}
43+
44+
init() {
45+
this.createSwitcher();
46+
this.applyTheme(this.currentTheme);
47+
this.bindEvents();
48+
}
49+
50+
createSwitcher() {
51+
// 创建背景切换器容器
52+
const switcher = document.createElement('div');
53+
switcher.className = 'bg-switcher';
54+
switcher.innerHTML = `
55+
<div class="bg-switcher-toggle">
56+
<i class="fa fa-palette"></i>
57+
<span>背景</span>
58+
</div>
59+
<div class="bg-switcher-panel">
60+
<div class="bg-switcher-title">选择背景主题</div>
61+
<div class="bg-switcher-themes">
62+
${Object.entries(this.themes).map(([key, theme]) => `
63+
<div class="bg-theme-option" data-theme="${key}" title="${theme.name}">
64+
<div class="bg-theme-preview" style="background: ${theme.background}"></div>
65+
<span class="bg-theme-icon">${theme.icon}</span>
66+
<span class="bg-theme-name">${theme.name}</span>
67+
</div>
68+
`).join('')}
69+
</div>
70+
</div>
71+
`;
72+
73+
document.body.appendChild(switcher);
74+
}
75+
76+
bindEvents() {
77+
const toggle = document.querySelector('.bg-switcher-toggle');
78+
const panel = document.querySelector('.bg-switcher-panel');
79+
const options = document.querySelectorAll('.bg-theme-option');
80+
81+
// 切换面板显示/隐藏
82+
toggle.addEventListener('click', () => {
83+
panel.classList.toggle('active');
84+
});
85+
86+
// 点击外部关闭面板
87+
document.addEventListener('click', (e) => {
88+
if (!e.target.closest('.bg-switcher')) {
89+
panel.classList.remove('active');
90+
}
91+
});
92+
93+
// 主题选择
94+
options.forEach(option => {
95+
option.addEventListener('click', () => {
96+
const theme = option.dataset.theme;
97+
this.switchTheme(theme);
98+
panel.classList.remove('active');
99+
});
100+
});
101+
}
102+
103+
switchTheme(themeKey) {
104+
if (this.themes[themeKey]) {
105+
this.currentTheme = themeKey;
106+
this.applyTheme(themeKey);
107+
localStorage.setItem('bg-theme', themeKey);
108+
109+
// 更新选中状态
110+
document.querySelectorAll('.bg-theme-option').forEach(option => {
111+
option.classList.remove('active');
112+
});
113+
document.querySelector(`[data-theme="${themeKey}"]`).classList.add('active');
114+
}
115+
}
116+
117+
applyTheme(themeKey) {
118+
const theme = this.themes[themeKey];
119+
if (theme) {
120+
// 应用到body背景
121+
document.body.style.background = theme.background;
122+
document.body.style.backgroundAttachment = 'fixed';
123+
124+
// 应用到intro-header背景
125+
const introHeader = document.querySelector('.intro-header');
126+
if (introHeader) {
127+
introHeader.style.background = theme.background;
128+
}
129+
130+
// 更新选中状态
131+
setTimeout(() => {
132+
document.querySelectorAll('.bg-theme-option').forEach(option => {
133+
option.classList.remove('active');
134+
});
135+
const activeOption = document.querySelector(`[data-theme="${themeKey}"]`);
136+
if (activeOption) {
137+
activeOption.classList.add('active');
138+
}
139+
}, 100);
140+
}
141+
}
142+
}
143+
144+
// 页面加载完成后初始化背景切换器
145+
document.addEventListener('DOMContentLoaded', () => {
146+
new BackgroundSwitcher();
147+
});

0 commit comments

Comments
 (0)