diff --git a/DEPLOY.md b/DEPLOY.md new file mode 100644 index 0000000..7e23434 --- /dev/null +++ b/DEPLOY.md @@ -0,0 +1,104 @@ +# 部署与自定义指南 + +本文档详细介绍如何在不同环境下部署站点，以及如何自定义配置、样式与数据源。阅读完成后，你可以将本项目快速上线并按需个性化。 + +## 环境要求 + +- 任意静态站点环境（Nginx/Apache/Node 静态服务、Vercel、Netlify、GitHub Pages 等） +- 现代浏览器（移动/桌面） + +## 本地预览 + +- 直接在本地打开 `index.html` 与 `about.html` 即可（双击或使用任意静态服务器） +- 推荐使用简易静态服务器（任选其一）： + - Python：`python3 -m http.server 8080` + - Node：`npx serve -s .` + - Nginx：配置示例见下文 + +## 生产部署 + +### Vercel/Netlify + +- 新建项目并选择本仓库（或上传构建产物） +- 框架选择：None（静态），构建命令：无，输出目录：根目录（包含 HTML/CSS/JS） +- 部署后即可通过平台提供的域名访问；可绑定自定义域名 + +### GitHub Pages + +- 将仓库设置为公开 +- 在仓库 Settings → Pages：选择 `Branch: main` 与根目录 +- 等待构建完成后，使用生成的 `https://.github.io//` 访问 + +### Nginx + +``` +server { + listen 80; + server_name your.domain.com; + root /var/www/your-site; + index index.html; + + location / { + try_files $uri $uri/ /index.html; + } + + location ~* \.(css|js|png|jpg|gif|ico)$ { + expires 30d; + add_header Cache-Control "public, max-age=2592000"; + } +} +``` + +## 站点配置（js/config.js） + +- GitHub 与 RSS + - `SiteConfig.github.username`：GitHub 用户名 + - `SiteConfig.cacheKeys.github`：缓存键与过期时间（毫秒） + - `SiteConfig.blog.rssUrl`：RSS 接口地址 + - `SiteConfig.cacheKeys.blog`：缓存键与过期时间（毫秒） +- Artalk 评论 + - `SiteConfig.artalk.server` 与 `SiteConfig.artalk.site` + - `dev.isLocal`：本地或非 HTTPS 环境下自动显示“评论区已关闭”提示 +- 主题与语言 + - 主题缓存：`SiteConfig.cacheKeys.theme.key/ttlMs` + - 语言存取：使用 `localStorage('lang')`，页面内可切换 CN/EN + +> 安全提示：请勿在 `config.js` 中硬编码敏感信息（如 Token）。本项目不需要服务端密钥；如需扩展 API，请在后端代理或使用服务端环境变量。 + +## 自定义样式 + +- 主题变量（css/about.css 顶部 `:root` 与 `[data-theme="night"]`） + - 白天：`--text-primary/secondary/tertiary`、`--glass-bg`、`--accent` + - 夜间：深色背景、微光强度、边框透明度等 +- 视觉模块 + - 兴趣卡片：圆角、边框与阴影在白天/夜间分别优化，可调整对比 + - 技术栈标签：PC 3D 球、移动端三行滚动；可修改渐变方案与速度 + - 标题渐变：仅在白天保留轻微渐变，正文统一实色以提升可读性 +- 评论组件（Artalk） + - 桌/移端响应式：容器 `#artalk-container` 自动加 `.atk-mobile/.atk-desktop` + - 移动端折叠：评论内容默认折叠，按钮“展开/收起”交互 + +## 数据缓存与性能 + +- GitHub 与 RSS 均采用前端缓存（`localStorage`）与过期策略 +- GitHub 数据已在写入缓存前进行精简（仅保留页面所需字段） +- 渲染时添加淡入过渡与骨架占位，保证加载过程的平滑体验 + +## 常见问题 + +- 评论区在本地或非 HTTPS 环境显示“评论区已关闭” + - 这是预期行为；上线到 HTTPS 环境并设置 `SiteConfig.artalk` 可开启 +- 夜间兴趣文本未显示渐变 + - 清理浏览器缓存后重试；检查 CSS 覆盖是否被自定义样式覆盖 +- GitHub/RSS 数据为空 + - 检查 `SiteConfig` 中的用户名与 RSS 接口；或查看浏览器控制台网络请求 + +## 进一步扩展 + +- 接入更多数据源（如 Twitter/知乎/掘金） +- 为 3D 技术栈添加交互（点击跳链接、标签分组） +- 增加文章详情页与分页列表 + +--- + +如果你在部署或自定义过程中遇到问题，欢迎提 Issue 或进行二次开发贡献。 \ No newline at end of file diff --git a/README.md b/README.md index 2562327..df5552e 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,91 @@ -
- # Honesty's Personal Website -现代化个人主页，融合科技感与个性化元素，展示个人技术栈、开源项目和博客文章。 +一个轻量、优雅、现代化个人主页，融合科技感与个性化元素，展示个人技术栈、开源项目和博客文章。白天模式强调阅读与信息密度，夜间模式带来渐变与微光的沉浸视觉。 -[![License](https://img.shields.io/github/license/lqbby/Tech-Home?color=blue)](LICENSE) -[![GitHub stars](https://img.shields.io/github/stars/lqbby/Tech-Home)](https://github.com/lqbby/Tech-Home/stargazers) -[![GitHub forks](https://img.shields.io/github/forks/lqbby/Tech-Home)](https://github.com/lqbby/Tech-Home/network/members) +
-[在线预览](https://www.hehouhui.cn) | [关于我](https://about.hehouhui.cn) - -![首页预览](images/home.png) +[![GitHub](https://img.shields.io/github/license/listener-He/Home?color=blue)](https://github.com/listener-He/Home/blob/main/LICENSE) +[![GitHub stars](https://img.shields.io/github/stars/listener-He/Home)](https://github.com/listener-He/Home/stargazers) +[![GitHub issues](https://img.shields.io/github/issues/listener-He/Home)](https://github.com/listener-He/Home/issues)
-## 🌟 简介 +## 🌟 项目亮点 -这是一个现代化的个人主页项目，融合了科技感设计和个性化元素，用于展示个人信息、技术栈、开源项目和博客文章等内容。项目设计美观、响应式布局，支持白天/黑夜模式切换，为访问者提供良好的浏览体验。 +现代、响应式个人站点，融合美学设计与技术实力，打造专业个人品牌形象。 -## ✨ 特性 +### 🎨 视觉设计特色 -- 🎨 现代化UI设计，融合科技感与个性化元素 -- 🌗 白天/黑夜模式自动切换 -- 📱 完全响应式设计，适配PC、平板和手机设备 -- 🌀 3D交互式技术标签云 -- 📊 动态展示GitHub项目和博客文章 -- 🌈 个性化的INFJ人格特质展示 -- 📞 多种联系方式集成（GitHub、邮箱、微信、知乎等） -- ⚡ 高性能优化，快速加载体验 -- 🔧 易于定制和扩展 +- **渐变美学**：精心设计的渐变色彩方案，营造现代感视觉体验 +- **玻璃态效果**：白天柔和透明，夜间深色半透明，层次分明 +- **沉浸式夜间模式**：微光特效与深色主题，保护视力同时提升质感 +- **响应式布局**：完美适配桌面、平板、手机等各种设备 -## 🚀 技术栈 +### 🚀 核心功能 -- HTML5 + CSS3 + JavaScript -- jQuery -- Artalk (评论系统) -- GitHub API -- 和风天气 API -- Hitokoto 一言 +- ✨ **渐变标题与微光夜间视觉**：仅标题保留渐变，正文统一实色，确保阅读清晰 +- 🧊 **玻璃态卡片**：白天柔和、夜间半透明深色，兼顾层次与审美 +- 🪐 **技术栈宇宙**：PC 端 3D 标签球；移动端三行无缝横向滚动 +- 📦 **内容聚合**：GitHub 开源仓库（星标/分支信息）、RSS 最新文章聚合 +- 💬 **评论互动**：Artalk 评论组件，移动端支持折叠/展开，桌/移端自适配样式 +- 🌗 **主题与语言**：一键切换 Day/Night 与 CN/EN，自动缓存记忆 +- ⚡ **性能与体验**：缓存字段精简、骨架占位与淡入过渡、异步抓取避免阻塞 -## 📁 项目结构 +## 🖼️ 页面预览 -``` -Home/ -├── index.html # 首页 -├── about.html # 关于我页面 -├── 404.html # 404页面 -├── css/ -│ ├── style.css # 首页样式 -│ ├── about.css # 关于我页面样式 -│ └── iconfont.css # 图标字体 -├── js/ -│ ├── main.js # 首页主逻辑 -│ ├── about.js # 关于我页面逻辑 -│ ├── config.js # 配置文件 -│ └── ... -├── images/ # 图片资源 -├── data/ # 数据文件 -└── ... -``` +
+ 主页 + 关于 · 白天 + 关于 · 夜间 +
-## 🎯 功能模块 +## 🧩 页面结构 -### 首页 (index.html) -- 个人简介展示 -- 头像翻页动画 -- Hitokoto一言 -- 日期及时间显示 -- 实时天气信息 -- 星空背景动画 -- 社交媒体链接 +### 🏠 主页（index） +- 简洁直观的内容入口与导航 +- 轻量、清晰、直达的用户体验 -### 关于我 (about.html) -- 个人信息展示 -- 技术栈3D云图 -- INFJ人格特质展示 -- GitHub开源项目展示 -- 博客文章瀑布流 -- 个人时间线 -- 联系方式集成 -- 留言评论系统 +### 👤 关于页面（about） +- **Profile**：头像、在线状态、个性化标题与社交链接 +- **Bio**：简介与格言，支持折叠/展开 +- **Stats**：编程年限、开源项目数、关注者 +- **MBTI**：人格代码、名称与四元素标签（白天实色高对比；夜间渐变微光） +- **Tech Universe**：PC 3D 标签球；移动端三行滚动标签 +- **Interests**：两列卡片，圆角玻璃态，白天清爽、夜间半透明深色 +- **Open Source**：GitHub 仓库列表，星标与分支信息 +- **Latest Posts**：RSS 文章列表，标题/日期/分类 +- **Comments**：Artalk 评论区域，桌/移端响应式优化 -## 🛠️ 部署 +## ⚙️ 技术栈与工程细节 + +- **前端技术**：原生 JS、CSS 与 HTML，无框架依赖 +- **评论系统**：Artalk 评论组件（HTTPS 环境启用；本地或非 HTTPS 显示关闭提示） +- **数据获取**：GitHub REST API 拉取用户与仓库信息（写缓存前字段精简） +- **内容聚合**：RSS 解析通过 DOMParser，失败时降级本地 JSON 或默认数据 +- **交互体验**：骨架加载与淡入动画、移动端可拖拽悬浮工具、ARIA 辅助属性 + +## 🚀 快速开始 -1. 克隆项目到本地： ```bash -git clone https://github.com/lqbby/Tech-Home.git +# 克隆项目 +git clone https://github.com/listener-He/Honesty-Home.git + +# 进入项目目录 +cd Honesty-Home + +# 直接打开 HTML 文件预览 +open index.html +open about.html ``` -2. 修改配置文件 `js/config.js` 中的API密钥和个人信息 +站点配置位于 `js/config.js`，用于设置 GitHub 用户名、RSS 地址、缓存策略、Artalk 服务等。 -3. 部署到你喜欢的静态网站托管服务（GitHub Pages、Vercel、Netlify等） +## 📦 部署与自定义 -## 🙏 致谢 +请阅读《部署与自定义指南》获取详细说明： +- [DEPLOY.md](./DEPLOY.md) + +## 🙏 鸣谢与致敬 本项目在开发过程中参考和借鉴了以下开源项目： @@ -101,14 +94,32 @@ git clone https://github.com/lqbby/Tech-Home.git 向这些项目的作者表示诚挚的感谢！ +同时感谢以下开源项目的支持： + +- [Artalk](https://artalk.js.org/) - 评论系统 +- [Remix Icon](https://remixicon.com/) - 图标库 +- [Normalize.css](https://necolas.github.io/normalize.css/) 与 [BootCDN](https://www.bootcdn.cn/) - 页面基础与加速 +- [GitHub](https://github.com/) 与 [RSS](https://www.rssboard.org/) 生态 - 内容聚合支持 + ## 📄 许可证 -本项目采用 MIT 许可证，详情请参见 [LICENSE](LICENSE) 文件。 +本项目采用 [MIT](./LICENSE) 许可证。 -## 👤 作者 +## 👨‍💻 作者 **Honesty (HeHouHui)** - 博客: [blog.hehouhui.cn](https://blog.hehouhui.cn) - GitHub: [@listener-He](https://github.com/listener-He) -- 邮箱: hehouhui@foxmail.com +- 邮箱: [hehouhui@foxmail.com](mailto:hehouhui@foxmail.com) + +--- + +
+ +欢迎提出改进建议，或将该站点作为你的个人主页模板进行自定义与二次开发。 + +[![GitHub](https://img.shields.io/github/license/listener-He/Honesty-Home?color=blue)](https://github.com/listener-He/Honesty-Home/blob/main/LICENSE) +[![GitHub stars](https://img.shields.io/github/stars/listener-He/Honesty-Home)](https://github.com/listener-He/Honesty-Home/stargazers) + +
\ No newline at end of file diff --git a/css/about.css b/css/about.css index f80a109..19567cb 100644 --- a/css/about.css +++ b/css/about.css @@ -1329,41 +1329,7 @@ body { box-shadow: var(--glass-shadow); } -/* 添加Artalk评论组件的自定义样式 */ -.artalk-comment { - --at-color-main: var(--accent) !important; - --at-color-font: var(--text-primary) !important; - --at-color-meta: var(--text-secondary) !important; - --at-color-border: rgba(128, 128, 128, 0.1) !important; - --at-color-bg: var(--glass-bg) !important; - --at-color-bg-grey: rgba(128, 128, 128, 0.05) !important; - --at-color-bg-hover: rgba(128, 128, 128, 0.1) !important; - --at-color-bg-light: var(--glass-bg) !important; - --at-color-shadow: var(--glass-shadow) !important; -} - -[data-theme="night"] .artalk-comment { - --at-color-font: var(--text-primary) !important; - --at-color-meta: var(--text-secondary) !important; - --at-color-border: rgba(255, 255, 255, 0.08) !important; - --at-color-bg: var(--glass-bg) !important; - --at-color-bg-grey: rgba(255, 255, 255, 0.05) !important; - --at-color-bg-hover: rgba(255, 255, 255, 0.1) !important; - --at-color-bg-light: var(--glass-bg) !important; - --at-color-shadow: var(--glass-shadow) !important; -} - -.artalk-comment .atk-main-editor { - backdrop-filter: blur(var(--glass-blur)); - -webkit-backdrop-filter: blur(var(--glass-blur)); - border-radius: var(--radius) !important; -} - -.artalk-comment .atk-comment-wrap { - backdrop-filter: blur(var(--glass-blur)); - -webkit-backdrop-filter: blur(var(--glass-blur)); - border-radius: var(--radius) !important; -} +/* Artalk 组件（按容器选择器统一覆盖，移除无效类选择器） */ /* 确保评论区域适配白天/黑夜模式 */ #artalk-container { @@ -1375,6 +1341,10 @@ body { border: var(--glass-border); box-shadow: var(--glass-shadow); } +#artalk-container .atk-editor, #artalk-container .atk-editor textarea, #artalk-container .atk-editor input { + background: var(--glass-bg); + color: var(--text-primary); +} #artalk-container .atk-comment-wrap { background: var(--glass-bg); @@ -1383,6 +1353,17 @@ body { opacity: 0.9; transition: opacity 0.2s; } +#artalk-container .atk-dialog, #artalk-container .atk-layer .atk-dialog { background: var(--glass-bg); color: var(--text-primary); border: var(--glass-border); box-shadow: var(--glass-shadow); } +[data-theme="night"] #artalk-container .atk-main-editor, +[data-theme="night"] #artalk-container .atk-editor, +[data-theme="night"] #artalk-container .atk-comment-wrap, +[data-theme="night"] #artalk-container .atk-dialog, +[data-theme="night"] #artalk-container .atk-layer .atk-dialog { + background: rgba(30,30,35,0.55); + color: var(--text-primary); + border: 1px solid rgba(255,255,255,0.08); + box-shadow: var(--glass-shadow); +} #artalk-container.atk-mobile .atk-main-editor { padding: 12px; font-size: 0.95rem; } #artalk-container.atk-mobile .atk-comment-wrap { padding: 12px 14px; font-size: 0.95rem; } diff --git a/images/about-day.png b/images/about-day.png new file mode 100644 index 0000000..d8a87ea Binary files /dev/null and b/images/about-day.png differ diff --git a/images/about-night.png b/images/about-night.png new file mode 100644 index 0000000..16b93d0 Binary files /dev/null and b/images/about-night.png differ diff --git a/js/about.js b/js/about.js index 88ac6bc..432771e 100644 --- a/js/about.js +++ b/js/about.js @@ -69,7 +69,7 @@ class I18nManager { "nav.home": "首页", "nav.about": "关于", "nav.blog": "博客", - "status.online": "在线", + "status.online": "活跃", "profile.name": "Honesty", "profile.role": "Java后端 & AI探索者", "profile.location": "上海, 中国",