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

Compare commits

base: Honesty:version-2.3
Branches Tags
Honesty:main Honesty:version-2.3 Honesty:version-2.2-PWA
..
compare: Honesty:version-2.2-PWA
Branches Tags
Honesty:main Honesty:version-2.3 Honesty:version-2.2-PWA

2 Commits
version-2. ... version-2.

Author SHA1 Message Date
hehh
d19837edc2 feat(sw): 升级缓存版本并优化资源缓存策略 
- 更新缓存名称从 v1.0.1 到 v1.1.0
- 移除部分图片资源路径配置
- 安装阶段增加 skipWaiting 强制更新
- 优化 fetch 拦截逻辑，区分 HTML、音频、图片及静态资源处理
- 增加对带版本号请求的特殊处理
- 激活阶段主动声明客户端控制权
- 改进缓存匹配忽略查询参数提高命中率
- 增强错误捕获避免中断服务工作线程运行
 2025-11-25 20:05:26 +08:00
hehh
5c9e2c4186 style(about): 调整玻璃态模糊值和光斑模糊效果 
- 减小玻璃态背景的模糊半径从28px到18px
- 减少光斑元素的模糊值从80px到40px
- 优化标签云计算逻辑，使用缓存宽高避免重复查询
- 改进主题语言监听器，防止重复加载和竞态条件
- 修复标签定位计算，提高渲染性能
- 清理冗余代码和注释
 2025-11-25 19:27:25 +08:00
27 changed files with 3186 additions and 2746 deletions
Expand all files Collapse all files

5
README.md
View File

