From 49159e830b04db376ebfdbc4ae10df6895e11381 Mon Sep 17 00:00:00 2001 From: hehh Date: Thu, 20 Nov 2025 23:20:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(about):=20=E4=BC=98=E5=8C=96=E7=99=BD?= =?UTF-8?q?=E5=A4=A9=E6=A8=A1=E5=BC=8F=E9=85=8D=E8=89=B2=E5=92=8C=E5=8D=9A?= =?UTF-8?q?=E5=AE=A2=E6=96=87=E7=AB=A0=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 引入专门的白天模式文字颜色变量，提升可维护性 - 统一白天模式下各模块文字颜色引用，增强视觉一致性 - 博客文章数据获取改为优先从 RSS 源读取，失败后回退至本地 JSON 文件 - 解析 RSS 数据并缓存，提高页面加载性能 - 更新博客链接地址，指向新的 RSS 接口地址 - 优化技术标签云初始化及滚动动画逻辑 - 微调夜间模式自动切换时间为凌晨 1 点后生效 - 调整微信公众号弹窗样式与容错提示信息 - 修复部分组件在白天模式下的文字颜色显示问题 --- about.html | 2 +- css/about.css | 135 ++++++++++++--- js/about.js | 443 +++++++++++++++++++++++++++++--------------------- js/config.js | 2 +- 4 files changed, 365 insertions(+), 217 deletions(-) diff --git a/about.html b/about.html index 855206e..d7aa27d 100644 --- a/about.html +++ b/about.html @@ -178,7 +178,7 @@

最新文章

思考的足迹

