Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(about): 优化白天模式配色和博客文章获取逻辑

Browse Source 
- 引入专门的白天模式文字颜色变量，提升可维护性
- 统一白天模式下各模块文字颜色引用，增强视觉一致性
- 博客文章数据获取改为优先从 RSS 源读取，失败后回退至本地 JSON 文件
- 解析 RSS 数据并缓存，提高页面加载性能
- 更新博客链接地址，指向新的 RSS 接口地址
- 优化技术标签云初始化及滚动动画逻辑
- 微调夜间模式自动切换时间为凌晨 1 点后生效
- 调整微信公众号弹窗样式与容错提示信息
- 修复部分组件在白天模式下的文字颜色显示问题
This commit is contained in:
hehh
2025-11-20 23:20:52 +08:00
parent 0d113b5936
commit 49159e830b
4 changed files with 365 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
about.html
View File

@@ -178,7 +178,7 @@
<div class="section-header"> <div class="section-header">
<h2 class="section-title">最新文章</h2> <h2 class="section-title">最新文章</h2>
<p class="section-subtitle">思考的足迹</p> <p class="section-subtitle">思考的足迹</p>
<a href="#" class="view-all-link" target="_blank"> <a href="https://blog.hehouhui.cn" class="view-all-link" target="_blank">
查看全部 <i class="iconfont icon-arrow-right"></i> 查看全部 <i class="iconfont icon-arrow-right"></i>
</a> </a>
</div> </div>

135
css/about.css
View File

