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

- 引入专门的白天模式文字颜色变量，提升可维护性 - 统一白天模式下各模块文字颜色引用，增强视觉一致性 - 博客文章数据获取改为优先从 RSS 源读取，失败后回退至本地 JSON 文件 - 解析 RSS 数据并缓存，提高页面加载性能 - 更新博客链接地址，指向新的 RSS 接口地址 - 优化技术标签云初始化及滚动动画逻辑 - 微调夜间模式自动切换时间为凌晨 1 点后生效 - 调整微信公众号弹窗样式与容错提示信息 - 修复部分组件在白天模式下的文字颜色显示问题
2025-11-20 23:20:52 +08:00
parent 0d113b5936
commit 49159e830b
4 changed files with 365 additions and 217 deletions
--- a/about.html
+++ b/about.html
@@ -178,7 +178,7 @@
                <div class="section-header">
                    <h2 class="section-title">最新文章</h2>
                    <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>
                    </a>
                </div>
--- 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);
 }
--- 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) {
@@ -803,97 +874,97 @@ function initPageAnimations() {

 // 添加GitHub统计的CSS样式
 var githubStyles = '<style>' +
- '.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;' +
- '}' +
- '</style>';
+    '.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;' +
+    '}' +
+    '</style>';

 // 添加样式到页面
 $('head').append(githubStyles);
@@ -934,15 +1005,15 @@ function initWeChatModal() {
 function showWeChatModal() {
    var modalHtml = '<div id="wechatModal" class="modal" style="display: none;">' +
        '<div class="modal-content">' +
-            '<span class="close">&times;</span>' +
-            '<h3>微信公众号</h3>' +
-            '<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\';">' +
-                '<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>' +
+        '<span class="close">&times;</span>' +
+        '<h3>微信公众号</h3>' +
+        '<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\';">' +
+        '<div style="display: none; padding: 2rem; text-align: center; color: rgba(255, 255, 255, 0.8);">二维码加载失败<br>请搜索公众号：技术分享小站</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) {
@@ -980,7 +1051,7 @@ 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);
@@ -991,16 +1062,10 @@ function initThemeByTime() {

 // 更新技术标签颜色以适配当前主题
 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 = '<div class="commits-stats">'+
        '<h3>提交统计</h3>'+
        '<div class="commits-chart">'+
-            '<div class="commit-item">'+
-                '<span class="commit-date">本周</span>'+
-                '<div class="commit-bar">'+
-                    '<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 class="commit-item">'+
+        '<span class="commit-date">本周</span>'+
+        '<div class="commit-bar">'+
+        '<div class="commit-fill" style="width: '+pct(w)+'%"></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);
 }
--- 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',