- + 查看全部
diff --git a/css/about.css b/css/about.css index ed8b699..f709b45 100644 --- a/css/about.css +++ b/css/about.css @@ -21,13 +21,17 @@ --accent-b: #4ECDC4; --accent-coral: #FF6B6B; --accent-lavender: #7B7AE6; + /* 白天模式专用文字颜色 */ + --day-text-primary: #212529; + --day-text-secondary: #495057; + --day-text-tertiary: #6C757D; } :root.theme-day { --grad-a: #F8F9FA; /* 更淡雅的白天模式背景色 */ --grad-b: #E9ECEF; /* 更淡雅的白天模式背景色 */ - --text-strong: #212529; - --text-soft: #495057; + --text-strong: var(--day-text-primary); + --text-soft: var(--day-text-secondary); --glass-alpha: 0.25; /* 增加毛玻璃效果 */ --glass-border: rgba(0, 0, 0, 0.08); } @@ -43,18 +47,18 @@ .theme-day .nav-logo { - color: var(--text-strong); + color: var(--day-text-primary); } .theme-day .nav-links a { - color: var(--text-soft); + color: var(--day-text-secondary); } .theme-day .hero-title, .theme-day .section-title, .theme-day .project-title, .theme-day .article-title { - color: var(--text-strong); + color: var(--day-text-primary); } .theme-day .hero-subtitle, @@ -65,11 +69,11 @@ .theme-day .section-subtitle, .theme-day .location-info, .theme-day .stat-label { - color: var(--text-soft); + color: var(--day-text-secondary); } .theme-day .cloud-tag { - color: var(--text-strong); + color: var(--day-text-primary); border-color: rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.4); } @@ -84,42 +88,121 @@ .theme-day .trait, .theme-day .profile-info h1, .theme-day .social-info h3 { - color: var(--text-strong); + color: var(--day-text-primary); } .theme-day .intro-quote p, -.theme-day .mbti-traits, -.theme-day .profile-info p, +.theme-day .intro-text p, .theme-day .timeline-content p, .theme-day .project-description, .theme-day .article-excerpt, .theme-day .article-meta, .theme-day .social-info p, -.theme-day .contact-title p, -.theme-day .philosophy-text, -.theme-day .footer-info { - color: var(--text-soft); +.theme-day .github-bio { + color: var(--day-text-secondary); } .theme-day .stat-number { - color: var(--text-strong); + color: var(--day-text-primary); } .theme-day .project-stat, .theme-day .project-stats span { - color: var(--text-soft); + color: var(--day-text-secondary); } .theme-day .article-meta { - color: var(--text-soft); -} - -.theme-day .timeline-content h3 { - color: var(--text-strong); + color: var(--day-text-secondary); } .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 { @@ -300,7 +383,7 @@ a:hover { .intro-quote p { margin: 0; font-style: italic; - color: var(--text-strong); /* 使用主题文字颜色 */ + /*color: var(--text-strong); !* 使用主题文字颜色 *!*/ line-height: 1.7; 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 { font-size: 1.2rem; font-weight: 600; - color: var(--text-strong); /* 使用主题文字颜色 */ + color: #3498db; } .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; font-size: 0.9rem; 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 { - color: var(--text-strong); + color: var(--day-text-primary); background: rgba(255, 255, 255, 0.4); border-color: rgba(0, 0, 0, 0.15); } diff --git a/js/about.js b/js/about.js index 68447d7..fc96143 100644 --- a/js/about.js +++ b/js/about.js @@ -1,5 +1,6 @@ -// 关于页面JavaScript功能 - 现代动态版本 + +// 关于页面JavaScript功能 - 现代动态版本 $(document).ready(function() { initThemeByTime(); initMotionController(); @@ -287,18 +288,88 @@ function initBlogArticles() { return; } - // 清除过期缓存并重新获取 + // 清除过期缓存 localStorage.removeItem(cacheKey); localStorage.removeItem(cacheTimeKey); - 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); + // 先尝试从RSS源获取数据 + fetch(rssUrl) + .then(function(response) { + if (!response.ok) { + throw new Error('RSS fetch failed'); + } + 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) { @@ -410,25 +481,25 @@ function initTechCloud() { function initHorizontalTechCloud(items) { var container = document.getElementById('tech-cloud-wrapper'); if (!container) return; - + // 清空容器 container.innerHTML = ''; container.classList.remove('sphere'); - + // 按权重排序，确保重要的标签优先显示 var sortedItems = items.slice().sort(function(a, b) { return b.weight - a.weight; }); - + // 创建三行容器 var row1 = document.createElement('div'); var row2 = document.createElement('div'); var row3 = document.createElement('div'); - + row1.className = 'tech-row'; row2.className = 'tech-row'; row3.className = 'tech-row'; - + // 将标签分配到三行中 sortedItems.forEach(function(item, index) { var el = document.createElement('span'); @@ -436,7 +507,7 @@ function initHorizontalTechCloud(items) { el.textContent = item.name; el.setAttribute('data-category', item.category); el.setAttribute('data-weight', item.weight); - + // 根据索引分配到不同行 if (index % 3 === 0) { row1.appendChild(el); @@ -445,7 +516,7 @@ function initHorizontalTechCloud(items) { } else { row3.appendChild(el); } - + // 为每个标签复制一个副本，实现无缝滚动效果 var elClone = el.cloneNode(true); if (index % 3 === 0) { @@ -456,20 +527,20 @@ function initHorizontalTechCloud(items) { row3.appendChild(elClone); } }); - + container.appendChild(row1); container.appendChild(row2); container.appendChild(row3); - + // 设置不同的初始延迟时间 setTimeout(function() { row1.classList.add('scrolling'); }, 0); - + setTimeout(function() { row2.classList.add('scrolling'); }, 500); - + setTimeout(function() { row3.classList.add('scrolling'); }, 1000); @@ -479,11 +550,11 @@ function initHorizontalTechCloud(items) { function initTechSphere(items) { var container = document.getElementById('tech-cloud-wrapper'); if (!container) return; - + // 清空容器并添加球体类 container.innerHTML = ''; container.classList.add('sphere'); - + // 创建标签元素 var tags = []; items.forEach(function(item, index) { @@ -496,7 +567,7 @@ function initTechSphere(items) { container.appendChild(el); tags.push(el); }); - + // 球体参数 var radius = 250; // 减小球体半径以适应容器并避免标签被遮挡 var dtr = Math.PI / 180; @@ -511,25 +582,25 @@ function initTechSphere(items) { var mouseX = 0; var mouseY = 0; var mouseDown = false; - + // 初始化标签位置 tags.forEach(function(tag, i) { var phi = Math.acos(-1 + (2 * i) / tags.length); var theta = Math.sqrt(tags.length * Math.PI) * phi; - + var x = radius * Math.cos(theta) * Math.sin(phi); var y = radius * Math.sin(theta) * Math.sin(phi); var z = radius * Math.cos(phi); - + tag.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)'; tag.style.opacity = '0.9'; - + // 根据权重设置标签大小和最小宽度 var weight = parseInt(tag.getAttribute('data-weight')); var scale = 0.6 + (weight * 0.12); // 按照规范设置标签尺寸 var minWidth, minHeight, fontSize, padding; - + switch(weight) { case 5: minWidth = 120; @@ -562,16 +633,16 @@ function initTechSphere(items) { fontSize = 12; padding = '8px 15px'; } - + tag.style.transform += ' scale(' + scale + ')'; tag.style.minWidth = minWidth + 'px'; tag.style.minHeight = minHeight + 'px'; tag.style.fontSize = fontSize + 'px'; tag.style.padding = padding; - + // 设置z-index确保正确的层级显示 tag.style.zIndex = Math.floor(z + radius); - + // 存储位置信息 mcList.push({ obj: tag, @@ -580,7 +651,7 @@ function initTechSphere(items) { z: z }); }); - + // 鼠标交互 container.addEventListener('mousedown', function(e) { mouseDown = true; @@ -588,7 +659,7 @@ function initTechSphere(items) { mouseY = e.clientY; e.preventDefault(); }); - + container.addEventListener('mousemove', function(e) { if (mouseDown) { lasta = (e.clientX - mouseX) * 0.0005; // 降低鼠标影响系数 @@ -598,16 +669,16 @@ function initTechSphere(items) { e.preventDefault(); } }); - + container.addEventListener('mouseup', function(e) { mouseDown = false; e.preventDefault(); }); - + container.addEventListener('mouseleave', function() { mouseDown = false; }); - + // 触摸交互 container.addEventListener('touchstart', function(e) { if (e.touches.length > 0) { @@ -617,7 +688,7 @@ function initTechSphere(items) { e.preventDefault(); } }); - + container.addEventListener('touchmove', function(e) { if (mouseDown && e.touches.length > 0) { lasta = (e.touches[0].clientX - mouseX) * 0.0005; // 降低触摸影响系数 @@ -627,12 +698,12 @@ function initTechSphere(items) { e.preventDefault(); } }); - + container.addEventListener('touchend', function(e) { mouseDown = false; e.preventDefault(); }); - + // 自动旋转动画 function update() { // 添加轻微的自动旋转，即使没有用户交互 @@ -640,14 +711,14 @@ function initTechSphere(items) { lasta = lasta * 0.98 + 0.0001; // 更轻微的自动旋转，逐渐减速 lastb = lastb * 0.98; } - + // 限制旋转速度，防止过快 lasta = Math.max(Math.min(lasta, 0.01), -0.01); // 限制在更小的范围内 lastb = Math.max(Math.min(lastb, 0.01), -0.01); - + var a = lasta; var b = lastb; - + var c = 0; var sa = Math.sin(a); var ca = Math.cos(a); @@ -655,39 +726,39 @@ function initTechSphere(items) { var cb = Math.cos(b); var sc = Math.sin(c); var cc = Math.cos(c); - + // 更新标签位置 mcList.forEach(function(mc) { var rx = mc.x; var ry = mc.y * ca + mc.z * sa; var rz = mc.y * -sa + mc.z * ca; - + var nx = rx * cb + rz * sb; var ny = ry; var nz = rx * -sb + rz * cb; - + mc.x = nx; mc.y = ny; mc.z = nz; - + // 应用变换 mc.obj.style.transform = 'translate3d(' + nx + 'px, ' + ny + 'px, ' + nz + 'px)'; - + // 根据z轴位置设置缩放和透明度 var scale = (nz + radius) / (2 * radius) * 0.6 + 0.7; var weight = parseInt(mc.obj.getAttribute('data-weight')); scale = scale * (0.6 + (weight * 0.12)); - + mc.obj.style.transform += ' scale(' + scale + ')'; mc.obj.style.opacity = 0.7 + (nz + radius) / (2 * radius) * 0.3; - + // 设置z-index确保正确的层级显示 mc.obj.style.zIndex = Math.floor(nz + radius); }); - + requestAnimationFrame(update); } - + // 启动动画 requestAnimationFrame(update); } @@ -699,21 +770,21 @@ function initScrollEffects() { $(window).scroll(function() { var scrollTop = $(this).scrollTop(); var navbar = $('.navbar'); - + // 添加滚动样式 if (scrollTop > 50) { navbar.addClass('scrolled'); } else { navbar.removeClass('scrolled'); } - + // 隐藏/显示导航栏 if (scrollTop > lastScrollTop && scrollTop > 100) { navbar.css('transform', 'translateY(-100%)'); } else { navbar.css('transform', 'translateY(0)'); } - + lastScrollTop = scrollTop; }); } @@ -803,97 +874,97 @@ function initPageAnimations() { // 添加GitHub统计的CSS样式 var githubStyles = ''; + '.github-profile {' + + ' display: flex;' + + ' align-items: center;' + + ' gap: 1rem;' + + '}' + + '.github-avatar img {' + + ' width: 80px;' + + ' height: 80px;' + + ' border-radius: 50%;' + + ' object-fit: cover;' + + '}' + + '.github-info h3 {' + + ' margin: 0 0 0.5rem 0;' + + ' color: #fff;' + + '}' + + '.github-bio {' + + ' color: rgba(255, 255, 255, 0.8);' + + ' margin-bottom: 1rem;' + + ' font-size: 0.9rem;' + + '}' + + '.github-stats-row {' + + ' display: flex;' + + ' gap: 1rem;' + + '}' + + '.stat-item {' + + ' text-align: center;' + + '}' + + '.stat-item .stat-number {' + + ' display: block;' + + ' font-size: 1.2rem;' + + ' font-weight: 600;' + + ' color: #fff;' + + '}' + + '.stat-item .stat-label {' + + ' font-size: 0.8rem;' + + ' color: rgba(255, 255, 255, 0.8);' + + '}' + + '.commits-stats h3 {' + + ' margin-bottom: 1rem;' + + ' color: #fff;' + + '}' + + '.commit-item {' + + ' display: flex;' + + ' align-items: center;' + + ' gap: 1rem;' + + ' margin-bottom: 0.8rem;' + + '}' + + '.commit-date {' + + ' width: 60px;' + + ' font-size: 0.9rem;' + + ' color: rgba(255, 255, 255, 0.8);' + + '}' + + '.commit-bar {' + + ' flex: 1;' + + ' height: 8px;' + + ' background: rgba(255, 255, 255, 0.1);' + + ' border-radius: 4px;' + + ' overflow: hidden;' + + '}' + + '.commit-fill {' + + ' height: 100%;' + + ' background: linear-gradient(135deg, #667eea, #764ba2);' + + ' border-radius: 4px;' + + ' transition: width 0.3s ease;' + + '}' + + '.commit-count {' + + ' width: 40px;' + + ' text-align: right;' + + ' font-size: 0.9rem;' + + ' font-weight: 600;' + + ' color: #fff;' + + '}' + + '.error {' + + ' text-align: center;' + + ' color: rgba(255, 255, 255, 0.5);' + + ' font-style: italic;' + + ' padding: 2rem;' + + '}' + + '.project-updated {' + + ' margin-top: 1rem;' + + ' font-size: 0.8rem;' + + ' color: rgba(255, 255, 255, 0.8);' + + '}' + + '.article-category {' + + ' background: rgba(102, 126, 234, 0.2);' + + ' color: #fff;' + + ' padding: 0.2rem 0.6rem;' + + ' border-radius: 12px;' + + ' font-size: 0.8rem;' + + '}' + + ''; // 添加样式到页面 $('head').append(githubStyles); @@ -915,14 +986,14 @@ function initWeChatModal() { e.preventDefault(); showWeChatModal(); }); - + // 关闭弹窗事件 $(document).on('click', '.modal .close, .modal', function(e) { if (e.target === this) { hideWeChatModal(); } }); - + // ESC键关闭弹窗 $(document).on('keydown', function(e) { if (e.keyCode === 27) { // ESC键 @@ -934,21 +1005,21 @@ function initWeChatModal() { function showWeChatModal() { var modalHtml = '' + + ''; + // 如果弹窗不存在则创建 if ($('#wechatModal').length === 0) { $('body').append(modalHtml); } - + $('#wechatModal').fadeIn(300); } @@ -980,27 +1051,21 @@ function hideWechatQR() { function initThemeByTime() { var hour = new Date().getHours(); var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; - var night = hour >= 18 || prefersDark; + var night = hour >= 25 ; var root = document.documentElement; root.classList.toggle('theme-night', night); root.classList.toggle('theme-day', !night); - + // 确保在主题切换时技术标签颜色正确更新 updateTechTagColors(); } // 更新技术标签颜色以适配当前主题 function updateTechTagColors() { - var root = document.documentElement; - var isDayTheme = root.classList.contains('theme-day'); - + var tags = document.querySelectorAll('.cloud-tag'); tags.forEach(function(tag) { - if (isDayTheme) { tag.style.color = 'var(--text-strong)'; - } else { - tag.style.color = '#fff'; - } }); } @@ -1066,28 +1131,28 @@ function renderCommitStats(stats) { var commitsHtml = '
'+ '

