Hexo Theme Halunhaku - 现代简约博客主题
一个为 Hexo 博客系统设计的现代化、简约风格主题，专注于优雅的排版和出色的阅读体验。
✨ 主题特色
🎨 现代设计
- 简约美学：干净的界面设计，专注于内容本身
- 优雅排版：使用 Newsreader 字体，提供卓越的阅读体验
- 响应式布局：完美适配桌面、平板和移动设备
- 暗色模式：支持明暗主题切换（可配置）
📝 内容展示
- Markdown 完全支持：所有 Markdown 语法的精美渲染
- 代码高亮：支持多种编程语言的语法高亮
- 数学公式：支持 MathJax/KaTeX 数学表达式
- 任务列表：支持 GitHub 风格的任务列表
🚀 性能优化
- 快速加载：优化的 CSS 和 JavaScript
- SEO 友好：完整的 meta 标签和结构化数据
- 图片优化：自动图片懒加载和优化
🛠️ 安装指南
方法一：Git Clone（推荐）
cd your-hexo-site
git clone https://github.com/forhalunhaku/hexo-theme-halunhaku.git themes/halunhaku
方法二：下载压缩包
- 从 GitHub Releases 下载最新版本
- 解压到
themes/halunhaku目录
启用主题
在你的 Hexo 站点根目录的 _config.yml 中设置：
theme: halunhaku
⚙️ 配置说明
基础配置
复制主题配置文件：
cp themes/halunhaku/_config.example.yml themes/halunhaku/_config.yml
主要配置选项
# 站点信息
site:
title: "你的博客标题"
subtitle: "博客副标题"
description: "博客描述"
author: "作者名称"
# 导航菜单
menu:
首页: /
归档: /archives/
分类: /categories/
标签: /tags/
关于: /about/
# 社交链接
social:
GitHub: https://github.com/yourusername
Twitter: https://twitter.com/yourusername
Email: mailto:[email protected]
# 颜色方案
color_schemes:
home:
primary_color: "#0c7ff2"
secondary_color: "#f8fafc"
background_color: "#ffffff"
text_primary_color: "#1f2937"
text_secondary_color: "#6b7280"
border_color: "#e5e7eb"
post:
primary_color: "#0c7ff2"
secondary_color: "#f1f5f9"
background_color: "#ffffff"
text_primary_color: "#0f172a"
text_secondary_color: "#475569"
border_color: "#cbd5e1"
# 功能开关
features:
# 代码高亮
highlight: true
# 数学公式
math: false
# 图片懒加载
lazyload: true
# 阅读进度条
reading_progress: true
🎨 自定义样式
颜色主题
主题支持完全自定义的颜色方案。你可以为不同页面类型设置不同的颜色：
color_schemes:
# 首页颜色
home:
primary_color: "#your-color"
# ... 其他颜色
# 文章页颜色
post:
primary_color: "#your-color"
# ... 其他颜色
# 归档页颜色
archive:
primary_color: "#your-color"
# ... 其他颜色
自定义 CSS
在 themes/halunhaku/source/css/ 目录下创建 custom.css：
/* 自定义样式 */
.custom-class {
/* 你的样式 */
}
📝 写作指南
Markdown 支持
主题完全支持标准 Markdown 语法，并提供了增强的样式：
标题
# 一级标题
## 二级标题
### 三级标题
强调文本
**粗体文本**
*斜体文本*
~~删除线~~
==高亮文本==
列表
- 无序列表项 1
- 无序列表项 2
- 嵌套列表项
1. 有序列表项 1
2. 有序列表项 2
任务列表
- [x] 已完成任务
- [ ] 未完成任务
引用块
> 这是一个引用块
> 支持多行引用
代码块
```javascript
function hello() {
console.log("Hello, World!");
}
```
表格
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
链接和图片
[链接文本](https://example.com)
Front Matter
文章头部信息示例：
---
title: "文章标题"
date: 2024-01-01 12:00:00
categories:
- 分类名称
tags:
- 标签1
- 标签2
description: "文章描述"
cover: "封面图片URL"
---
🔧 高级功能
数学公式
启用数学公式支持：
# _config.yml
features:
math: true
使用示例：
行内公式：$E = mc^2$
块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
代码高亮
主题内置代码高亮支持，支持多种编程语言：
```python
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
```
警告框
使用特殊的 CSS 类创建警告框：
<div class="alert alert-info">
这是一个信息提示框
</div>
<div class="alert alert-warning">
这是一个警告提示框
</div>
<div class="alert alert-success">
这是一个成功提示框
</div>
<div class="alert alert-error">
这是一个错误提示框
</div>
📱 响应式设计
主题采用移动优先的响应式设计：
- 桌面端：≥1024px - 完整布局
- 平板端：768px-1023px - 适配布局
- 移动端：<768px - 紧凑布局
🔍 SEO 优化
内置 SEO 功能
- 自动生成 meta 标签
- 结构化数据支持
- Open Graph 标签
- Twitter Card 支持
- 自动生成 sitemap
SEO 配置
# _config.yml
seo:
# 默认描述
description: "你的博客描述"
# 关键词
keywords: "关键词1, 关键词2, 关键词3"
# 作者信息
author: "作者名称"
# 社交媒体
twitter_username: "your_twitter"
facebook_app_id: "your_facebook_app_id"
🚀 性能优化
内置优化
- CSS 和 JavaScript 压缩
- 图片懒加载
- 字体预加载
- 关键 CSS 内联
建议的优化
- 图片优化：使用 WebP 格式
- CDN 加速：使用 CDN 服务
- 缓存策略：配置适当的缓存头
- 压缩：启用 Gzip 压缩
🛠️ 开发指南
本地开发
# 克隆主题
git clone https://github.com/forhalunhaku/hexo-theme-halunhaku.git
# 安装依赖
cd hexo-theme-halunhaku
npm install
# 开发模式
npm run dev
文件结构
hexo-theme-halunhaku/
├── layout/ # 布局文件
│ ├── _partial/ # 部分模板
│ ├── index.ejs # 首页模板
│ ├── post.ejs # 文章页模板
│ └── ...
├── source/ # 静态资源
│ ├── css/ # 样式文件
│ ├── js/ # JavaScript 文件
│ └── images/ # 图片资源
├── scripts/ # Hexo 脚本
├── _config.yml # 主题配置
└── package.json # 依赖配置
自定义布局
创建自定义页面布局：
<!-- layout/custom.ejs -->
<%- partial('_partial/head') %>
<body>
<%- partial('_partial/header') %>
<main class="container mx-auto px-4 py-8">
<div class="prose prose-lg mx-auto">
<%- body %>
</div>
</main>
<%- partial('_partial/footer') %>
</body>
🤝 贡献指南
欢迎贡献代码！请遵循以下步骤：
- Fork 项目
- 创建功能分支：
git checkout -b feature/new-feature - 提交更改：
git commit -am 'Add new feature' - 推送分支：
git push origin feature/new-feature - 提交 Pull Request
代码规范
- 使用 2 空格缩进
- 遵循 ESLint 规则
- 添加适当的注释
- 确保响应式兼容性
📄 许可证
本主题基于 MIT 许可证开源。详见 LICENSE 文件。
🆘 支持与反馈
获取帮助
- 文档：查看本说明文档
- Issues：GitHub Issues
- 讨论：GitHub Discussions
常见问题
Q: 如何更改主题颜色？
A: 在 _config.yml 中修改 color_schemes 配置。
Q: 如何添加自定义页面？
A: 在 Hexo 根目录运行 hexo new page "page-name"，然后在主题配置中添加菜单链接。
Q: 如何启用数学公式？
A: 在主题配置中设置 features.math: true。
Q: 如何自定义字体？
A: 在自定义 CSS 中覆盖 font-family 属性。
🎉 致谢
感谢所有为这个主题做出贡献的开发者和用户！
特别感谢：
- Hexo - 优秀的静态博客框架
- Tailwind CSS - 实用的 CSS 框架
- Google Fonts - 优美的字体资源
Hexo Theme Halunhaku - 让写作变得更加优雅 ✨
如果你喜欢这个主题，请给我们一个 ⭐ Star！