@@ -139,7 +139,7 @@ Home/
## 🚀 快速开始 ## 🚀 快速开始
```shell ``shell
# 克隆项目 # 克隆项目
git clone https://github.com/listener-He/Home.git git clone https://github.com/listener-He/Home.git
@@ -181,7 +181,7 @@ open about.html
- [x] 添加骨架屏加载效果 - [x] 添加骨架屏加载效果
- [x] 实现数据缓存机制，提升页面加载速度 - [x] 实现数据缓存机制，提升页面加载速度
- [x] 添加淡入动画效果，提升用户体验 - [x] 添加淡入动画效果，提升用户体验
- [x] 实现 PWA 支持，支持离线访问
### 待完成 ### 待完成
- [ ] 添加更多数据源（如 Twitter、知乎等） - [ ] 添加更多数据源（如 Twitter、知乎等）
@@ -193,7 +193,6 @@ open about.html
- [ ] 添加更多主题选项（如高对比度模式等） - [ ] 添加更多主题选项（如高对比度模式等）
- [ ] 实现深色模式下的图片优化处理 - [ ] 实现深色模式下的图片优化处理
- [ ] 添加无障碍访问支持（ARIA 属性完善） - [ ] 添加无障碍访问支持（ARIA 属性完善）
- [ ] 实现 PWA 支持，支持离线访问
## 🙏 鸣谢与致敬 ## 🙏 鸣谢与致敬

161
about.html
View File

@@ -1,18 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-lang="zh"> <html lang="zh-CN">
<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">
<title>关于我 - Honesty</title> <title>关于我 - Honesty</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- PWA相关配置 -->
<meta name="theme-color" content="#6c5ce7">
<link rel="manifest" href="./manifest.json">
<!--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">
<!-- 社交平台分享优化 --> <!-- 社交平台分享优化 -->
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website"> <meta property="og:type" content="website">
@@ -21,8 +22,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">
<meta property="twitter:url" content="https://www.hehouhui.cn/about.html"> <meta property="twitter:url" content="https://www.hehouhui.cn/about.html">
@@ -30,25 +30,23 @@
<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">
<meta property="wechat:title" content="关于我 - Honesty的个人主页"> <meta property="wechat:title" content="关于我 - Honesty的个人主页">
<meta property="wechat:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。"> <meta property="wechat:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。">
<!-- 核心资源：使用 BootCDN 加速 --> <!-- 核心资源：使用 BootCDN 加速 -->
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css?version=20251125">
<link rel="stylesheet" href="css/about.css?version=20251125"> <link rel="stylesheet" href="css/about.css?version=20251125">
<!-- Artalk 评论样式 --> <!-- Artalk 评论样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.css"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.css">
<link rel="stylesheet" href="css/artalk.css?version=20251125"> <link rel="stylesheet" href="css/artalk.css?version=20251125">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" href="./images/logo.png"> <link rel="apple-touch-icon" href="./images/logo.png">
<!--IE淘汰计划--> <!--IE淘汰计划-->
<script> <script>
if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href = "https://imsyy.top/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href); if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href = "https://imsyy.top/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);
@@ -89,11 +87,11 @@
<div class="nav-divider"></div> <div class="nav-divider"></div>
<!-- 功能按钮 --> <!-- 功能按钮 -->
<button id="lang-btn" class="action-btn" aria-label="Switch Language" tabindex="0"> <button id="lang-btn" class="action-btn" aria-label="Switch Language">
<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" tabindex="0"> <button id="theme-btn" class="action-btn" aria-label="Toggle Theme">
<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>
@@ -110,7 +108,7 @@
<div class="bento-card area-profile"> <div class="bento-card area-profile">
<div class="profile-content"> <div class="profile-content">
<div class="avatar-ring"> <div class="avatar-ring">
<img src="images/avatar.jpeg" alt="Honesty" class="avatar-img" loading="lazy"> <img src="images/avatar.jpeg" alt="Honesty" class="avatar-img">
<div class="status-dot" data-i18n="status.online">Online</div> <div class="status-dot" data-i18n="status.online">Online</div>
</div> </div>
<div class="profile-info"> <div class="profile-info">
@@ -122,12 +120,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" aria-label="GitHub profile" tabindex="0"><i class="ri-github-fill"></i></a> <a href="https://github.com/listener-He" target="_blank" class="s-icon"><i class="ri-github-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="mailto:hehouhui@foxmail.com" class="s-icon"><i class="ri-mail-send-fill"></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://blog.hehouhui.cn" target="_blank" class="s-icon"><i class="ri-pages-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="https://www.zhihu.com/people/wen-xin-92-2-57" target="_blank" class="s-icon"><i class="ri-zhihu-line"></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="javascript:void(0);" onclick="toggleWechat()" class="s-icon"><i class="ri-wechat-fill"></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> <a href="https://juejin.cn/user/3659591622878503" target="_blank" class="s-icon"><i class="ri-code-box-line"></i></a>
</div> </div>
</div> </div>
</div> </div>
@@ -159,11 +157,11 @@
<span class="stat-key" data-i18n="stats.followers">Followers</span> <span class="stat-key" data-i18n="stats.followers">Followers</span>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<span class="stat-val neon-font" id="busuanzi_site_pv">0</span> <span class="stat-val neon-font" id="busuanzi_value_site_pv">0</span>
<span class="stat-key" data-i18n="stats.visitNum">Visit num</span> <span class="stat-key" data-i18n="stats.visitNum">Visit num</span>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<span class="stat-val neon-font" id="busuanzi_site_uv">0</span> <span class="stat-val neon-font" id="busuanzi_value_site_uv">0</span>
<span class="stat-key" data-i18n="stats.visitors">Visitors</span> <span class="stat-key" data-i18n="stats.visitors">Visitors</span>
</div> </div>
</div> </div>
@@ -175,7 +173,7 @@
<span class="mbti-code gradient-text">INFJ</span> <span class="mbti-code gradient-text">INFJ</span>
<span class="mbti-name" data-i18n="mbti.name">Advocate</span> <span class="mbti-name" data-i18n="mbti.name">Advocate</span>
<span class="mbti-icon"> <span class="mbti-icon">
<img src="images/INFJ.webp" alt="INFJ" style="width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.4)" loading="lazy"/> <img src="images/INFJ.png" alt="INFJ" style="width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.4)"/>
</span> </span>
</div> </div>
<p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p> <p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p>
@@ -240,12 +238,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" aria-label="GitHub profile" tabindex="0"><i class="ri-github-fill"></i></a> <a href="https://github.com/listener-He" class="ms-btn"><i class="ri-github-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="mailto:hehouhui@foxmail.com" class="ms-btn"><i class="ri-mail-send-fill"></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://blog.hehouhui.cn" class="ms-btn"><i class="ri-pages-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="https://www.zhihu.com/people/wen-xin-92-2-57" class="ms-btn"><i class="ri-zhihu-line"></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="javascript:void(0);" onclick="toggleWechat()" class="ms-btn"><i class="ri-wechat-fill"></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> <a href="https://juejin.cn/user/3659591622878503" class="ms-btn"><i class="ri-code-box-line"></i></a>
</div> </div>
</div> </div>
@@ -266,7 +264,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 第三部分：最新文章 --> <!-- 第三部分：最新文章 -->
<div class="content-section"> <div class="content-section">
<div class="content-col"> <div class="content-col">
@@ -294,15 +292,14 @@
<!-- 移动端悬浮功能按钮 --> <!-- 移动端悬浮功能按钮 -->
<div class="mobile-fab"> <div class="mobile-fab">
<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> <button id="fab-main" class="fab-main" aria-label="Actions"><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" tabindex="0"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button> <button id="fab-lang" class="fab-item"><i class="ri-translate-2"></i><span class="fab-text">Lang</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-theme" class="fab-item"><i class="ri-moon-line"></i><span class="fab-text">Theme</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> <button id="fab-music" class="fab-item"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
</div> </div>
</div> </div>
<!-- 隐藏的音频播放iframe --> <audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T.mp3" autoplay loop preload="auto"></audio>
<iframe id="audio-player-iframe" src="audio-player.html" style="display: none;"></iframe>
</main> </main>
<!-- 微信弹窗 --> <!-- 微信弹窗 -->
@@ -311,7 +308,7 @@
<button class="modal-close" onclick="toggleWechat()"><i class="ri-close-line"></i></button> <button class="modal-close" onclick="toggleWechat()"><i class="ri-close-line"></i></button>
<h3 data-i18n="modal.wechat">Official Account</h3> <h3 data-i18n="modal.wechat">Official Account</h3>
<div class="qr-box"> <div class="qr-box">
<img src="./images/mp-honesy.jpg" alt="WeChat QR" onerror="this.style.display='none';this.nextElementSibling.style.display='block'" loading="lazy"> <img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="WeChat QR" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
<!-- <div class="qr-fallback">QR Load Failed</div>--> <!-- <div class="qr-fallback">QR Load Failed</div>-->
</div> </div>
<p data-i18n="modal.desc">Scan to follow Tech Share</p> <p data-i18n="modal.desc">Scan to follow Tech Share</p>
@@ -319,7 +316,7 @@
</div> </div>
<footer class="site-footer"> <footer class="site-footer">
<p>Copyright &copy; 2018 <span id="currentYear"></span> Honesty. All rights reserved. <a class="icp" href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20014902号</a> Powered By <a href="https://pages.edgeone.ai/" target="_blank"> Tencent EdgeOne </a></p> <p>&copy; 2018 <span id="currentYear"></span> Honesty. All rights reserved. <a class="icp" href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20014902号</a> Powered By <a href="https://pages.edgeone.ai/" target="_blank"> Tencent EdgeOne </a></p>
<script> <script>
document.getElementById("currentYear").textContent = ' - ' + new Date().getFullYear(); document.getElementById("currentYear").textContent = ' - ' + new Date().getFullYear();
</script> </script>
@@ -327,9 +324,12 @@
</div> </div>
<!-- 脚本：BootCDN jQuery / Artalk --> <!-- 脚本：BootCDN jQuery / Artalk -->
<script src="js/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/config.js?version=20251125"></script> <script src="js/config.js?version=20251125"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.js"></script>
<!-- 引入多语言包（按需） -->
<script src="https://cdn.jsdelivr.net/npm/artalk@latest/dist/i18n/zh-cn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/artalk@latest/dist/i18n/en.js"></script>
<script src="js/about.js?version=20251125"></script> <script src="js/about.js?version=20251125"></script>
<!-- 不蒜子统计 --> <!-- 不蒜子统计 -->
@@ -368,24 +368,53 @@
<!-- 自动格式化脚本 --> <!-- 自动格式化脚本 -->
<script> <script>
// 监听不蒜子数据的错误兜底 // 核心格式化函数：支持 K / W / M，保留最多两位小数，去除尾随零
function formatWithUnit(num) {
num = Number(num);
if (isNaN(num) || num < 0) return '0';
// 小于 1000：直接显示
if (num < 1_000) {
return Math.floor(num).toString();
}
// 1K ~ 9.99K
if (num < 10_000) {
let val = (num / 1_000).toFixed(2);
return parseFloat(val) + 'K';
}
// 1W ~ 99.99W （1W = 10,000）
if (num < 1_000_000) {
let val = (num / 10_000).toFixed(2);
return parseFloat(val) + 'W';
}
// ≥ 1M
let val = (num / 1_000_000).toFixed(2);
return parseFloat(val) + 'M';
}
// 监听不蒜子数据更新并格式化
function initFormatter() { function initFormatter() {
const pvEl = document.getElementById(SiteConfig.analytics.busuanzi.site_pv_id); const pvEl = document.getElementById(SiteConfig.analytics.busuanzi.site_pv_id);
const uvEl = document.getElementById(SiteConfig.analytics.busuanzi.site_uv_id); const uvEl = document.getElementById(SiteConfig.analytics.busuanzi.site_uv_id);
if (!pvEl && !uvEl) return; if (!pvEl && !uvEl) return;
console.log('[Busuanzi]', 'Formatting... Listener observer');
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
if (pvEl?.textContent) { if (pvEl?.textContent) {
if (pvEl.textContent.includes('禁用')) { const raw = pvEl.textContent.trim().replace(/[,，]/g, '');
pvEl.textContent = '-'; const num = parseFloat(raw);
return; if (!isNaN(num)) {
pvEl.textContent = formatWithUnit(num);
} }
} }
if (uvEl?.textContent) { if (uvEl?.textContent) {
if (uvEl.textContent.includes('禁用')) { const raw = uvEl.textContent.trim().replace(/[,，]/g, '');
uvEl.textContent = '-'; const num = parseFloat(raw);
return; if (!isNaN(num)) {
uvEl.textContent = formatWithUnit(num);
} }
} }
}); });
@@ -401,5 +430,37 @@
initFormatter(); initFormatter();
} }
</script> </script>
<!-- PWA注册 -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
setTimeout(() => {
navigator.serviceWorker.register('./js/sw.js')
.then(function(registration) {
console.log('SW registered: ', registration);
})
.catch(function(registrationError) {
console.log('SW registration failed: ', registrationError);
});
}, 3000); // 页面稳定后再注册
});
}
</script>
<!-- Apple PWA支持 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Honesty">
<link rel="apple-touch-icon" href="./images/avatar.jpeg">
<!-- Windows PWA支持 -->
<meta name="msapplication-TileImage" content="./images/avatar.jpeg">
<meta name="msapplication-TileColor" content="#6c5ce7">
<meta name="msapplication-tap-highlight" content="no">
<!-- 其他PWA相关meta标签 -->
<meta name="mobile-web-app-capable" content="yes">
</body> </body>
</html> </html>

208
audio-player.html
View File

@@ -1,208 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player</title>
<style>
body {
margin: 0;
padding: 0;
background: transparent;
}
</style>
</head>
<body>
<audio id="audio-player" controls autoplay style="display: none;"></audio>
<script>
const audio = document.getElementById('audio-player');
let currentSrc = '';
let isStateBroadcasting = false;
// 监听来自主页面的消息
window.addEventListener('message', function(event) {
// 允许来自同域的所有窗口的消息
if (event.origin !== window.location.origin) return;
const data = event.data;
switch (data.action) {
case 'play':
// 如果当前正在播放，则暂停；否则播放
if (audio.paused) {
audio.play().catch(e => console.error('播放失败:', e));
} else {
audio.pause();
}
// 发送状态更新回所有可能的窗口
broadcastState();
break;
case 'pause':
if (!audio.paused) {
audio.pause();
}
broadcastState();
break;
case 'setTrack':
if (currentSrc !== data.src) {
currentSrc = data.src;
audio.src = data.src;
audio.load();
// 自动播放新曲目
setTimeout(() => {
audio.play().catch(e => console.error('播放失败:', e));
broadcastState();
}, 100);
}
break;
case 'setVolume':
audio.volume = data.volume;
broadcastState();
break;
case 'getCurrentState':
// 向请求方发送当前状态
event.source.postMessage({
action: 'currentState',
playing: !audio.paused,
src: audio.src,
volume: audio.volume,
currentTime: audio.currentTime,
duration: audio.duration || 0
}, event.origin);
break;
}
});
// 广播状态到所有可能监听的窗口
function broadcastState() {
if (isStateBroadcasting) return; // 防止状态广播循环
isStateBroadcasting = true;
window.parent.postMessage({
action: 'stateChange',
playing: !audio.paused,
src: audio.src,
volume: audio.volume,
currentTime: audio.currentTime,
duration: audio.duration || 0
}, '*');
// 保存播放状态
savePlaybackState();
setTimeout(() => {
isStateBroadcasting = false;
}, 10);
}
// 监听音频事件并通知主页面
audio.addEventListener('play', function() {
broadcastState();
});
audio.addEventListener('pause', function() {
broadcastState();
});
audio.addEventListener('ended', function() {
window.parent.postMessage({
action: 'trackEnded'
}, '*');
});
// 页面加载完成后通知主页面
window.addEventListener('load', function() {
// 恢复之前保存的播放状态
restorePlaybackState();
window.parent.postMessage({
action: 'playerReady'
}, '*');
});
// 页面可见性变化时处理
document.addEventListener('visibilitychange', function() {
if (!document.hidden) {
// 页面变为可见时，广播当前状态
setTimeout(broadcastState, 100);
}
});
// 页面即将卸载时保存播放状态
window.addEventListener('beforeunload', function() {
savePlaybackState();
});
// 保存播放状态到 sessionStorage
function savePlaybackState() {
try {
sessionStorage.setItem('audioState', JSON.stringify({
src: audio.src,
currentTime: audio.currentTime,
playing: !audio.paused,
volume: audio.volume,
timestamp: Date.now()
}));
} catch (e) {
console.error('保存音频状态失败:', e);
}
}
// 从 sessionStorage 恢复播放状态
function restorePlaybackState() {
try {
const savedState = sessionStorage.getItem('audioState');
if (savedState) {
const state = JSON.parse(savedState);
// 如果状态保存时间不超过1小时，则恢复播放
if (Date.now() - state.timestamp < 3600000) {
currentSrc = state.src;
audio.src = state.src;
audio.volume = state.volume !== undefined ? state.volume : 1.0;
audio.currentTime = state.currentTime || 0;
// 确保在用户交互后才尝试播放
if (state.playing) {
// 检查是否已经有用户交互
if (document.hasFocus()) {
// 稍微延迟播放，确保一切准备就绪
setTimeout(() => {
audio.play().catch(e => {
console.error('恢复播放失败:', e);
// 如果自动播放失败，等待用户交互后再播放
const tryPlayOnInteraction = () => {
audio.play().catch(console.error);
document.removeEventListener('click', tryPlayOnInteraction);
document.removeEventListener('touchstart', tryPlayOnInteraction);
};
document.addEventListener('click', tryPlayOnInteraction, { once: true });
document.addEventListener('touchstart', tryPlayOnInteraction, { once: true });
});
}, 300);
} else {
// 等待用户交互后再播放
const tryPlayOnInteraction = () => {
audio.play().catch(console.error);
document.removeEventListener('click', tryPlayOnInteraction);
document.removeEventListener('touchstart', tryPlayOnInteraction);
};
document.addEventListener('click', tryPlayOnInteraction, { once: true });
document.addEventListener('touchstart', tryPlayOnInteraction, { once: true });
}
}
}
}
} catch (e) {
console.error('恢复音频状态失败:', e);
}
}
</script>
</body>
</html>

3945
css/about.css
View File

File diff suppressed because it is too large Load Diff

461
css/artalk.css
View File

@@ -3,7 +3,6 @@
/* Base Artalk container styles */ /* Base Artalk container styles */
#artalk-container { #artalk-container {
border-radius: 12px; border-radius: 12px;
contain: layout style;
} }
/* 确保评论区域适配白天/黑夜模式 */ /* 确保评论区域适配白天/黑夜模式 */
@@ -32,7 +31,7 @@
background: rgba(128, 128, 128, 0.08); background: rgba(128, 128, 128, 0.08);
} }
#artalk-container .atk-dialog, #artalk-container .atk-dialog,
#artalk-container .atk-layer .atk-dialog { #artalk-container .atk-layer .atk-dialog {
background: var(--glass-bg); background: var(--glass-bg);
color: var(--text-primary); color: var(--text-primary);
@@ -45,6 +44,7 @@
/* Light theme styles */ /* Light theme styles */
.atk-main-editor { .atk-main-editor {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
border: 1px solid rgba(108, 92, 231, 0.2) !important; border: 1px solid rgba(108, 92, 231, 0.2) !important;
@@ -208,7 +208,118 @@
color: #6c5ce7 !important; color: #6c5ce7 !important;
} }
/* Night theme styles */
[data-theme="night"] .atk-main-editor {
background: rgba(30, 30, 35, 0.75) !important;
backdrop-filter: blur(28px) saturate(180%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8) !important;
}
[data-theme="night"] .atk-send-btn {
background: linear-gradient(135deg, #00cec9, #00b3ae) !important;
border: none !important;
border-radius: 20px !important;
padding: 8px 20px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 15px rgba(0, 206, 201, 0.4);
}
[data-theme="night"] .atk-send-btn:hover {
background: linear-gradient(135deg, #00b3ae, #009690) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(0, 206, 201, 0.6) !important;
}
[data-theme="night"] .atk-send-btn:active {
transform: translateY(0) !important;
}
[data-theme="night"] .atk-editor,
[data-theme="night"] .atk-editor textarea,
[data-theme="night"] .atk-editor input {
background: rgba(30, 30, 35, 0.75);
color: #dfe6e9;
}
[data-theme="night"] .atk-comment-wrap {
background: rgba(40, 40, 45, 0.85); /* 提高背景不透明度以增强可读性 */
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
[data-theme="night"] .atk-comment-wrap:hover {
background: rgba(45, 45, 50, 0.95); /* 提高悬停时的背景不透明度 */
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}
[data-theme="night"] .atk-dialog,
[data-theme="night"] .atk-layer .atk-dialog {
background: rgba(30, 30, 35, 0.85);
color: #dfe6e9;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8);
}
[data-theme="night"] .atk-header-item {
color: #dfe6e9 !important;
}
[data-theme="night"] .atk-editor-textarea {
color: #dfe6e9 !important;
background: rgba(40, 40, 45, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="night"] .atk-editor-bottom .atk-item {
color: #b2bec3 !important;
}
[data-theme="night"] .atk-list-header .atk-comment-count {
color: #dfe6e9 !important;
}
[data-theme="night"] .atk-sort-select {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #b2bec3 !important;
}
[data-theme="night"] .atk-comment .atk-nick {
color: #ffffff !important;
font-weight: 600 !important;
}
[data-theme="night"] .atk-comment .atk-date {
color: #a0aec0 !important;
}
[data-theme="night"] .atk-comment .atk-content {
color: #e2e8f0 !important;
}
[data-theme="night"] .atk-comment .atk-content a {
color: #00cec9 !important;
text-decoration: underline !important;
}
[data-theme="night"] .atk-comment .atk-content pre {
background: rgba(20, 20, 25, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #e2e8f0 !important;
}
[data-theme="night"] .atk-actions .atk-action {
color: #b2bec3 !important;
}
[data-theme="night"] .atk-actions .atk-action:hover {
color: #00cec9 !important;
}
/* Mobile specific styles */ /* Mobile specific styles */
.atk-mobile .atk-main-editor { .atk-mobile .atk-main-editor {
@@ -345,7 +456,30 @@
box-shadow: 0 6px 15px rgba(108, 92, 231, 0.25) !important; box-shadow: 0 6px 15px rgba(108, 92, 231, 0.25) !important;
} }
[data-theme="night"] .atk-pagination .atk-page-item {
background: rgba(255, 255, 255, 0.08) !important;
color: #b2bec3 !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(28px) saturate(180%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%) !important;
transition: all 0.3s ease;
}
[data-theme="night"] .atk-pagination .atk-page-item:hover {
background: linear-gradient(135deg, #00cec9, #00b3ae) !important;
color: white !important;
border: 1px solid rgba(0, 206, 201, 0.3) !important;
box-shadow: 0 8px 25px rgba(0, 206, 201, 0.3) !important;
transform: translateY(-2px);
}
[data-theme="night"] .atk-pagination .atk-page-item.atk-active {
background: linear-gradient(135deg, #00cec9, #00b3ae) !important;
color: white !important;
border: 1px solid rgba(0, 206, 201, 0.4) !important;
box-shadow: 0 8px 25px rgba(0, 206, 201, 0.4) !important;
}
/* Loading spinner */ /* Loading spinner */
.atk-loading { .atk-loading {
@@ -382,11 +516,6 @@
margin: 2px !important; margin: 2px !important;
} }
[data-theme="night"] .atk-editor-toolbar .atk-btn {
color: #b2bec3 !important;
filter: brightness(1.3);
}
/* 暗色模式下聚焦边框 */ /* 暗色模式下聚焦边框 */
.atk-dark .atk-editor-textarea:focus { .atk-dark .atk-editor-textarea:focus {
box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5) !important; box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5) !important;
@@ -397,42 +526,42 @@
.atk-header { .atk-header {
padding: 15px !important; padding: 15px !important;
} }
.atk-editor-plug-wrap { .atk-editor-plug-wrap {
padding: 0 15px 15px !important; padding: 0 15px 15px !important;
} }
.atk-editor-textarea { .atk-editor-textarea {
padding: 12px !important; padding: 12px !important;
} }
.atk-editor-bottom { .atk-editor-bottom {
padding: 0 15px 15px !important; padding: 0 15px 15px !important;
} }
.atk-list-header { .atk-list-header {
padding: 15px !important; padding: 15px !important;
} }
.atk-comment-wrap { .atk-comment-wrap {
padding: 15px !important; padding: 15px !important;
} }
.atk-pagination { .atk-pagination {
padding: 15px !important; padding: 15px !important;
} }
.atk-pagination .atk-page-item { .atk-pagination .atk-page-item {
padding: 6px 12px !important; padding: 6px 12px !important;
margin: 0 3px !important; margin: 0 3px !important;
font-size: 0.9rem !important; font-size: 0.9rem !important;
} }
/* 移动端增强样式 */ /* 移动端增强样式 */
.atk-main-editor { .atk-main-editor {
border-radius: 16px !important; border-radius: 16px !important;
} }
.atk-comment-wrap { .atk-comment-wrap {
padding: 12px 0 !important; padding: 12px 0 !important;
font-size: 0.95rem !important; font-size: 0.95rem !important;
@@ -444,24 +573,24 @@
border-top: none !important; border-top: none !important;
background: transparent !important; background: transparent !important;
} }
.atk-avatar { .atk-avatar {
width: 28px !important; width: 28px !important;
height: 28px !important; height: 28px !important;
object-fit: cover; /* 修复移动端头像拉伸问题 */ object-fit: cover; /* 修复移动端头像拉伸问题 */
} }
.atk-meta { .atk-meta {
font-size: 12px !important; font-size: 12px !important;
} }
/* 修复移动端输入框底色问题 */ /* 修复移动端输入框底色问题 */
[data-theme="night"] .atk-editor-textarea { [data-theme="night"] .atk-editor-textarea {
background: rgba(40, 40, 45, 0.5) !important; background: rgba(40, 40, 45, 0.5) !important;
color: #dfe6e9 !important; color: #dfe6e9 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
} }
/* 完全移除评论区域的容器样式以节省宽度 */ /* 完全移除评论区域的容器样式以节省宽度 */
#artalk-container { #artalk-container {
border-radius: 0 !important; border-radius: 0 !important;
@@ -470,299 +599,13 @@
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
/* 黑夜模式下移动端评论背景色优化 */ /* 黑夜模式下移动端评论背景色优化 */
[data-theme="night"] .atk-comment-wrap { [data-theme="night"] .atk-comment-wrap {
background: rgba(40, 40, 45, 0.9) !important; /* 提高移动端黑夜模式下的背景不透明度 */ background: rgba(40, 40, 45, 0.9) !important; /* 提高移动端黑夜模式下的背景不透明度 */
} }
[data-theme="night"] .atk-comment-wrap:hover { [data-theme="night"] .atk-comment-wrap:hover {
background: rgba(45, 45, 50, 0.95) !important; background: rgba(45, 45, 50, 0.95) !important;
} }
}
/* Night theme styles */
[data-theme="night"] .atk-main-editor {
background: rgba(30, 30, 35, 0.75) !important;
backdrop-filter: blur(28px) saturate(180%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8) !important;
}
[data-theme="night"] .atk-send-btn {
background: linear-gradient(135deg, #00cec9, #00b3ae) !important;
border: none !important;
border-radius: 20px !important;
padding: 8px 20px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 15px rgba(0, 206, 201, 0.4);
}
[data-theme="night"] .atk-send-btn:hover {
background: linear-gradient(135deg, #00b3ae, #009690) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(0, 206, 201, 0.6) !important;
}
[data-theme="night"] .atk-send-btn:active {
transform: translateY(0) !important;
}
[data-theme="night"] .atk-editor,
[data-theme="night"] .atk-editor textarea,
[data-theme="night"] .atk-editor input {
background: rgba(30, 30, 35, 0.75)!important;
color: #dfe6e9 !important;
}
[data-theme="night"] .atk-comment-wrap {
background: rgba(40, 40, 45, 0.85) !important; /* 提高背景不透明度以增强可读性 */
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
transition: all 0.3s ease !important;
}
[data-theme="night"] .atk-comment-wrap:hover {
background: rgba(45, 45, 50, 0.95) !important; /* 提高悬停时的背景不透明度 */
border: 1px solid rgba(255, 255, 255, 0.18) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
}
[data-theme="night"] .atk-dialog,
[data-theme="night"] .atk-layer .atk-dialog {
background: rgba(30, 30, 35, 0.85) !important;
color: #dfe6e9 !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8) !important;
}
[data-theme="night"] .atk-header-item {
color: #dfe6e9 !important;
}
[data-theme="night"] .atk-editor-textarea {
color: #1f2937 !important;
background: rgba(40, 40, 45, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="night"] .atk-editor-bottom .atk-item {
color: #b2bec3 !important;
}
[data-theme="night"] .atk-list-header .atk-comment-count {
color: #dfe6e9 !important;
}
[data-theme="night"] .atk-sort-select {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #b2bec3 !important;
}
[data-theme="night"] .atk-comment .atk-nick {
color: #ffffff !important;
font-weight: 600 !important;
}
[data-theme="night"] .atk-comment .atk-date {
color: #a0aec0 !important;
}
[data-theme="night"] .atk-comment .atk-content {
color: #e2e8f0 !important;
}
[data-theme="night"] .atk-comment .atk-content a {
color: #00cec9 !important;
text-decoration: underline !important;
}
[data-theme="night"] .atk-comment .atk-content pre {
background: rgba(20, 20, 25, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #e2e8f0 !important;
}
[data-theme="night"] .atk-actions .atk-action {
color: #b2bec3 !important;
}
[data-theme="night"] .atk-actions .atk-action:hover {
color: #00cec9 !important;
}
[data-theme="night"] .atk-pagination .atk-page-item {
background: rgba(255, 255, 255, 0.08) !important;
color: #b2bec3 !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(28px) saturate(180%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%) !important;
transition: all 0.3s ease;
}
[data-theme="night"] .atk-pagination .atk-page-item:hover {
background: linear-gradient(135deg, #00cec9, #00b3ae) !important;
color: white !important;
border: 1px solid rgba(0, 206, 201, 0.3) !important;
box-shadow: 0 8px 25px rgba(0, 206, 201, 0.3) !important;
transform: translateY(-2px);
}
[data-theme="night"] .atk-pagination .atk-page-item.atk-active {
background: linear-gradient(135deg, #00cec9, #00b3ae) !important;
color: white !important;
border: 1px solid rgba(0, 206, 201, 0.4) !important;
box-shadow: 0 8px 25px rgba(0, 206, 201, 0.4) !important;
}
}
/* PC端黑夜模式下的输入框颜色和列表样式修正 - 全面优化版 */
[data-theme="night"] .atk-editor-textarea {
background: rgba(30, 30, 35, 0.95) !important; /* 提高背景不透明度增强可读性 */
color: #ffffff !important; /* 使用更亮的文字颜色 */
border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 增强边框可见性 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="night"] .atk-editor-textarea:focus {
border: 1px solid #00cec9 !important;
box-shadow: 0 0 0 3px rgba(0, 206, 201, 0.4) !important;
}
[data-theme="night"] .atk-comment-wrap {
background: rgba(30, 30, 35, 0.95) !important; /* 提高背景不透明度增强可读性 */
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="night"] .atk-comment-wrap:hover {
background: rgba(40, 40, 45, 0.98) !important; /* 进一步提高背景不透明度 */
border: 1px solid rgba(0, 206, 201, 0.5) !important; /* 增强边框可见性 */
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="night"] .atk-list-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="night"] .atk-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 修复黑夜模式下插件面板的背景色问题 */
[data-theme="night"] .atk-editor-plug-wrap,
[data-theme="night"] .atk-plug-panel-wrap,
[data-theme="night"] .atk-editor-plug-emoticons,
[data-theme="night"] .atk-editor-plug-preview {
background: rgba(30, 30, 35, 0.95) !important;
color: #ffffff !important;
}
[data-theme="night"] .atk-plug-panel-wrap {
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="night"] .atk-editor-plug-emoticons {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* 优化评论底部工具栏在黑夜模式下的样式 */
[data-theme="night"] .atk-editor-bottom {
background: rgba(40, 40, 45, 0.7) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 12px 20px !important;
border-radius: 0 0 12px 12px !important;
}
[data-theme="night"] .atk-editor-bottom .atk-item {
color: #b2bec3 !important;
margin-right: 12px !important;
}
[data-theme="night"] .atk-send-btn {
background: linear-gradient(135deg, #00cec9, #00b3ae) !important;
border: none !important;
border-radius: 20px !important;
padding: 8px 20px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 15px rgba(0, 206, 201, 0.4);
}
[data-theme="night"] .atk-send-btn:hover {
background: linear-gradient(135deg, #00b3ae, #009690) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(0, 206, 201, 0.6) !important;
}
[data-theme="night"] .atk-send-btn:active {
transform: translateY(0) !important;
}
/* 优化评论列表项在黑夜模式下的样式 */
[data-theme="night"] .atk-comment {
color: #e2e8f0 !important;
}
[data-theme="night"] .atk-comment .atk-nick {
color: #ffffff !important;
font-weight: 600 !important;
}
[data-theme="night"] .atk-comment .atk-date {
color: #a0aec0 !important;
}
[data-theme="night"] .atk-comment .atk-content {
color: #ffffff !important; /* 使用更亮的文字颜色提高可读性 */
line-height: 1.6 !important;
}
[data-theme="night"] .atk-comment .atk-content a {
color: #00cec9 !important;
text-decoration: underline !important;
}
[data-theme="night"] .atk-actions .atk-action {
color: #b2bec3 !important;
transition: all 0.2s ease !important;
margin-right: 15px; /* 增加回复评论组件的边距 */
}
[data-theme="night"] .atk-actions .atk-action:hover {
color: #00cec9 !important;
}
/* 修复黑夜模式下评论计数和下拉菜单的可见性 */
[data-theme="night"] .atk-comment-count {
color: #ffffff !important;
font-weight: 600 !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}
[data-theme="night"] .atk-dropdown-wrap {
background: rgba(30, 30, 35, 0.95) !important;
}
[data-theme="night"] .atk-dropdown-item {
color: #ffffff !important;
}
[data-theme="night"] .atk-dropdown-item:hover {
background: rgba(0, 206, 201, 0.2) !important;
color: #00cec9 !important;
}
[data-theme="night"] .atk-dropdown-item.active {
background: rgba(0, 206, 201, 0.3) !important;
color: #00cec9 !important;
}
[data-theme="night"] .atk-arrow-down-icon {
filter: brightness(2) !important;
}

13
css/style.css
View File

@@ -262,7 +262,7 @@ pre code { padding: 0; background: none; border: none; word-wrap: normal; }
font-size: 1.3em; font-size: 1.3em;
font-weight: normal; font-weight: normal;
letter-spacing: 2px; letter-spacing: 2px;
color: #ffffff; color: #f0f0f0;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -275,7 +275,7 @@ pre code { padding: 0; background: none; border: none; word-wrap: normal; }
line-height: 2; line-height: 2;
letter-spacing: 2px; letter-spacing: 2px;
color: #ffffff; color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; text-shadow: 0 1px 2px rgba(141, 114, 114, 0.2) !important;
position: relative; position: relative;
z-index: 1; z-index: 1;
font-feature-settings: 'kern' 1; font-feature-settings: 'kern' 1;
@@ -872,7 +872,7 @@ nav {
.weixin-qrcode-desc { .weixin-qrcode-desc {
font-size: 14px; font-size: 14px;
color: #555; color: #666;
margin-bottom: 15px; margin-bottom: 15px;
} }
@@ -986,12 +986,12 @@ nav {
display: inline-block; display: inline-block;
margin: 0 5px; margin: 0 5px;
font-size: 0.5em; font-size: 0.5em;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.7);
line-height: 1.2; line-height: 1.2;
} }
.power a { .power a {
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.8);
font-size: 0.5em; font-size: 0.5em;
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
@@ -1006,7 +1006,8 @@ nav {
.remark .power:not(:last-child):after { .remark .power:not(:last-child):after {
content: "|"; content: "|";
margin-left: 8px; margin-left: 8px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.5);
} }

74
data/github_repos.json
View File

@@ -1,58 +1,32 @@
[ [
{ {
"name": "spring-ai-example", "id": 1011713435,
"stargazers_count": 13,
"forks_count": 0,
"description": "本项目是一个基于 Spring AI 框架构建的检索增强生成（RAG）应用，旨在通过向量检索技术增强大模型的生成能力，使 AI 回答既智能又有依据。 项目采用现代化 Java 技术栈，核心框架为 Spring Boot 3.3 与 Spring AI 1.0，集成 OpenAI 模型（deepseek-r1、doubao-embedding）主打白嫖，支持 PostgreSQL+pgvector、Elasticsearch 等多种向量存储方案，并利用 Redis 实现缓存加速、Elasticsearch 管理对话记忆。",
"html_url": "https://github.com/listener-He/spring-ai-example"
},
{
"name": "yunxiao-LLM-reviewer", "name": "yunxiao-LLM-reviewer",
"stargazers_count": 10, "html_url": "https://github.com/listener-He/yunxiao-LLM-reviewer",
"description": "一款专为阿里云云效 Flow 平台设计的自动化代码审查工具。通过集成 Qwen、DeepSeek 等先进大模型，该工具能够实时分析 Git 合并请求（MR）中的代码变更，智能识别潜在问题并自动生成结构化评审意见。",
"stargazers_count": 9,
"forks_count": 3, "forks_count": 3,
"description": "一款专为阿里云云效 Flow 平台设计的自动化代码审查工具。通过集成 Qwen、DeepSeek 等先进大模型，该工具能够实时分析 Git 合并请求（MR）中的代码变更，智能识别潜在问题并自动生成结构化评审意见。 工具支持多维度代码检测，包括逻辑错误、安全漏洞，有效提升团队代码质量与开发效率。 作为云效 Flow 的自定义步骤，该工具可无缝集成到 CI/CD 流水线中，实现 MR 提交时的自动化代码审查，大幅减少人工评审工作量，加速代码交付流程。", "language": "TypeScript",
"html_url": "https://github.com/listener-He/yunxiao-LLM-reviewer" "updated_at": "2025-10-10T11:06:34Z"
}, },
{ {
"name": "Home", "id": 1064414600,
"stargazers_count": 2, "name": "hexo-theme-stellar",
"forks_count": 0, "html_url": "https://github.com/listener-He/hexo-theme-stellar",
"description": "现代化个人主页，融合科技感与个性化元素，展示个人技术栈、开源项目和博客文章。", "description": "综合型hexo主题：博客+知识库+专栏+笔记，内置海量的标签组件和动态数据组件。",
"html_url": "https://github.com/listener-He/Home"
},
{
"name": "collection-complete",
"stargazers_count": 2,
"forks_count": 2,
"description": "collection-complete 是一个用于处理集合数据并补充相关信息的Java库。它提供了链式调用的功能，可以方便地对集合中的元素进行批量操作和属性补充。全程函数式 均衡了易用性与扩展性的设计",
"html_url": "https://github.com/listener-He/collection-complete"
},
{
"name": "keycloak-services-social-weixin",
"stargazers_count": 2,
"forks_count": 3,
"description": "",
"html_url": "https://github.com/listener-He/keycloak-services-social-weixin"
},
{
"name": "Notion-Wechat-Blog",
"stargazers_count": 1,
"forks_count": 0,
"description": "基于NotionNext作为后端的微信小程序",
"html_url": "https://github.com/listener-He/Notion-Wechat-Blog"
},
{
"name": "social-auth",
"stargazers_count": 1,
"forks_count": 0,
"description": "",
"html_url": "https://github.com/listener-He/social-auth"
},
{
"name": "hp-lite",
"stargazers_count": 0, "stargazers_count": 0,
"forks_count": 1, "forks_count": 0,
"description": "内网穿透 轻量版 支持 https http tcp udp 支持云端动态控制穿透配置，支持免费SSL证书和续签、支持限流和IP黑白名单，多账户、统计、http、socks代理、反向代理、多设备管理等功能。", "language": null,
"html_url": "https://github.com/listener-He/hp-lite" "updated_at": "2025-09-26T02:12:18Z"
},
{
"id": 1060085476,
"name": "Universal-IoT-Java",
"html_url": "https://github.com/listener-He/Universal-IoT-Java",
"description": "通用 IoT Java 平台（示例）",
"stargazers_count": 0,
"forks_count": 0,
"language": null,
"updated_at": "2025-10-13T02:30:28Z"
} }
] ]

BIN
data/至少做一件离谱的事-Kiri T_compressed.mp3
View File

Binary file not shown.

BIN
images/INFJ.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
images/bj/1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 691 KiB

BIN
images/bj/10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
images/bj/2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 415 KiB

BIN
images/bj/3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 488 KiB

BIN
images/bj/4.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 MiB

BIN
images/bj/5.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 168 KiB

BIN
images/bj/6.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/bj/7.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 786 KiB

BIN
images/bj/8.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 MiB

BIN
images/bj/9.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
images/mp-honesy.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

73
index.html
View File

@@ -13,6 +13,9 @@
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚"> <meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
<meta name="author" content="Honesty"> <meta name="author" content="Honesty">
<!-- PWA相关配置 -->
<meta name="theme-color" content="#6c5ce7">
<link rel="manifest" href="./manifest.json">
<!-- 社交平台分享优化 --> <!-- 社交平台分享优化 -->
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
@@ -64,7 +67,7 @@
</script> </script>
</head> </head>
<body> <body oncontextmenu=self.event.returnValue=false onselectstart="return false">
<header id="panel" class="panel-cover"> <header id="panel" class="panel-cover">
<script> <script>
WIDGET = { WIDGET = {
@@ -104,7 +107,7 @@
<div class="info iUp"> <div class="info iUp">
<div class="info-back"> <div class="info-back">
<img alt="img" src="images/kl.gif" <img alt="img" src="images/kl.gif"
class="js-avatar profilepic" loading="lazy"> class="js-avatar profilepic">
</div> </div>
</div> </div>
</a> </a>
@@ -263,9 +266,9 @@
<div class="weixin-qrcode-container"> <div class="weixin-qrcode-container">
<div class="weixin-qrcode-title">扫描二维码</div> <div class="weixin-qrcode-title">扫描二维码</div>
<div class="weixin-qrcode-desc">请使用微信扫一扫添加关注</div> <div class="weixin-qrcode-desc">请使用微信扫一扫添加关注</div>
<img src="./images/mp-honesy.jpg" alt="微信二维码" <img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="微信二维码"
class="weixin-qrcode-image" class="weixin-qrcode-image"
onerror="this.src='https://cdn.jsdmirror.com/gh/listener-He/Home/images/logo.png'; this.alt='二维码加载失败'" loading="lazy"> onerror="this.src='https://cdn.jsdmirror.com/gh/listener-He/Home/images/logo.png'; this.alt='二维码加载失败'">
<button class="weixin-qrcode-close" onclick="closeWeixin()">关闭</button> <button class="weixin-qrcode-close" onclick="closeWeixin()">关闭</button>
</div> </div>
</div> </div>
@@ -277,7 +280,7 @@
// 防止滚动穿透 // 防止滚动穿透
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
// 添加ESC键关闭 // 添加ESC键关闭
document.addEventListener('keydown', closeOnEsc, { passive: false }); document.addEventListener('keydown', closeOnEsc);
} }
function closeWeixin() { function closeWeixin() {
@@ -286,7 +289,7 @@
// 恢复滚动 // 恢复滚动
document.body.style.overflow = ''; document.body.style.overflow = '';
// 移除ESC键监听 // 移除ESC键监听
document.removeEventListener('keydown', closeOnEsc, { passive: false }); document.removeEventListener('keydown', closeOnEsc);
} }
function closeOnEsc(e) { function closeOnEsc(e) {
@@ -300,12 +303,12 @@
if (e.target === this) { if (e.target === this) {
closeWeixin(); closeWeixin();
} }
}, { passive: false }); });
// 阻止点击弹框内容时关闭 // 阻止点击弹框内容时关闭
document.querySelector('.weixin-qrcode-container').addEventListener('click', function (e) { document.querySelector('.weixin-qrcode-container').addEventListener('click', function (e) {
e.stopPropagation(); e.stopPropagation();
}, { passive: false }); });
</script> </script>
</div> </div>
<div class="remark iUp"> <div class="remark iUp">
@@ -392,7 +395,7 @@
<!-- 可选：继续调用 config --> <!-- 可选：继续调用 config -->
<script type="text/javascript"> <script type="text/javascript">
try { try {
gtag('config', SiteConfig.analytics.google.id); gtag('config', 'G-DYWDEVKDP0');
} catch (e) { } catch (e) {
console.error("Google Analytics config 失败", e); console.error("Google Analytics config 失败", e);
} }
@@ -411,28 +414,38 @@
}; };
s.LA ? s.LA.ids && o() : (s.LA = p, s.LA.ids = [], o()), r.parentNode.insertBefore(n, r) s.LA ? s.LA.ids && o() : (s.LA = p, s.LA.ids = [], o()), r.parentNode.insertBefore(n, r)
}() }()
}({id: SiteConfig.analytics.tencent.id, ck: SiteConfig.analytics.tencent.ck}); }({id: "3OBGjwDdEIRS7XZ1", ck: "3OBGjwDdEIRS7XZ1"});
</script> </script>
<!-- 隐藏的音频播放iframe --> <!-- PWA注册 -->
<iframe id="audio-player-iframe" src="audio-player.html" style="display: none;"></iframe> <script>
if ('serviceWorker' in navigator) {
<script> window.addEventListener('load', function () {
// 音频控制逻辑 setTimeout(() => {
let audioIframe = document.getElementById('audio-player-iframe'); navigator.serviceWorker.register('./js/sw.js')
// 监听来自iframe的消息 .then(function(registration) {
window.addEventListener('message', function(event) { console.log('SW registered: ', registration);
// 确保消息来自我们的iframe })
if (event.source !== audioIframe.contentWindow) return; .catch(function(registrationError) {
const data = event.data; console.log('SW registration failed: ', registrationError);
if (data.playing && data.action === 'playerReady') { });
// iframe准备就绪，设置初始音频 }, 3000); // 页面稳定后再注册
audioIframe.contentWindow.postMessage({
action: 'setTrack',
src: 'data/至少做一件离谱的事-Kiri T_compressed.mp3'
}, '*');
}
}); });
</script> }
</script>
<!-- Apple PWA支持 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Honesty">
<link rel="apple-touch-icon" href="./images/logo.png">
<!-- Windows PWA支持 -->
<meta name="msapplication-TileImage" content="./images/avatar.jpeg">
<meta name="msapplication-TileColor" content="#6c5ce7">
<meta name="msapplication-tap-highlight" content="no">
<!-- 其他PWA相关meta标签 -->
<meta name="mobile-web-app-capable" content="yes">
</body> </body>
</html> </html>

4
js/StarrySky.js
View File

@@ -84,7 +84,7 @@ const StarrySky = function () {
} }
} }
starCount = Math.ceil(canvasWidth * starCountLevel); starCount = Math.ceil(canvasWidth * starCountLevel);
}, 200), { passive: true }); }, 200));
} else { } else {
console.error('初始化失败，必须传入Canvas元素'); console.error('初始化失败，必须传入Canvas元素');
} }
@@ -160,7 +160,7 @@ const StarrySky = function () {
canvasContext.shadowOffsetX = 0; canvasContext.shadowOffsetX = 0;
canvasContext.shadowOffsetY = 0; canvasContext.shadowOffsetY = 0;
canvasContext.shadowColor = "rgb(" + star["color"] + ")"; canvasContext.shadowColor = "rgb(" + star["color"] + ")";
canvasContext.shadowBlur = 5; canvasContext.shadowBlur = 10;
canvasContext.beginPath(); canvasContext.beginPath();
canvasContext.arc(star_x, star_y, star_radius, 0, 2 * Math.PI); canvasContext.arc(star_x, star_y, star_radius, 0, 2 * Math.PI);
canvasContext.fill(); canvasContext.fill();

790
js/about.js
View File

File diff suppressed because it is too large Load Diff

42
js/audio-service-worker.js
View File

@@ -1,42 +0,0 @@
// audio-service-worker.js
// Service Worker for background audio playback
self.addEventListener('install', event => {
self.skipWaiting();
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
// 监听来自主页面的消息
self.addEventListener('message', async event => {
const client = event.source;
const data = event.data;
switch (data.action) {
case 'play':
// 这里只是示例，实际上Service Worker无法直接播放音频
// 我们需要采用另一种方式实现
break;
case 'pause':
break;
case 'setTrack':
break;
}
});
// 使用 Broadcast Channel API 在页面间通信
const broadcastChannel = new BroadcastChannel('audio-control');
broadcastChannel.addEventListener('message', event => {
const data = event.data;
// 将消息转发给所有客户端
self.clients.matchAll().then(clients => {
clients.forEach(client => {
client.postMessage(data);
});
});
});

63
js/config.js
View File

@@ -15,19 +15,19 @@ const SiteConfig = {
increment: 150 increment: 150
} }
}, },
background: { background: {
imagePaths: [ imagePaths: [
"/images/bj/1.webp", "/images/bj/1.jpg",
"/images/bj/2.webp", "/images/bj/2.jpg",
"/images/bj/3.webp", "/images/bj/3.jpg",
"/images/bj/4.webp", "/images/bj/4.jpg",
"/images/bj/5.webp", "/images/bj/5.jpg",
"/images/bj/6.webp", "/images/bj/6.jpg",
"/images/bj/7.webp" "/images/bj/7.jpg"
] ]
}, },
hitokoto: { hitokoto: {
apiUrl: 'https://v1.hitokoto.cn?c=c&c=d&c=i&c=k' apiUrl: 'https://v1.hitokoto.cn?c=c&c=d&c=i&c=k'
}, },
@@ -36,7 +36,7 @@ const SiteConfig = {
github: { github: {
username: 'listener-He' username: 'listener-He'
}, },
blog: { blog: {
rssUrl: 'https://blog.hehouhui.cn/api/rss' rssUrl: 'https://blog.hehouhui.cn/api/rss'
}, },
@@ -47,7 +47,7 @@ const SiteConfig = {
blog: { key: 'blog_data_v2', ttlMs: 3600000 }, blog: { key: 'blog_data_v2', ttlMs: 3600000 },
theme: { key: 'theme_v2', ttlMs: 3600000 } theme: { key: 'theme_v2', ttlMs: 3600000 }
}, },
techStack: [ techStack: [
{ name: 'Java', category: 'core', weight: 5 }, { name: 'Java', category: 'core', weight: 5 },
{ name: 'Spring Boot', category: 'backend', weight: 5 }, { name: 'Spring Boot', category: 'backend', weight: 5 },
@@ -115,13 +115,13 @@ const SiteConfig = {
], ],
user: { repos: 165, followers: 6, created: "2018-05-14" } user: { repos: 165, followers: 6, created: "2018-05-14" }
}, },
socialCards: { socialCards: {
rings: [130, 180, 230], rings: [130, 180, 230],
goldenAngle: 137.5, goldenAngle: 137.5,
baseSpeed: 16 baseSpeed: 16
}, },
artalk: { artalk: {
server: 'https://artalk.hehouhui.cn', server: 'https://artalk.hehouhui.cn',
site: 'Honesty的主页', site: 'Honesty的主页',
@@ -129,13 +129,13 @@ const SiteConfig = {
noComment: '暂无评论', noComment: '暂无评论',
sendBtn: '发送' sendBtn: '发送'
}, },
// 站点统计配置 // 站点统计配置
analytics: { analytics: {
busuanzi: { busuanzi: {
src: '//cdn.busuanzi.cc/busuanzi/3.6.9/busuanzi.abbr.min.js', src: 'https://events.vercount.one/js',
site_pv_id: 'busuanzi_site_pv', site_pv_id: 'busuanzi_value_site_pv',
site_uv_id: 'busuanzi_site_uv', site_uv_id: 'busuanzi_value_site_uv',
formatter: true formatter: true
}, },
baidu: { baidu: {
@@ -152,7 +152,7 @@ const SiteConfig = {
ck: '3OBGjwDdEIRS7XZ1' ck: '3OBGjwDdEIRS7XZ1'
} }
}, },
animationSettings: { animationSettings: {
observerOptions: { observerOptions: {
threshold: 0.1, threshold: 0.1,
@@ -163,17 +163,40 @@ const SiteConfig = {
rootMargin: '0px 0px -20px 0px' rootMargin: '0px 0px -20px 0px'
} }
}, },
// 开发环境配置 // 开发环境配置
dev: { dev: {
isLocal: (typeof location !== 'undefined') ? (location.hostname.indexOf('localhost') > -1 || location.hostname.indexOf('127.0.0.1') > -1) : false isLocal: (typeof location !== 'undefined') ? (location.hostname.indexOf('localhost') > -1 || location.hostname.indexOf('127.0.0.1') > -1) : false
} }
}; };
if (Array.isArray(SiteConfig.techStack)) {
const categoryGradientMap = {
core: 7,
backend: 4,
data: 9,
ops: 10,
ai: 3
};
const vividSet = [1, 4, 7, 8];
SiteConfig.techStack = SiteConfig.techStack.map((item) => {
const name = item.name || '';
const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
if (item.gradientId && Number.isFinite(Number(item.gradientId))) {
return { ...item, gradientId: Math.max(1, Math.min(10, Number(item.gradientId))) };
}
let base = categoryGradientMap[item.category] || ((hash % 10) + 1);
if (Number(item.weight) >= 5) {
base = vividSet[hash % vividSet.length];
}
return { ...item, gradientId: base };
});
}
// 导出配置 // 导出配置
if (typeof module !== 'undefined' && module.exports) { if (typeof module !== 'undefined' && module.exports) {
module.exports = SiteConfig; module.exports = SiteConfig;
} else if (typeof window !== 'undefined') { } else if (typeof window !== 'undefined') {
window.SiteConfig = SiteConfig; window.SiteConfig = SiteConfig;
} }

6
js/main.js
View File

@@ -49,16 +49,18 @@ $(document).ready(function () {
/** /**
* 自定义壁纸 * 自定义壁纸
*/ */
var imgUrls = null; //JSON.parse(sessionStorage.getItem("imgUrls")); var imgUrls = JSON.parse(sessionStorage.getItem("imgUrls"));
var index = sessionStorage.getItem("index");
var $panel = $('#panel'); var $panel = $('#panel');
var date = new Date(); var date = new Date();
var dayOfWeek = date.getDay(); var dayOfWeek = date.getDay();
if (imgUrls == null) { if (imgUrls == null) {
imgUrls = []; imgUrls = [];
index = 0;
SiteConfig.background.imagePaths.forEach(path => { SiteConfig.background.imagePaths.forEach(path => {
imgUrls.push(path); imgUrls.push(path);
}); });
//sessionStorage.setItem("imgUrls", JSON.stringify(imgUrls)); sessionStorage.setItem("imgUrls", JSON.stringify(imgUrls));
// sessionStorage.setItem("index", index); // sessionStorage.setItem("index", index);
} else { } else {
// if (index == imgUrls.length) // if (index == imgUrls.length)

87
js/sw.js
View File

@@ -0,0 +1,87 @@
const CACHE_NAME = 'honesty-home-v1.1.0';
const urlsToCache = [
'./index.html',
'./about.html',
'./css/style.css',
'./css/about.css',
'./css/artalk.css',
'./js/config.js',
'./js/about.js',
'./images/avatar.jpeg',
'./images/favicon.ico',
'./images/favicon.png',
'./images/logo.png',
'./images/INFJ.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
.catch(() => Promise.resolve())
);
self.skipWaiting();
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET' || !event.request.url.startsWith(self.location.origin)) {
return;
}
const url = new URL(event.request.url);
const isHTML = event.request.mode === 'navigate' || url.pathname.endsWith('.html');
const isVersioned = url.search && /version=/.test(url.search);
const isAudio = url.pathname.endsWith('.mp3') || url.pathname.endsWith('.wav') || url.pathname.endsWith('.ogg');
const isImage = /\.(png|jpg|jpeg|gif|webp|svg)$/i.test(url.pathname);
const isStaticAsset = /\.(css|js|json)$/i.test(url.pathname);
if (isHTML || isVersioned || isAudio) {
event.respondWith(
fetch(event.request)
.then(resp => {
if (resp && resp.status === 200 && resp.type === 'basic' && !isAudio) {
const copy = resp.clone();
caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy)).catch(() => {});
}
return resp;
})
.catch(() => {
return caches.match(event.request, { ignoreSearch: true })
.then(m => m || caches.match(event.request))
})
);
return;
}
event.respondWith(
caches.match(event.request, { ignoreSearch: true })
.then(cached => {
if (cached) return cached;
return fetch(event.request).then(resp => {
if (resp && resp.status === 200 && resp.type === 'basic' && (isImage || isStaticAsset)) {
const copy = resp.clone();
caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy)).catch(() => {});
}
return resp;
});
})
);
});
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
self.clients.claim();
});