提交统计

'+ '
'+ - '
'+ - '本周'+ - '
'+ - '
'+ - '
'+ - ''+w+''+ - '
'+ - '
'+ - '本月'+ - '
'+ - '
'+ - '
'+ - ''+m+''+ - '
'+ - '
'+ - '今年'+ - '
'+ - '
'+ - '
'+ - ''+y+''+ - '
'+ + '
'+ + '本周'+ + '
'+ + '
'+ '
'+ - '
'; + ''+w+''+ + '
'+ + '
'+ + '本月'+ + '
'+ + '
'+ + '
'+ + ''+m+''+ + '
'+ + '
'+ + '今年'+ + '
'+ + '
'+ + '
'+ + ''+y+''+ + '
'+ + '
'+ + ''; $('#github-commits').html(commitsHtml); -} +} \ No newline at end of file diff --git a/js/config.js b/js/config.js index 5b0d40b..a29caf7 100644 --- a/js/config.js +++ b/js/config.js @@ -55,7 +55,7 @@ const SiteConfig = { }, blog: { - rssUrl: 'https://blog.hehouhui.cn/rss/feed.xml', + rssUrl: 'https://blog.hehouhui.cn/api/rss', cache: { key: 'blog_articles_cache', timeKey: 'blog_articles_cache_time',