feat(about): 优化夜间模式视觉效果和可访问性
- 提高玻璃态背景和文本的不透明度以增强可读性 - 调整夜间模式下评论区域的颜色和边框可见性 - 为功能按钮和链接添加tabindex属性提升键盘导航 - 增加多语言和SEO相关的meta标签及canonical链接 - 优化Artalk评论系统的主题切换逻辑和UI增强 - 更新移动端悬浮按钮和社交链接的无障碍标签
This commit is contained in:
hehh
43
about.html
43
about.html
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN" data-lang="zh">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||||
@@ -10,6 +10,7 @@
|
|||||||
<!--SEO信息 -->
|
<!--SEO信息 -->
|
||||||
<meta name="description" content="关于Honesty,关于HeHouHui,关于HeHui,关于明厚, About Me Honesty, About Me HeHouHui, About Me HeHui">
|
<meta name="description" content="关于Honesty,关于HeHouHui,关于HeHui,关于明厚, About Me Honesty, About Me HeHouHui, About Me HeHui">
|
||||||
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
|
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
|
||||||
|
<link rel="canonical" href="https://www.hehouhui.cn/about.html">
|
||||||
<meta name="author" content="Honesty">
|
<meta name="author" content="Honesty">
|
||||||
|
|
||||||
<!-- 社交平台分享优化 -->
|
<!-- 社交平台分享优化 -->
|
||||||
@@ -20,6 +21,7 @@
|
|||||||
<meta property="og:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
<meta property="og:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
||||||
<meta property="og:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
<meta property="og:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||||||
<meta property="og:site_name" content="Honesty的个人主页">
|
<meta property="og:site_name" content="Honesty的个人主页">
|
||||||
|
<meta property="og:locale" content="zh_CN">
|
||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<meta property="twitter:card" content="summary_large_image">
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
@@ -28,6 +30,9 @@
|
|||||||
<meta property="twitter:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
<meta property="twitter:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
||||||
<meta property="twitter:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
<meta property="twitter:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||||||
<meta property="twitter:site" content="@Honesty861024">
|
<meta property="twitter:site" content="@Honesty861024">
|
||||||
|
<link rel="alternate" hreflang="zh-cn" href="https://www.hehouhui.cn/about.html">
|
||||||
|
<link rel="alternate" hreflang="en" href="https://www.hehouhui.cn/about.html?lang=en">
|
||||||
|
<link rel="alternate" hreflang="x-default" href="https://www.hehouhui.cn/about.html">
|
||||||
|
|
||||||
<!-- 微信小程序/朋友圈分享 -->
|
<!-- 微信小程序/朋友圈分享 -->
|
||||||
<meta property="wechat:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
<meta property="wechat:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||||||
@@ -84,11 +89,11 @@
|
|||||||
<div class="nav-divider"></div>
|
<div class="nav-divider"></div>
|
||||||
|
|
||||||
<!-- 功能按钮 -->
|
<!-- 功能按钮 -->
|
||||||
<button id="lang-btn" class="action-btn" aria-label="Switch Language">
|
<button id="lang-btn" class="action-btn" aria-label="Switch Language" tabindex="0">
|
||||||
<i class="ri-translate-2"></i>
|
<i class="ri-translate-2"></i>
|
||||||
<span class="btn-text">CN/EN</span>
|
<span class="btn-text">CN/EN</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="theme-btn" class="action-btn" aria-label="Toggle Theme">
|
<button id="theme-btn" class="action-btn" aria-label="Toggle Theme" tabindex="0">
|
||||||
<i class="ri-sun-line icon-sun"></i>
|
<i class="ri-sun-line icon-sun"></i>
|
||||||
<i class="ri-moon-line icon-moon"></i>
|
<i class="ri-moon-line icon-moon"></i>
|
||||||
</button>
|
</button>
|
||||||
@@ -117,12 +122,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 6个社交链接 (PC端显示) -->
|
<!-- 6个社交链接 (PC端显示) -->
|
||||||
<div class="social-dock desktop-social">
|
<div class="social-dock desktop-social">
|
||||||
<a href="https://github.com/listener-He" target="_blank" class="s-icon"><i class="ri-github-fill"></i></a>
|
<a href="https://github.com/listener-He" target="_blank" class="s-icon" aria-label="GitHub profile" tabindex="0"><i class="ri-github-fill"></i></a>
|
||||||
<a href="mailto:hehouhui@foxmail.com" class="s-icon"><i class="ri-mail-send-fill"></i></a>
|
<a href="mailto:hehouhui@foxmail.com" class="s-icon" aria-label="Email contact" tabindex="0"><i class="ri-mail-send-fill"></i></a>
|
||||||
<a href="https://twitter.com/Honesty861024" target="_blank" class="s-icon"><i class="ri-twitter-line"></i></a>
|
<a href="https://twitter.com/Honesty861024" target="_blank" class="s-icon" aria-label="Twitter profile" tabindex="0"><i class="ri-twitter-line"></i></a>
|
||||||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" target="_blank" class="s-icon"><i class="ri-zhihu-line"></i></a>
|
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" target="_blank" class="s-icon" aria-label="Zhihu profile" tabindex="0"><i class="ri-zhihu-line"></i></a>
|
||||||
<a href="javascript:void(0);" onclick="toggleWechat()" class="s-icon"><i class="ri-wechat-fill"></i></a>
|
<a href="javascript:void(0);" onclick="toggleWechat()" class="s-icon" aria-label="WeChat QR code" tabindex="0"><i class="ri-wechat-fill"></i></a>
|
||||||
<a href="https://juejin.cn/user/3659591622878503" target="_blank" class="s-icon"><i class="ri-code-box-line"></i></a>
|
<a href="https://juejin.cn/user/3659591622878503" target="_blank" class="s-icon" aria-label="Juejin profile" tabindex="0"><i class="ri-code-box-line"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -235,12 +240,12 @@
|
|||||||
|
|
||||||
<!-- 移动端显示的社交栏 (6个链接) -->
|
<!-- 移动端显示的社交栏 (6个链接) -->
|
||||||
<div class="bento-card area-social-mobile mobile-social">
|
<div class="bento-card area-social-mobile mobile-social">
|
||||||
<a href="https://github.com/listener-He" class="ms-btn"><i class="ri-github-fill"></i></a>
|
<a href="https://github.com/listener-He" class="ms-btn" aria-label="GitHub profile" tabindex="0"><i class="ri-github-fill"></i></a>
|
||||||
<a href="mailto:hehouhui@foxmail.com" class="ms-btn"><i class="ri-mail-send-fill"></i></a>
|
<a href="mailto:hehouhui@foxmail.com" class="ms-btn" aria-label="Email contact" tabindex="0"><i class="ri-mail-send-fill"></i></a>
|
||||||
<a href="https://twitter.com/Honesty861024" class="ms-btn"><i class="ri-twitter-line"></i></a>
|
<a href="https://twitter.com/Honesty861024" class="ms-btn" aria-label="Twitter profile" tabindex="0"><i class="ri-twitter-line"></i></a>
|
||||||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" class="ms-btn"><i class="ri-zhihu-line"></i></a>
|
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" class="ms-btn" aria-label="Zhihu profile" tabindex="0"><i class="ri-zhihu-line"></i></a>
|
||||||
<a href="javascript:void(0);" onclick="toggleWechat()" class="ms-btn"><i class="ri-wechat-fill"></i></a>
|
<a href="javascript:void(0);" onclick="toggleWechat()" class="ms-btn" aria-label="WeChat QR code" tabindex="0"><i class="ri-wechat-fill"></i></a>
|
||||||
<a href="https://juejin.cn/user/3659591622878503" class="ms-btn"><i class="ri-code-box-line"></i></a>
|
<a href="https://juejin.cn/user/3659591622878503" class="ms-btn" aria-label="Juejin profile" tabindex="0"><i class="ri-code-box-line"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -289,11 +294,11 @@
|
|||||||
|
|
||||||
<!-- 移动端悬浮功能按钮 -->
|
<!-- 移动端悬浮功能按钮 -->
|
||||||
<div class="mobile-fab">
|
<div class="mobile-fab">
|
||||||
<button id="fab-main" class="fab-main" aria-label="Actions"><i class="ri-magic-line"></i><span class="fab-label">Tools</span></button>
|
<button id="fab-main" class="fab-main" aria-label="Actions" tabindex="0"><i class="ri-magic-line"></i><span class="fab-label">Tools</span></button>
|
||||||
<div class="fab-menu" id="fab-menu">
|
<div class="fab-menu" id="fab-menu">
|
||||||
<button id="fab-lang" class="fab-item"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button>
|
<button id="fab-lang" class="fab-item" tabindex="0"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button>
|
||||||
<button id="fab-theme" class="fab-item"><i class="ri-moon-line"></i><span class="fab-text">Theme</span></button>
|
<button id="fab-theme" class="fab-item" tabindex="0"><i class="ri-moon-line"></i><span class="fab-text">Theme</span></button>
|
||||||
<button id="fab-music" class="fab-item"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
|
<button id="fab-music" class="fab-item" tabindex="0"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T_compressed.mp3" loop preload="none"></audio>
|
<audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T_compressed.mp3" loop preload="none"></audio>
|
||||||
|
|||||||
@@ -49,18 +49,18 @@
|
|||||||
--bg-grad-1: #2d3436;
|
--bg-grad-1: #2d3436;
|
||||||
--bg-grad-2: #000000;
|
--bg-grad-2: #000000;
|
||||||
|
|
||||||
--glass-bg: rgba(30, 30, 35, 0.55);
|
--glass-bg: rgba(30, 30, 35, 0.85); /* 提高背景不透明度增强可读性 */
|
||||||
--glass-border: 1px solid rgba(255, 255, 255, 0.08);
|
--glass-border: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
--glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
|
--glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
|
||||||
|
|
||||||
--text-primary: #dfe6e9;
|
--text-primary: #ffffff; /* 使用更明亮的白色提高对比度 */
|
||||||
--text-secondary: #b2bec3;
|
--text-secondary: #e0e0e0; /* 提高二级文本亮度 */
|
||||||
--text-tertiary: #636e72;
|
--text-tertiary: #b0b0b0; /* 提高三级文本亮度 */
|
||||||
|
|
||||||
--accent: #00cec9;
|
--accent: #00cec9;
|
||||||
--accent-glow: rgba(0, 206, 201, 0.4);
|
--accent-glow: rgba(0, 206, 201, 0.4);
|
||||||
|
|
||||||
--dock-bg: rgba(30, 30, 35, 0.9);
|
--dock-bg: rgba(30, 30, 35, 0.95); /* 提高底层面板不透明度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Global Reset */
|
/* Global Reset */
|
||||||
@@ -143,8 +143,9 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .neon-font {
|
[data-theme="night"] .neon-font {
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
text-shadow: 0 0 10px var(--accent);
|
text-shadow: 0 0 15px var(--accent), 0 0 25px var(--accent);
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="day"] .icon-sun {
|
[data-theme="day"] .icon-sun {
|
||||||
@@ -1821,8 +1822,8 @@ body {
|
|||||||
|
|
||||||
/* 黑夜模式样式增强 */
|
/* 黑夜模式样式增强 */
|
||||||
[data-theme="night"] .area-stats {
|
[data-theme="night"] .area-stats {
|
||||||
background: rgba(30, 30, 35, 0.55);
|
background: rgba(30, 30, 35, 0.85); /* 提高统计区域背景不透明度 */
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1832,11 +1833,11 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .stat-item {
|
[data-theme="night"] .stat-item {
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.15); /* 提高统计项目背景不透明度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .stat-item:hover {
|
[data-theme="night"] .stat-item:hover {
|
||||||
background: rgba(108, 92, 231, 0.2);
|
background: rgba(108, 92, 231, 0.3); /* 提高悬停时的背景不透明度 */
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -622,9 +622,9 @@
|
|||||||
|
|
||||||
/* PC端黑夜模式下的输入框颜色和列表样式修正 - 全面优化版 */
|
/* PC端黑夜模式下的输入框颜色和列表样式修正 - 全面优化版 */
|
||||||
[data-theme="night"] .atk-editor-textarea {
|
[data-theme="night"] .atk-editor-textarea {
|
||||||
background: rgba(30, 30, 35, 0.9) !important;
|
background: rgba(30, 30, 35, 0.95) !important; /* 提高背景不透明度增强可读性 */
|
||||||
color: #e2e8f0 !important;
|
color: #ffffff !important; /* 使用更亮的文字颜色 */
|
||||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 增强边框可见性 */
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -634,14 +634,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .atk-comment-wrap {
|
[data-theme="night"] .atk-comment-wrap {
|
||||||
background: rgba(30, 30, 35, 0.85) !important;
|
background: rgba(30, 30, 35, 0.95) !important; /* 提高背景不透明度增强可读性 */
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .atk-comment-wrap:hover {
|
[data-theme="night"] .atk-comment-wrap:hover {
|
||||||
background: rgba(40, 40, 45, 0.9) !important;
|
background: rgba(40, 40, 45, 0.98) !important; /* 进一步提高背景不透明度 */
|
||||||
border: 1px solid rgba(0, 206, 201, 0.3) !important;
|
border: 1px solid rgba(0, 206, 201, 0.5) !important; /* 增强边框可见性 */
|
||||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -701,7 +701,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .atk-comment .atk-content {
|
[data-theme="night"] .atk-comment .atk-content {
|
||||||
color: #e2e8f0 !important;
|
color: #ffffff !important; /* 使用更亮的文字颜色提高可读性 */
|
||||||
line-height: 1.6 !important;
|
line-height: 1.6 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
28
js/about.js
28
js/about.js
@@ -569,7 +569,8 @@ class UIManager {
|
|||||||
locale: isZh ? 'zh-CN' : 'en',
|
locale: isZh ? 'zh-CN' : 'en',
|
||||||
// 自定义占位符（支持多语言）
|
// 自定义占位符（支持多语言）
|
||||||
placeholder: isZh ? '说点什么吧...支持 Markdown 语法，可 @用户、发送表情' : 'Leave a comment... Supports Markdown, @mentions, and Send 😊',
|
placeholder: isZh ? '说点什么吧...支持 Markdown 语法，可 @用户、发送表情' : 'Leave a comment... Supports Markdown, @mentions, and Send 😊',
|
||||||
|
// 无评论时显示
|
||||||
|
noComment: isZh ? '快来成为第一个评论的人吧~' : 'Be the first to leave a comment~😍',
|
||||||
// 发送按钮文字（多语言）
|
// 发送按钮文字（多语言）
|
||||||
sendBtn: isZh ? '发送' : 'Send',
|
sendBtn: isZh ? '发送' : 'Send',
|
||||||
loginBtn: isZh ? '发送' : 'Send',
|
loginBtn: isZh ? '发送' : 'Send',
|
||||||
@@ -582,11 +583,7 @@ class UIManager {
|
|||||||
// 启用 Markdown
|
// 启用 Markdown
|
||||||
markdown: true,
|
markdown: true,
|
||||||
|
|
||||||
// 表情面板
|
emoticons: "https://emoticons.hzchu.top/json/artalk/zaoandandandeyouyongquan.json",
|
||||||
emoji: {
|
|
||||||
// 使用默认表情包
|
|
||||||
preset: 'twemoji'
|
|
||||||
},
|
|
||||||
|
|
||||||
// 启用 @ 用户提醒功能
|
// 启用 @ 用户提醒功能
|
||||||
mention: true,
|
mention: true,
|
||||||
@@ -649,8 +646,8 @@ class UIManager {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
Artalk.init(artalkConfig);
|
let artalkRef = Artalk.init(artalkConfig);
|
||||||
this.enhanceArtalkUI();
|
this.enhanceArtalkUI(artalkRef);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("Artalk Error", e);
|
console.error("Artalk Error", e);
|
||||||
const msg = isZh ? '当前评论区已关闭' : 'Comments are closed';
|
const msg = isZh ? '当前评论区已关闭' : 'Comments are closed';
|
||||||
@@ -684,7 +681,7 @@ class UIManager {
|
|||||||
this.initArtalk();
|
this.initArtalk();
|
||||||
}
|
}
|
||||||
|
|
||||||
enhanceArtalkUI() {
|
enhanceArtalkUI(artalkRef) {
|
||||||
const container = document.getElementById('artalk-container');
|
const container = document.getElementById('artalk-container');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
@@ -709,11 +706,24 @@ class UIManager {
|
|||||||
const newTheme = document.documentElement.getAttribute('data-theme');
|
const newTheme = document.documentElement.getAttribute('data-theme');
|
||||||
const newLang = document.documentElement.getAttribute('data-lang');
|
const newLang = document.documentElement.getAttribute('data-lang');
|
||||||
console.log('Theme/Language changed:', newTheme, newLang);
|
console.log('Theme/Language changed:', newTheme, newLang);
|
||||||
|
if (newLang && newLang !== lang) {
|
||||||
// 延迟执行
|
// 延迟执行
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// 重新加载整个评论组件
|
// 重新加载整个评论组件
|
||||||
this.reloadArtalk();
|
this.reloadArtalk();
|
||||||
}, 300);
|
}, 300);
|
||||||
|
} else if (newTheme && newTheme !== currentTheme) {
|
||||||
|
try {
|
||||||
|
artalkRef.ui.setDarkMode(newTheme === 'night')
|
||||||
|
} catch (e) {
|
||||||
|
setTimeout(() => {
|
||||||
|
// 重新加载整个评论组件
|
||||||
|
this.reloadArtalk();
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
themeObserver.observe(document.documentElement, {
|
themeObserver.observe(document.documentElement, {
|
||||||
|
|||||||
Reference in New Issue
Block a user