# theme-fucheng **Repository Path**: lfc_6666/theme-fucheng ## Basic Information - **Project Name**: theme-fucheng - **Description**: 基于Halo-Theme-Hao二次开发的博客主题 - **Primary Language**: Unknown - **License**: GPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-10-27 - **Last Updated**: 2025-11-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Halo Theme Hao - 自定义版

![Halo Version](https://img.shields.io/badge/Halo-2.20%2B-blue) ![Theme Version](https://img.shields.io/badge/Version-1.6.5-brightgreen) ![License](https://img.shields.io/badge/License-GPL--3.0-orange) 一个基于 [Halo-Theme-Hao](https://github.com/chengzhongxue/halo-theme-hao) 的深度定制版本，参考 Butterfly 和 Heo 主题设计。

## ✨ 特性 ### 核心功能 - 🎨 **现代化设计** - 精美的渐变配色和动画效果 - 🌓 **深色模式** - 完美适配浅色/深色主题 - 📱 **响应式布局** - 完美支持各种屏幕尺寸 - ⚡ **性能优化** - PJAX 无刷新加载，快速流畅 - 🎭 **丰富动效** - 鼠标特效、粒子背景、平滑过渡 ### 自定义功能 - 🌌 **星空入口页面** - Three.js 渲染的 3D 粒子星云，交互式瞬间展示 - 📢 **公告栏小部件** - 自适应内容高度的侧边栏公告卡片 - 📝 **优化文章列表** - 重构的文章卡片布局，支持对角切图效果 - 🎯 **紧凑型简介卡片** - 优化的个人简介展示，更加精致紧凑 - ⏰ **归档时间线** - 美化的时间线归档页面，带图片预览 - ✨ **鼠标星星拖尾** - 跟随鼠标的星星特效 ## 📸 截图预览 ### 星空入口页面 - 3D 粒子星云背景（基于 Three.js） - 可交互的金色粒子，每个粒子对应一条瞬间 - 支持鼠标拖拽旋转视角 - 点击粒子弹窗显示瞬间内容 ### 公告栏小部件 - 暖橙色渐变主题 - 动态摇晃铃铛图标 - 支持 HTML 富文本内容 - 可选的操作按钮 - 完全自适应内容高度 ### 文章列表优化 - 左右交替的对角切图布局 - 悬停时图片放大和卡片上浮效果 - 显示文章元信息（日期、浏览量、分类等） - 智能提取文章摘要（优先提取"总结"部分） ## 🚀 快速开始 ### 环境要求 - Halo 版本 >= 2.20.0 - 推荐使用最新稳定版 Halo ### 安装步骤 1. **下载主题** ```bash git clone https://gitee.com/lfc_6666/theme-fucheng ``` 2. **安装到 Halo** - 方式一：直接将主题文件夹放入 Halo 工作目录的 `themes` 文件夹 - 方式二：在 Halo 后台【外观】→【主题】→【安装】上传主题 ZIP 包 3. **启用主题** - 进入 Halo 后台 - 【外观】→【主题】 - 找到 "Hao" 主题，点击【启用】 4. **配置主题** - 点击【主题设置】 - 根据需要配置各项参数 ## 📝 自定义功能使用指南 ### 1. 星空入口页面 #### 创建页面 1. 进入 Halo 后台【页面】→【新建独立页面】 2. 选择【星空入口页面模版】 3. 填写页面信息： - 标题：建议使用"星空入口"或"NOVA" - 路径：建议使用 `/space` 4. 发布页面 #### 工作原理 - 使用 Three.js 渲染 3D 粒子星云 - 自动从瞬间插件读取数据 - 金色粒子数量 = 瞬间总数（一一对应） - 点击金色粒子查看对应的瞬间内容 #### 注意事项 - 需要安装并启用【瞬间插件】 - 建议瞬间数量在 10-50 条之间，效果最佳 - 页面加载时自动初始化，无需手动配置 ### 2. 公告栏小部件 #### 添加到侧边栏 1. 进入 Halo 后台【外观】→【主题】→【主题设置】 2. 找到【侧栏】→【侧边栏内容】 3. 在需要显示的位置（如首页）添加小部件 4. 在下拉菜单中选择【公告栏】 #### 配置内容在【侧栏】→【公告栏】中配置： **基本配置** - **公告标题**：顶部显示的标题（默认：站点公告） - **公告内容**：支持 HTML 的富文本内容 **按钮配置**（可选） - **显示按钮**：选择是否显示底部按钮 - **按钮文字**：按钮上的文字（如"了解更多"） - **按钮链接**：点击跳转的链接 #### 内容示例 **简单公告** ```html

欢迎访问本站！🎉

``` **带链接的公告** ```html

📢 重要通知

网站将于本周六进行维护升级。

详情请查看维护公告

``` **带样式的公告** ```html

🎊 新年快乐！

感谢大家一年来的支持与陪伴！

新的一年，让我们一起进步！💪

``` #### 特点 - ✅ 自适应内容高度，无留白 - ✅ 支持 HTML 富文本 - ✅ 深色模式完美适配 - ✅ 响应式布局 - ✅ 动态铃铛图标动画 ### 3. 文章列表布局 #### 自动应用 - 首页文章列表 - 分类页面 - 标签页面 #### 特点 - 左右交替的对角切图效果 - 悬停放大和上浮动画 - 显示文章元信息 - 智能提取摘要（优先"总结"部分） - 完全响应式适配 #### 摘要提取逻辑 1. 优先查找"总结"关键词后的内容 2. 其次查找"小结"关键词后的内容 3. 再次查找"Summary"关键词后的内容 4. 最后使用文章摘要前 100 字符 ### 4. 归档时间线 #### 访问方式 - 路径：`/archives` - 菜单：【文章】→【归档】 #### 特点 - 垂直时间线展示 - 月份折叠面板 - 图片卡片预览 - 优雅的展开/收起动画 ### 5. 个人简介卡片 #### 显示位置 - 侧边栏（可在主题设置中配置） #### 优化内容 - 头像：85px → 70px（更紧凑） - 减小各项间距和边距 - 移除固定最小高度（完全自适应） - 总体高度减少约 20% ## 🔧 开发相关 ### 技术栈 - **模板引擎**：Thymeleaf - **前端框架**：原生 JavaScript + jQuery - **3D 渲染**：Three.js - **动画库**：GSAP - **UI 组件**：自定义组件 - **样式预处理**：CSS ### 项目结构 ``` theme-hao/ ├── templates/ # 模板文件 │ ├── assets/ # 静态资源 │ │ ├── css/ # 样式文件 │ │ │ ├── post-list-layout.css # 文章列表样式 │ │ │ ├── space-entrance.css # 星空页面样式 │ │ │ └── archive-timeline.css # 归档页面样式 │ │ ├── js/ # JavaScript 文件 │ │ │ ├── halo.js # Halo 相关功能 │ │ │ ├── heo.js # 主题核心功能 │ │ │ └── mouse-star.js # 鼠标特效 │ │ ├── libs/ # 第三方库 │ │ ├── images/ # 图片资源 │ │ └── zhheo/ # 自定义样式 │ ├── modules/ # 模块组件 │ │ ├── widgets/ # 小部件 │ │ │ └── aside/ # 侧边栏小部件 │ │ │ ├── announcement.html # 公告栏 │ │ │ ├── profile-simple.html # 简化个人简介 │ │ │ └── ... │ │ ├── post-list.html # 文章列表 │ │ └── aside.html # 侧边栏 │ ├── page_space.html # 星空入口页面 │ ├── index.html # 首页 │ ├── archives.html # 归档页面 │ └── ... ├── settings.yaml # 主题设置配置 ├── theme.yaml # 主题元数据 ├── annotation-setting.yaml # 注解设置 ├── LICENSE # 开源协议 └── README.md # 说明文档 ``` ### 自定义开发 #### 修改样式 1. 找到对应的 CSS 文件 2. 修改相关样式 3. 清除浏览器缓存查看效果 #### 添加新功能 1. 在 `templates/modules/widgets/aside/` 创建新的小部件 2. 在 `settings.yaml` 中添加配置项 3. 在 `templates/modules/aside.html` 中引用 #### 调试技巧 - 使用浏览器开发者工具检查元素 - 查看控制台日志排查 JavaScript 错误 - 使用 Halo 开发者模式实时预览 ## 📋 更新日志 ### v1.6.5 (2025-11-03) - ✨ **新增**：公告栏小部件（自适应内容高度） - ✨ **新增**：星空入口页面（Three.js 3D 粒子星云） - 🔧 **优化**：文章列表布局重构（对角切图效果） - 🔧 **优化**：个人简介卡片紧凑化（减少 20% 高度） - 🔧 **优化**：归档页面时间线增强（图片卡片预览） - 🐛 **修复**：首页文章列表兼容性问题 - 🐛 **修复**：分类和标签页面样式统一 ### v1.6.4 (2025-11-02) - 🔧 **重构**：首页布局优化 - ✨ **新增**：鼠标星星拖尾特效 ### v1.6.3 (2025-10-31) - 🔧 **重构**：归档页面重构 - 🐛 **修复**：首页显示问题 - ✨ **新增**：星星粒子背景特效 ### v1.6.2 (2025-10-28) - 📝 **文档**：添加开源协议 ### v1.6.1 (2025-10-27) - 🎉 **初始化**：项目初始提交 ## 🤝 贡献欢迎提交 Issue 和 Pull Request！ ### 贡献指南 1. Fork 本仓库 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 提交 Pull Request ### 代码规范 - 遵循项目现有代码风格 - 添加必要的注释 - 测试新功能是否正常工作 - 更新相关文档 ## 📄 开源协议本项目基于 [GPL-3.0](LICENSE) 协议开源。 ## 🙏 致谢本主题基于以下优秀项目： - [Halo](https://github.com/halo-dev/halo) - 强大的开源建站工具 - [Halo-Theme-Hao](https://github.com/chengzhongxue/halo-theme-hao) - 原始主题 - [Hexo-Theme-Butterfly](https://github.com/jerryc127/hexo-theme-butterfly) - 设计参考 - [Hexo-Theme-Heo](https://github.com/zhheo/hexo-theme-heo) - 设计参考 - [Three.js](https://threejs.org/) - 3D 图形库特别感谢： - **程序员小航** - 原始主题作者 - **困困鱼** - 原始主题作者 - **Carol** - 原始主题作者 ## 📮 联系方式 - 作者：派星星 - 博客：chengquan.icu(后续域名转chengquan.online) - Email：2987815891@qq.com ## ⭐ Star History 如果这个项目对你有帮助，欢迎 Star ⭐️ ---

Made with ❤️ by 城权 [Halo](https://www.halo.run/) | [主题商店](https://www.halo.run/store/apps?type=THEME)