@@ -21,13 +21,17 @@
--accent-b: #4ECDC4; --accent-b: #4ECDC4;
--accent-coral: #FF6B6B; --accent-coral: #FF6B6B;
--accent-lavender: #7B7AE6; --accent-lavender: #7B7AE6;
/* 白天模式专用文字颜色 */
--day-text-primary: #212529;
--day-text-secondary: #495057;
--day-text-tertiary: #6C757D;
} }
:root.theme-day { :root.theme-day {
--grad-a: #F8F9FA; /* 更淡雅的白天模式背景色 */ --grad-a: #F8F9FA; /* 更淡雅的白天模式背景色 */
--grad-b: #E9ECEF; /* 更淡雅的白天模式背景色 */ --grad-b: #E9ECEF; /* 更淡雅的白天模式背景色 */
--text-strong: #212529; --text-strong: var(--day-text-primary);
--text-soft: #495057; --text-soft: var(--day-text-secondary);
--glass-alpha: 0.25; /* 增加毛玻璃效果 */ --glass-alpha: 0.25; /* 增加毛玻璃效果 */
--glass-border: rgba(0, 0, 0, 0.08); --glass-border: rgba(0, 0, 0, 0.08);
} }
@@ -43,18 +47,18 @@
.theme-day .nav-logo { .theme-day .nav-logo {
color: var(--text-strong); color: var(--day-text-primary);
} }
.theme-day .nav-links a { .theme-day .nav-links a {
color: var(--text-soft); color: var(--day-text-secondary);
} }
.theme-day .hero-title, .theme-day .hero-title,
.theme-day .section-title, .theme-day .section-title,
.theme-day .project-title, .theme-day .project-title,
.theme-day .article-title { .theme-day .article-title {
color: var(--text-strong); color: var(--day-text-primary);
} }
.theme-day .hero-subtitle, .theme-day .hero-subtitle,
@@ -65,11 +69,11 @@
.theme-day .section-subtitle, .theme-day .section-subtitle,
.theme-day .location-info, .theme-day .location-info,
.theme-day .stat-label { .theme-day .stat-label {
color: var(--text-soft); color: var(--day-text-secondary);
} }
.theme-day .cloud-tag { .theme-day .cloud-tag {
color: var(--text-strong); color: var(--day-text-primary);
border-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
} }
@@ -84,42 +88,121 @@
.theme-day .trait, .theme-day .trait,
.theme-day .profile-info h1, .theme-day .profile-info h1,
.theme-day .social-info h3 { .theme-day .social-info h3 {
color: var(--text-strong); color: var(--day-text-primary);
} }
.theme-day .intro-quote p, .theme-day .intro-quote p,
.theme-day .mbti-traits, .theme-day .intro-text p,
.theme-day .profile-info p,
.theme-day .timeline-content p, .theme-day .timeline-content p,
.theme-day .project-description, .theme-day .project-description,
.theme-day .article-excerpt, .theme-day .article-excerpt,
.theme-day .article-meta, .theme-day .article-meta,
.theme-day .social-info p, .theme-day .social-info p,
.theme-day .contact-title p, .theme-day .github-bio {
.theme-day .philosophy-text, color: var(--day-text-secondary);
.theme-day .footer-info {
color: var(--text-soft);
} }
.theme-day .stat-number { .theme-day .stat-number {
color: var(--text-strong); color: var(--day-text-primary);
} }
.theme-day .project-stat, .theme-day .project-stat,
.theme-day .project-stats span { .theme-day .project-stats span {
color: var(--text-soft); color: var(--day-text-secondary);
} }
.theme-day .article-meta { .theme-day .article-meta {
color: var(--text-soft); color: var(--day-text-secondary);
}
.theme-day .timeline-content h3 {
color: var(--text-strong);
} }
.theme-day .view-all-link { .theme-day .view-all-link {
color: var(--text-strong); color: var(--day-text-primary);
}
.theme-day .timeline-content h3 {
color: var(--day-text-primary);
}
/* 为特定模块设置专门的颜色 */
/* 英雄区域白天模式文字颜色 */
.theme-day .hero-section .hero-title {
color: var(--day-text-primary);
}
.theme-day .hero-section .hero-subtitle {
color: var(--day-text-secondary);
}
.theme-day .hero-section .location-info {
color: var(--day-text-tertiary);
}
/* 技术栈云图白天模式文字颜色 */
.theme-day .tech-cloud-section .section-title {
color: var(--day-text-primary);
}
.theme-day .tech-cloud-section .section-subtitle {
color: var(--day-text-secondary);
}
/* 个性时间线白天模式文字颜色 */
.theme-day .personality-timeline-section .section-title {
color: var(--day-text-primary);
}
.theme-day .personality-timeline-section .section-subtitle {
color: var(--day-text-secondary);
}
/* 开源项目展示白天模式文字颜色 */
.theme-day .github-showcase-section .section-title {
color: var(--day-text-primary);
}
.theme-day .github-showcase-section .section-subtitle {
color: var(--day-text-secondary);
}
/* 博客瀑布流白天模式文字颜色 */
.theme-day .blog-waterfall-section .section-title {
color: var(--day-text-primary);
}
.theme-day .blog-waterfall-section .section-subtitle {
color: var(--day-text-secondary);
}
/* 联系方式区域白天模式文字颜色 */
.theme-day .contact-floating-section .contact-title h2 {
color: var(--day-text-primary);
}
.theme-day .contact-floating-section .contact-title p {
color: var(--day-text-secondary);
}
/* 评论系统区域白天模式文字颜色 */
.theme-day .comments-section .section-title {
color: var(--day-text-primary);
}
.theme-day .comments-section .section-subtitle {
color: var(--day-text-secondary);
}
/* 页脚白天模式文字颜色 */
.theme-day .footer-info {
color: var(--day-text-secondary);
}
.theme-day .footer-info a {
color: var(--day-text-secondary);
}
.theme-day .footer-info a:hover {
color: var(--day-text-primary);
} }
.theme-night .nav-logo { .theme-night .nav-logo {
@@ -300,7 +383,7 @@ a:hover {
.intro-quote p { .intro-quote p {
margin: 0; margin: 0;
font-style: italic; font-style: italic;
color: var(--text-strong); /* 使用主题文字颜色 */ /*color: var(--text-strong); !* 使用主题文字颜色 *!*/
line-height: 1.7; line-height: 1.7;
font-size: 1.1rem; font-size: 1.1rem;
} }
@@ -777,7 +860,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.mbti-name { .mbti-name {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
color: var(--text-strong); /* 使用主题文字颜色 */ color: #3498db;
} }
.mbti-traits { .mbti-traits {
@@ -792,7 +875,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
border-radius: 20px; border-radius: 20px;
font-size: 0.9rem; font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-strong); /* 使用主题文字颜色 */ color: #667eea;
} }
@@ -1220,7 +1303,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
/* 白天模式下的标签样式 */ /* 白天模式下的标签样式 */
.theme-day .cloud-tag { .theme-day .cloud-tag {
color: var(--text-strong); color: var(--day-text-primary);
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
border-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.15);
} }

443
js/about.js
View File

@@ -1,5 +1,6 @@
// 关于页面JavaScript功能 - 现代动态版本
// 关于页面JavaScript功能 - 现代动态版本
$(document).ready(function() { $(document).ready(function() {
initThemeByTime(); initThemeByTime();
initMotionController(); initMotionController();
@@ -287,18 +288,88 @@ function initBlogArticles() {
return; return;
} }
// 清除过期缓存并重新获取 // 清除过期缓存
localStorage.removeItem(cacheKey); localStorage.removeItem(cacheKey);
localStorage.removeItem(cacheTimeKey); localStorage.removeItem(cacheTimeKey);
fetch('data/articles.json') // 先尝试从RSS源获取数据
.then(function(res) { return res.json(); }) fetch(rssUrl)
.then(function(json) { .then(function(response) {
localStorage.setItem(cacheKey, JSON.stringify(json)); if (!response.ok) {
localStorage.setItem(cacheTimeKey, now.toString()); throw new Error('RSS fetch failed');
displayBlogArticles(json); }
return response.text();
}) })
.catch(function() { displayBlogArticles([]); }); .then(function(xmlText) {
// 解析XML响应
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlText, "application/xml");
// 检查解析是否成功
if (xmlDoc.documentElement.nodeName === "parsererror") {
throw new Error('RSS XML parse error');
}
// 提取文章信息
var articles = [];
var items = xmlDoc.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var item = items[i];
// 安全地获取元素文本内容
var titleElement = item.querySelector("title");
var title = titleElement ? (titleElement.textContent || titleElement.innerText || "无标题") : "无标题";
var linkElement = item.querySelector("link");
var link = linkElement ? (linkElement.textContent || linkElement.innerText || "#") : "#";
// 对于 guid 作为链接的备选方案
if (link === "#" || link === "") {
var guidElement = item.querySelector("guid");
link = guidElement ? (guidElement.textContent || guidElement.innerText || "#") : "#";
}
var descriptionElement = item.querySelector("description");
var description = descriptionElement ? (descriptionElement.textContent || descriptionElement.innerText || "暂无描述") : "暂无描述";
var pubDateElement = item.querySelector("pubDate");
var pubDate = pubDateElement ? (pubDateElement.textContent || pubDateElement.innerText || new Date().toString()) : new Date().toString();
var categoryElement = item.querySelector("category");
var category = categoryElement ? (categoryElement.textContent || categoryElement.innerText || "技术") : "技术";
// 创建文章对象
articles.push({
title: title,
link: link,
excerpt: description.substring(0, 150),
pubDate: pubDate,
category: category
});
}
// 缓存数据
localStorage.setItem(cacheKey, JSON.stringify(articles));
localStorage.setItem(cacheTimeKey, now.toString());
// 显示文章
displayBlogArticles(articles);
})
.catch(function(error) {
console.log('RSS fetch failed:', error);
// 如果RSS源失败，回退到JSON文件
fetch('data/articles.json')
.then(function(res) { return res.json(); })
.then(function(json) {
localStorage.setItem(cacheKey, JSON.stringify(json));
localStorage.setItem(cacheTimeKey, now.toString());
displayBlogArticles(json);
})
.catch(function() {
// 如果JSON文件也失败，显示空列表
displayBlogArticles([]);
});
});
} }
function displayBlogArticles(articles) { function displayBlogArticles(articles) {
@@ -410,25 +481,25 @@ function initTechCloud() {
function initHorizontalTechCloud(items) { function initHorizontalTechCloud(items) {
var container = document.getElementById('tech-cloud-wrapper'); var container = document.getElementById('tech-cloud-wrapper');
if (!container) return; if (!container) return;
// 清空容器 // 清空容器
container.innerHTML = ''; container.innerHTML = '';
container.classList.remove('sphere'); container.classList.remove('sphere');
// 按权重排序，确保重要的标签优先显示 // 按权重排序，确保重要的标签优先显示
var sortedItems = items.slice().sort(function(a, b) { var sortedItems = items.slice().sort(function(a, b) {
return b.weight - a.weight; return b.weight - a.weight;
}); });
// 创建三行容器 // 创建三行容器
var row1 = document.createElement('div'); var row1 = document.createElement('div');
var row2 = document.createElement('div'); var row2 = document.createElement('div');
var row3 = document.createElement('div'); var row3 = document.createElement('div');
row1.className = 'tech-row'; row1.className = 'tech-row';
row2.className = 'tech-row'; row2.className = 'tech-row';
row3.className = 'tech-row'; row3.className = 'tech-row';
// 将标签分配到三行中 // 将标签分配到三行中
sortedItems.forEach(function(item, index) { sortedItems.forEach(function(item, index) {
var el = document.createElement('span'); var el = document.createElement('span');
@@ -436,7 +507,7 @@ function initHorizontalTechCloud(items) {
el.textContent = item.name; el.textContent = item.name;
el.setAttribute('data-category', item.category); el.setAttribute('data-category', item.category);
el.setAttribute('data-weight', item.weight); el.setAttribute('data-weight', item.weight);
// 根据索引分配到不同行 // 根据索引分配到不同行
if (index % 3 === 0) { if (index % 3 === 0) {
row1.appendChild(el); row1.appendChild(el);
@@ -445,7 +516,7 @@ function initHorizontalTechCloud(items) {
} else { } else {
row3.appendChild(el); row3.appendChild(el);
} }
// 为每个标签复制一个副本，实现无缝滚动效果 // 为每个标签复制一个副本，实现无缝滚动效果
var elClone = el.cloneNode(true); var elClone = el.cloneNode(true);
if (index % 3 === 0) { if (index % 3 === 0) {
@@ -456,20 +527,20 @@ function initHorizontalTechCloud(items) {
row3.appendChild(elClone); row3.appendChild(elClone);
} }
}); });
container.appendChild(row1); container.appendChild(row1);
container.appendChild(row2); container.appendChild(row2);
container.appendChild(row3); container.appendChild(row3);
// 设置不同的初始延迟时间 // 设置不同的初始延迟时间
setTimeout(function() { setTimeout(function() {
row1.classList.add('scrolling'); row1.classList.add('scrolling');
}, 0); }, 0);
setTimeout(function() { setTimeout(function() {
row2.classList.add('scrolling'); row2.classList.add('scrolling');
}, 500); }, 500);
setTimeout(function() { setTimeout(function() {
row3.classList.add('scrolling'); row3.classList.add('scrolling');
}, 1000); }, 1000);
@@ -479,11 +550,11 @@ function initHorizontalTechCloud(items) {
function initTechSphere(items) { function initTechSphere(items) {
var container = document.getElementById('tech-cloud-wrapper'); var container = document.getElementById('tech-cloud-wrapper');
if (!container) return; if (!container) return;
// 清空容器并添加球体类 // 清空容器并添加球体类
container.innerHTML = ''; container.innerHTML = '';
container.classList.add('sphere'); container.classList.add('sphere');
// 创建标签元素 // 创建标签元素
var tags = []; var tags = [];
items.forEach(function(item, index) { items.forEach(function(item, index) {
@@ -496,7 +567,7 @@ function initTechSphere(items) {
container.appendChild(el); container.appendChild(el);
tags.push(el); tags.push(el);
}); });
// 球体参数 // 球体参数
var radius = 250; // 减小球体半径以适应容器并避免标签被遮挡 var radius = 250; // 减小球体半径以适应容器并避免标签被遮挡
var dtr = Math.PI / 180; var dtr = Math.PI / 180;
@@ -511,25 +582,25 @@ function initTechSphere(items) {
var mouseX = 0; var mouseX = 0;
var mouseY = 0; var mouseY = 0;
var mouseDown = false; var mouseDown = false;
// 初始化标签位置 // 初始化标签位置
tags.forEach(function(tag, i) { tags.forEach(function(tag, i) {
var phi = Math.acos(-1 + (2 * i) / tags.length); var phi = Math.acos(-1 + (2 * i) / tags.length);
var theta = Math.sqrt(tags.length * Math.PI) * phi; var theta = Math.sqrt(tags.length * Math.PI) * phi;
var x = radius * Math.cos(theta) * Math.sin(phi); var x = radius * Math.cos(theta) * Math.sin(phi);
var y = radius * Math.sin(theta) * Math.sin(phi); var y = radius * Math.sin(theta) * Math.sin(phi);
var z = radius * Math.cos(phi); var z = radius * Math.cos(phi);
tag.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)'; tag.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)';
tag.style.opacity = '0.9'; tag.style.opacity = '0.9';
// 根据权重设置标签大小和最小宽度 // 根据权重设置标签大小和最小宽度
var weight = parseInt(tag.getAttribute('data-weight')); var weight = parseInt(tag.getAttribute('data-weight'));
var scale = 0.6 + (weight * 0.12); var scale = 0.6 + (weight * 0.12);
// 按照规范设置标签尺寸 // 按照规范设置标签尺寸
var minWidth, minHeight, fontSize, padding; var minWidth, minHeight, fontSize, padding;
switch(weight) { switch(weight) {
case 5: case 5:
minWidth = 120; minWidth = 120;
@@ -562,16 +633,16 @@ function initTechSphere(items) {
fontSize = 12; fontSize = 12;
padding = '8px 15px'; padding = '8px 15px';
} }
tag.style.transform += ' scale(' + scale + ')'; tag.style.transform += ' scale(' + scale + ')';
tag.style.minWidth = minWidth + 'px'; tag.style.minWidth = minWidth + 'px';
tag.style.minHeight = minHeight + 'px'; tag.style.minHeight = minHeight + 'px';
tag.style.fontSize = fontSize + 'px'; tag.style.fontSize = fontSize + 'px';
tag.style.padding = padding; tag.style.padding = padding;
// 设置z-index确保正确的层级显示 // 设置z-index确保正确的层级显示
tag.style.zIndex = Math.floor(z + radius); tag.style.zIndex = Math.floor(z + radius);
// 存储位置信息 // 存储位置信息
mcList.push({ mcList.push({
obj: tag, obj: tag,
@@ -580,7 +651,7 @@ function initTechSphere(items) {
z: z z: z
}); });
}); });
// 鼠标交互 // 鼠标交互
container.addEventListener('mousedown', function(e) { container.addEventListener('mousedown', function(e) {
mouseDown = true; mouseDown = true;
@@ -588,7 +659,7 @@ function initTechSphere(items) {
mouseY = e.clientY; mouseY = e.clientY;
e.preventDefault(); e.preventDefault();
}); });
container.addEventListener('mousemove', function(e) { container.addEventListener('mousemove', function(e) {
if (mouseDown) { if (mouseDown) {
lasta = (e.clientX - mouseX) * 0.0005; // 降低鼠标影响系数 lasta = (e.clientX - mouseX) * 0.0005; // 降低鼠标影响系数
@@ -598,16 +669,16 @@ function initTechSphere(items) {
e.preventDefault(); e.preventDefault();
} }
}); });
container.addEventListener('mouseup', function(e) { container.addEventListener('mouseup', function(e) {
mouseDown = false; mouseDown = false;
e.preventDefault(); e.preventDefault();
}); });
container.addEventListener('mouseleave', function() { container.addEventListener('mouseleave', function() {
mouseDown = false; mouseDown = false;
}); });
// 触摸交互 // 触摸交互
container.addEventListener('touchstart', function(e) { container.addEventListener('touchstart', function(e) {
if (e.touches.length > 0) { if (e.touches.length > 0) {
@@ -617,7 +688,7 @@ function initTechSphere(items) {
e.preventDefault(); e.preventDefault();
} }
}); });
container.addEventListener('touchmove', function(e) { container.addEventListener('touchmove', function(e) {
if (mouseDown && e.touches.length > 0) { if (mouseDown && e.touches.length > 0) {
lasta = (e.touches[0].clientX - mouseX) * 0.0005; // 降低触摸影响系数 lasta = (e.touches[0].clientX - mouseX) * 0.0005; // 降低触摸影响系数
@@ -627,12 +698,12 @@ function initTechSphere(items) {
e.preventDefault(); e.preventDefault();
} }
}); });
container.addEventListener('touchend', function(e) { container.addEventListener('touchend', function(e) {
mouseDown = false; mouseDown = false;
e.preventDefault(); e.preventDefault();
}); });
// 自动旋转动画 // 自动旋转动画
function update() { function update() {
// 添加轻微的自动旋转，即使没有用户交互 // 添加轻微的自动旋转，即使没有用户交互
@@ -640,14 +711,14 @@ function initTechSphere(items) {
lasta = lasta * 0.98 + 0.0001; // 更轻微的自动旋转，逐渐减速 lasta = lasta * 0.98 + 0.0001; // 更轻微的自动旋转，逐渐减速
lastb = lastb * 0.98; lastb = lastb * 0.98;
} }
// 限制旋转速度，防止过快 // 限制旋转速度，防止过快
lasta = Math.max(Math.min(lasta, 0.01), -0.01); // 限制在更小的范围内 lasta = Math.max(Math.min(lasta, 0.01), -0.01); // 限制在更小的范围内
lastb = Math.max(Math.min(lastb, 0.01), -0.01); lastb = Math.max(Math.min(lastb, 0.01), -0.01);
var a = lasta; var a = lasta;
var b = lastb; var b = lastb;
var c = 0; var c = 0;
var sa = Math.sin(a); var sa = Math.sin(a);
var ca = Math.cos(a); var ca = Math.cos(a);
@@ -655,39 +726,39 @@ function initTechSphere(items) {
var cb = Math.cos(b); var cb = Math.cos(b);
var sc = Math.sin(c); var sc = Math.sin(c);
var cc = Math.cos(c); var cc = Math.cos(c);
// 更新标签位置 // 更新标签位置
mcList.forEach(function(mc) { mcList.forEach(function(mc) {
var rx = mc.x; var rx = mc.x;
var ry = mc.y * ca + mc.z * sa; var ry = mc.y * ca + mc.z * sa;
var rz = mc.y * -sa + mc.z * ca; var rz = mc.y * -sa + mc.z * ca;
var nx = rx * cb + rz * sb; var nx = rx * cb + rz * sb;
var ny = ry; var ny = ry;
var nz = rx * -sb + rz * cb; var nz = rx * -sb + rz * cb;
mc.x = nx; mc.x = nx;
mc.y = ny; mc.y = ny;
mc.z = nz; mc.z = nz;
// 应用变换 // 应用变换
mc.obj.style.transform = 'translate3d(' + nx + 'px, ' + ny + 'px, ' + nz + 'px)'; mc.obj.style.transform = 'translate3d(' + nx + 'px, ' + ny + 'px, ' + nz + 'px)';
// 根据z轴位置设置缩放和透明度 // 根据z轴位置设置缩放和透明度
var scale = (nz + radius) / (2 * radius) * 0.6 + 0.7; var scale = (nz + radius) / (2 * radius) * 0.6 + 0.7;
var weight = parseInt(mc.obj.getAttribute('data-weight')); var weight = parseInt(mc.obj.getAttribute('data-weight'));
scale = scale * (0.6 + (weight * 0.12)); scale = scale * (0.6 + (weight * 0.12));
mc.obj.style.transform += ' scale(' + scale + ')'; mc.obj.style.transform += ' scale(' + scale + ')';
mc.obj.style.opacity = 0.7 + (nz + radius) / (2 * radius) * 0.3; mc.obj.style.opacity = 0.7 + (nz + radius) / (2 * radius) * 0.3;
// 设置z-index确保正确的层级显示 // 设置z-index确保正确的层级显示
mc.obj.style.zIndex = Math.floor(nz + radius); mc.obj.style.zIndex = Math.floor(nz + radius);
}); });
requestAnimationFrame(update); requestAnimationFrame(update);
} }
// 启动动画 // 启动动画
requestAnimationFrame(update); requestAnimationFrame(update);
} }
@@ -699,21 +770,21 @@ function initScrollEffects() {
$(window).scroll(function() { $(window).scroll(function() {
var scrollTop = $(this).scrollTop(); var scrollTop = $(this).scrollTop();
var navbar = $('.navbar'); var navbar = $('.navbar');
// 添加滚动样式 // 添加滚动样式
if (scrollTop > 50) { if (scrollTop > 50) {
navbar.addClass('scrolled'); navbar.addClass('scrolled');
} else { } else {
navbar.removeClass('scrolled'); navbar.removeClass('scrolled');
} }
// 隐藏/显示导航栏 // 隐藏/显示导航栏
if (scrollTop > lastScrollTop && scrollTop > 100) { if (scrollTop > lastScrollTop && scrollTop > 100) {
navbar.css('transform', 'translateY(-100%)'); navbar.css('transform', 'translateY(-100%)');
} else { } else {
navbar.css('transform', 'translateY(0)'); navbar.css('transform', 'translateY(0)');
} }
lastScrollTop = scrollTop; lastScrollTop = scrollTop;
}); });
} }
@@ -803,97 +874,97 @@ function initPageAnimations() {
// 添加GitHub统计的CSS样式 // 添加GitHub统计的CSS样式
var githubStyles = '<style>' + var githubStyles = '<style>' +
'.github-profile {' + '.github-profile {' +
' display: flex;' + ' display: flex;' +
' align-items: center;' + ' align-items: center;' +
' gap: 1rem;' + ' gap: 1rem;' +
'}' + '}' +
'.github-avatar img {' + '.github-avatar img {' +
' width: 80px;' + ' width: 80px;' +
' height: 80px;' + ' height: 80px;' +
' border-radius: 50%;' + ' border-radius: 50%;' +
' object-fit: cover;' + ' object-fit: cover;' +
'}' + '}' +
'.github-info h3 {' + '.github-info h3 {' +
' margin: 0 0 0.5rem 0;' + ' margin: 0 0 0.5rem 0;' +
' color: #fff;' + ' color: #fff;' +
'}' + '}' +
'.github-bio {' + '.github-bio {' +
' color: rgba(255, 255, 255, 0.8);' + ' color: rgba(255, 255, 255, 0.8);' +
' margin-bottom: 1rem;' + ' margin-bottom: 1rem;' +
' font-size: 0.9rem;' + ' font-size: 0.9rem;' +
'}' + '}' +
'.github-stats-row {' + '.github-stats-row {' +
' display: flex;' + ' display: flex;' +
' gap: 1rem;' + ' gap: 1rem;' +
'}' + '}' +
'.stat-item {' + '.stat-item {' +
' text-align: center;' + ' text-align: center;' +
'}' + '}' +
'.stat-item .stat-number {' + '.stat-item .stat-number {' +
' display: block;' + ' display: block;' +
' font-size: 1.2rem;' + ' font-size: 1.2rem;' +
' font-weight: 600;' + ' font-weight: 600;' +
' color: #fff;' + ' color: #fff;' +
'}' + '}' +
'.stat-item .stat-label {' + '.stat-item .stat-label {' +
' font-size: 0.8rem;' + ' font-size: 0.8rem;' +
' color: rgba(255, 255, 255, 0.8);' + ' color: rgba(255, 255, 255, 0.8);' +
'}' + '}' +
'.commits-stats h3 {' + '.commits-stats h3 {' +
' margin-bottom: 1rem;' + ' margin-bottom: 1rem;' +
' color: #fff;' + ' color: #fff;' +
'}' + '}' +
'.commit-item {' + '.commit-item {' +
' display: flex;' + ' display: flex;' +
' align-items: center;' + ' align-items: center;' +
' gap: 1rem;' + ' gap: 1rem;' +
' margin-bottom: 0.8rem;' + ' margin-bottom: 0.8rem;' +
'}' + '}' +
'.commit-date {' + '.commit-date {' +
' width: 60px;' + ' width: 60px;' +
' font-size: 0.9rem;' + ' font-size: 0.9rem;' +
' color: rgba(255, 255, 255, 0.8);' + ' color: rgba(255, 255, 255, 0.8);' +
'}' + '}' +
'.commit-bar {' + '.commit-bar {' +
' flex: 1;' + ' flex: 1;' +
' height: 8px;' + ' height: 8px;' +
' background: rgba(255, 255, 255, 0.1);' + ' background: rgba(255, 255, 255, 0.1);' +
' border-radius: 4px;' + ' border-radius: 4px;' +
' overflow: hidden;' + ' overflow: hidden;' +
'}' + '}' +
'.commit-fill {' + '.commit-fill {' +
' height: 100%;' + ' height: 100%;' +
' background: linear-gradient(135deg, #667eea, #764ba2);' + ' background: linear-gradient(135deg, #667eea, #764ba2);' +
' border-radius: 4px;' + ' border-radius: 4px;' +
' transition: width 0.3s ease;' + ' transition: width 0.3s ease;' +
'}' + '}' +
'.commit-count {' + '.commit-count {' +
' width: 40px;' + ' width: 40px;' +
' text-align: right;' + ' text-align: right;' +
' font-size: 0.9rem;' + ' font-size: 0.9rem;' +
' font-weight: 600;' + ' font-weight: 600;' +
' color: #fff;' + ' color: #fff;' +
'}' + '}' +
'.error {' + '.error {' +
' text-align: center;' + ' text-align: center;' +
' color: rgba(255, 255, 255, 0.5);' + ' color: rgba(255, 255, 255, 0.5);' +
' font-style: italic;' + ' font-style: italic;' +
' padding: 2rem;' + ' padding: 2rem;' +
'}' + '}' +
'.project-updated {' + '.project-updated {' +
' margin-top: 1rem;' + ' margin-top: 1rem;' +
' font-size: 0.8rem;' + ' font-size: 0.8rem;' +
' color: rgba(255, 255, 255, 0.8);' + ' color: rgba(255, 255, 255, 0.8);' +
'}' + '}' +
'.article-category {' + '.article-category {' +
' background: rgba(102, 126, 234, 0.2);' + ' background: rgba(102, 126, 234, 0.2);' +
' color: #fff;' + ' color: #fff;' +
' padding: 0.2rem 0.6rem;' + ' padding: 0.2rem 0.6rem;' +
' border-radius: 12px;' + ' border-radius: 12px;' +
' font-size: 0.8rem;' + ' font-size: 0.8rem;' +
'}' + '}' +
'</style>'; '</style>';
// 添加样式到页面 // 添加样式到页面
$('head').append(githubStyles); $('head').append(githubStyles);
@@ -915,14 +986,14 @@ function initWeChatModal() {
e.preventDefault(); e.preventDefault();
showWeChatModal(); showWeChatModal();
}); });
// 关闭弹窗事件 // 关闭弹窗事件
$(document).on('click', '.modal .close, .modal', function(e) { $(document).on('click', '.modal .close, .modal', function(e) {
if (e.target === this) { if (e.target === this) {
hideWeChatModal(); hideWeChatModal();
} }
}); });
// ESC键关闭弹窗 // ESC键关闭弹窗
$(document).on('keydown', function(e) { $(document).on('keydown', function(e) {
if (e.keyCode === 27) { // ESC键 if (e.keyCode === 27) { // ESC键
@@ -934,21 +1005,21 @@ function initWeChatModal() {
function showWeChatModal() { function showWeChatModal() {
var modalHtml = '<div id="wechatModal" class="modal" style="display: none;">' + var modalHtml = '<div id="wechatModal" class="modal" style="display: none;">' +
'<div class="modal-content">' + '<div class="modal-content">' +
'<span class="close">&times;</span>' + '<span class="close">&times;</span>' +
'<h3>微信公众号</h3>' + '<h3>微信公众号</h3>' +
'<div class="qr-code">' + '<div class="qr-code">' +
'<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="微信公众号二维码" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'block\';">' + '<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="微信公众号二维码" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'block\';">' +
'<div style="display: none; padding: 2rem; text-align: center; color: rgba(255, 255, 255, 0.8);">二维码加载失败<br>请搜索公众号：技术分享小站</div>' + '<div style="display: none; padding: 2rem; text-align: center; color: rgba(255, 255, 255, 0.8);">二维码加载失败<br>请搜索公众号：技术分享小站</div>' +
'</div>' +
'<p style="margin-top: 1rem; color: rgba(255, 255, 255, 0.8); text-align: center;">扫码关注获取最新技术文章</p>' +
'</div>' + '</div>' +
'</div>'; '<p style="margin-top: 1rem; color: rgba(255, 255, 255, 0.8); text-align: center;">扫码关注获取最新技术文章</p>' +
'</div>' +
'</div>';
// 如果弹窗不存在则创建 // 如果弹窗不存在则创建
if ($('#wechatModal').length === 0) { if ($('#wechatModal').length === 0) {
$('body').append(modalHtml); $('body').append(modalHtml);
} }
$('#wechatModal').fadeIn(300); $('#wechatModal').fadeIn(300);
} }
@@ -980,27 +1051,21 @@ function hideWechatQR() {
function initThemeByTime() { function initThemeByTime() {
var hour = new Date().getHours(); var hour = new Date().getHours();
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var night = hour >= 18 || prefersDark; var night = hour >= 25 ;
var root = document.documentElement; var root = document.documentElement;
root.classList.toggle('theme-night', night); root.classList.toggle('theme-night', night);
root.classList.toggle('theme-day', !night); root.classList.toggle('theme-day', !night);
// 确保在主题切换时技术标签颜色正确更新 // 确保在主题切换时技术标签颜色正确更新
updateTechTagColors(); updateTechTagColors();
} }
// 更新技术标签颜色以适配当前主题 // 更新技术标签颜色以适配当前主题
function updateTechTagColors() { function updateTechTagColors() {
var root = document.documentElement;
var isDayTheme = root.classList.contains('theme-day');
var tags = document.querySelectorAll('.cloud-tag'); var tags = document.querySelectorAll('.cloud-tag');
tags.forEach(function(tag) { tags.forEach(function(tag) {
if (isDayTheme) {
tag.style.color = 'var(--text-strong)'; tag.style.color = 'var(--text-strong)';
} else {
tag.style.color = '#fff';
}
}); });
} }
@@ -1066,28 +1131,28 @@ function renderCommitStats(stats) {
var commitsHtml = '<div class="commits-stats">'+ var commitsHtml = '<div class="commits-stats">'+
'<h3>提交统计</h3>'+ '<h3>提交统计</h3>'+
'<div class="commits-chart">'+ '<div class="commits-chart">'+
'<div class="commit-item">'+ '<div class="commit-item">'+
'<span class="commit-date">本周</span>'+ '<span class="commit-date">本周</span>'+
'<div class="commit-bar">'+ '<div class="commit-bar">'+
'<div class="commit-fill" style="width: '+pct(w)+'%"></div>'+ '<div class="commit-fill" style="width: '+pct(w)+'%"></div>'+
'</div>'+
'<span class="commit-count">'+w+'</span>'+
'</div>'+
'<div class="commit-item">'+
'<span class="commit-date">本月</span>'+
'<div class="commit-bar">'+
'<div class="commit-fill" style="width: '+pct(m)+'%"></div>'+
'</div>'+
'<span class="commit-count">'+m+'</span>'+
'</div>'+
'<div class="commit-item">'+
'<span class="commit-date">今年</span>'+
'<div class="commit-bar">'+
'<div class="commit-fill" style="width: 100%"></div>'+
'</div>'+
'<span class="commit-count">'+y+'</span>'+
'</div>'+
'</div>'+ '</div>'+
'</div>'; '<span class="commit-count">'+w+'</span>'+
'</div>'+
'<div class="commit-item">'+
'<span class="commit-date">本月</span>'+
'<div class="commit-bar">'+
'<div class="commit-fill" style="width: '+pct(m)+'%"></div>'+
'</div>'+
'<span class="commit-count">'+m+'</span>'+
'</div>'+
'<div class="commit-item">'+
'<span class="commit-date">今年</span>'+
'<div class="commit-bar">'+
'<div class="commit-fill" style="width: 100%"></div>'+
'</div>'+
'<span class="commit-count">'+y+'</span>'+
'</div>'+
'</div>'+
'</div>';
$('#github-commits').html(commitsHtml); $('#github-commits').html(commitsHtml);
} }

2
js/config.js
View File

@@ -55,7 +55,7 @@ const SiteConfig = {
}, },
blog: { blog: {
rssUrl: 'https://blog.hehouhui.cn/rss/feed.xml', rssUrl: 'https://blog.hehouhui.cn/api/rss',
cache: { cache: {
key: 'blog_articles_cache', key: 'blog_articles_cache',
timeKey: 'blog_articles_cache_time', timeKey: 'blog_articles_cache_time',