本教程旨在提供一套精确、详细、可直接操作的 Hexo 静态博客搭建流程。如果您是技术小白，请严格按照以下步骤操作，您将成功拥有一个高效、美观且维护成本极低的个人网站。
特别注意事项：
1.以下内容默认你拥有国际互联网（Global Internet），区分于GFW 局域网（Internet in Mainland China），如果你没有办法连接国际互联网，你需要确认你的网络至少可以连接上GitHub；如果你实在无法访问GitHub，欢迎使用我的GitHub文件传输网站拉取你需要的内容
2.如果你不准备部署到公网上/无法连接GitHub，可以跳过相应的步骤（仅在本机内网上运行即可），GitHub主要作为中间层用于数据备份和Cloudflare（以下简称CF）同步

🚀 目录

1. Hexo 博客框架深入解读
2. 环境准备与 Hexo 基础安装（Windows/Mac）
   2.1. Node.js 和 Git 必备软件安装
   2.2. GFW 局域网环境加速配置
   2.3. Hexo 命令行工具 (CLI) 安装
   2.4. Git 密钥配置与 GitHub 仓库准备
3. Hexo 站点初始化与文件结构详解
   3.1. 初始化博客项目（hexo init）
   3.2. 本地预览运行（hexo server）
   3.3. 核心文件结构与作用
4. Hexo 内容创作与组织
   4.1. Front Matter（文章元数据）的使用与实例
   4.2. 文章、页面与草稿的创建与发布
   4.3. Scaffolds（脚手架）模板定制与实例
   4.4. Tags（标签）与 Categories（分类）组织
5. Hexo 进阶功能：Tag Plugins 与资源管理
   5.1. Tag Plugins（标签插件）进阶用法与实例
   5.2. Asset Folders（资源文件夹）管理本地资源
   5.3. 免费无限空间图床方案：Cloudflare Pages + Telegram Bot
6. 主题安装、配置与美化
   6.1. 主题的安装与启用（以 Git Clone 和 NPM 为例）
   6.2. 站点全局配置（_config.yml）与路径优化
   6.3. 主题个性化配置与功能开启实例（搜索、置顶、特效）
   6.4. 网站模板系统进阶（Layouts, Partials, Variables, If/For Loops, Helpers, Data Files）
7. 博客部署与持续维护
   7.1. GitHub Pages 部署流程
   7.2. Cloudflare Pages/Zeabur 部署加速
   7.3. Hexo 常用命令总结与部署流程

Ⅰ. Hexo 博客框架深入解读

Hexo 是一个快速、简单且强大的博客框架，基于 Node.js 运行，属于静态网站生成器 (Static Site Generator) 的范畴。它能够将博客内容（主要使用 Markdown 编写）转换成纯静态的 HTML、CSS 和 JavaScript 文件，从而实现高效的网页加载和管理。

核心特性

• 静态网站生成：Hexo 通过解析 Markdown 文件，生成静态的 HTML 页面，提供了极快的加载速度。通过这种方式，您不必担心动态网站的性能瓶颈。

• 基于 Node.js：Hexo 是用 Node.js 构建的，意味着它可以利用 Node.js 的高性能和丰富的生态，极大提升开发效率。

• 支持 Markdown 编写：Hexo 默认支持 Markdown 格式的内容书写，用户可以专注于内容创作，而无需处理复杂的 HTML 和 CSS。

• 快速部署与托管：Hexo 网站是纯静态文件，不需要后台数据库或复杂的服务端支持。你可以将博客托管在免费的平台如 GitHub Pages 或 Cloudflare Pages 上，成本几乎为零。

优势

• 极致的加载速度：由于 Hexo 是生成静态网页，页面不需要实时计算，所有内容都已经预先渲染。这样的架构使得网站在访问时非常迅速，尤其在使用 CDNs 进行全球加速时，速度优势尤为明显。

• 简化的网站管理：相较于动态博客系统如 WordPress，Hexo 不依赖于复杂的数据库管理和后台配置，极大减少了维护的复杂性。

• 无需编写 HTML/CSS：即使你对 HTML 和 CSS 不熟悉，Hexo 社区提供了大量精美的 主题，用户可以通过选择和配置主题来快速搭建个人博客。

• 零成本的托管：Hexo 是完全静态的，因此部署和托管的成本几乎为零。你可以使用 GitHub Pages、Netlify 或 Cloudflare Pages 等平台进行免费托管，且这些平台提供强大的全球分发网络，进一步提升访问速度。

生态系统

• 主题和插件丰富：Hexo 拥有庞大的主题库和插件生态，目前有超过 324 个主题 和 200 多个插件，涵盖了从 SEO 优化、社交分享到高级定制的各个方面。用户可以根据自己的需求选择合适的主题，并通过插件进行功能拓展。

• 灵活的自定义配置：Hexo 的配置文件（_config.yml）简单易懂，用户可以轻松自定义网站设置、主题选项和插件配置，几乎可以满足任何需求。

• 支持多种扩展功能：通过插件，你可以为博客添加评论系统、广告管理、分析工具等，甚至可以与第三方服务集成，增强网站的互动性和功能性。

成本

• 低成本维护：Hexo 作为一个纯静态网站生成器，几乎没有运行成本。你不需要为数据库或服务器支付额外费用。通过使用免费托管平台（如 GitHub Pages、Netlify 等），你可以大大节省托管费用。

• 高效的内容管理：与传统的 CMS（如 WordPress）相比，Hexo 的管理方式简单而直观，博客的内容只需通过 Git 进行版本控制和更新，减少了系统维护的复杂度。

总结

Hexo 是一个非常适合个人博客、技术文档以及小型网站的框架。其轻量、快速、简易的特点，使得它成为了广大开发者和技术爱好者的首选。无论是部署、维护还是自定义，都提供了足够的灵活性和便利，使其成为搭建静态网站的理想工具。

Ⅱ. 环境准备与 Hexo 基础安装（Windows/Mac）

在开始使用 Hexo 构建静态博客之前，必须完成基础运行环境的配置。本章将详细介绍 Node.js、Git 等必备软件的安装步骤，以及 Hexo 框架的初始化过程。

2.1. Node.js 和 Git 必备软件安装

下表列出了搭建 Hexo 博客系统所需的核心软件及其作用：

安装验证详细步骤：

1. 验证 Node.js 安装

   • Windows：按 Win + R 输入 cmd 打开命令提示符
   • Mac：打开”终端”应用程序
   • 分别执行以下命令，若显示版本号则说明安装成功：

     1 2	node -v # 预期输出示例：v22.18.0 npm -v # 预期输出示例：10.9.3

2. 验证 Git 安装
   在终端中执行：

   1	git --version # 预期输出示例：git version 2.51.0

3. 配置 Git 用户信息（养成好习惯）

   1 2	git config --global user.name "您的用户名" git config --global user.email "您的邮箱@example.com"

2.2. 推荐安装 nvm 管理 Node.js 版本 （不强制要求）

nvm (Node Version Manager) 是一个高效的 Node.js 版本管理工具，特别适用于需要同时维护多个项目的开发者。

Windows 系统安装 nvm：

1. 下载安装包

   • 访问 nvm-windows 官方 GitHub
   • 下载最新版本的 nvm-setup.exe 安装文件

2. 安装注意事项

   • 安装前请卸载已存在的 Node.js 版本
   • 安装路径不要包含空格和特殊字符
   • 建议使用默认安装路径 C:\Users\[用户名]\AppData\Roaming\nvm

3. 基础使用命令

   1 2 3 4 5 6 7 8 9 10 11

   # 查看所有可安装的 Node.js 版本 nvm list available # 安装指定版本的 Node.js（推荐使用 LTS 版本） nvm install 22.18.0 # 使用已安装的特定版本 nvm use 22.18.0 # 查看已安装的所有版本 nvm list

macOS 系统安装 nvm：

1. 通过 Homebrew 安装

   1	brew install nvm

2. 或使用安装脚本

   1	curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

版本兼容性说明： 使用 Node.js 20 以上版本 可能会导致部分 Hexo 插件无法正常运行，建议选择 Node.js 16-18 的 LTS 版本 以确保最佳兼容性。

2.2. GFW 局域网环境加速配置（国际互联网 不需要配置加速环境）

为避免 npm 安装卡顿，建议更换镜像源：

• 华为云镜像源配置示例：

  1	npm config set registry https://repo.huaweicloud.com/repository/npm/

• 阿里/淘宝镜像源 (CNPM) 配置示例：

  1 2 3

  # 第一次安装 cnpm npm install -g cnpm --registry=https://registry.npmmirror.com # 后续安装时，将 npm 替换为 cnpm 即可

2.3. Hexo 命令行工具 (CLI) 安装

• 安装命令：

  1	npm install hexo-cli -g

  • 权限提示： 如果在 Mac 上遇到权限问题，可能需要使用 sudo 前缀；在 Windows 上，可能需要以管理员模式运行命令行。
• 验证安装：

  1 2	hexo -v # 示例输出：hexo-cli: 4.3.2

2.4. Git 密钥配置与 GitHub 仓库准备 （如果你不准备部署在公网上/无法访问GitHub可以跳过该操作）

为了后续将博客部署到 GitHub Pages，需要配置 Git 密钥并创建 Public 仓库。

配置 Git 用户信息与密钥

1. 打开 Git Bash 或命令行工具。
2. 配置用户信息（使用您的 GitHub 信息）：

   1 2	git config --global user.name "[您的 GitHub 用户名]" git config --global user.email "[您的 GitHub 邮箱]"

3. 检查配置： git config --list。
4. 生成公钥和私钥：

   1 2 3

   ssh-keygen -t rsa -C "[您的 GitHub 邮箱]" # 推荐使用更加安全的 rsa # 建议一路回车使用默认设置，除非你有特殊需求需要对密钥进行加密

5. 添加到 GitHub： 在 C:\Users\[当前用户名]\.ssh\ 找到 id_rsa.pub（公钥）文件，复制其全部内容，添加到 GitHub 的 设置 (Settings) > SSH and GPG keys 中。

创建 GitHub 仓库

• 目的： 存放博客生成的静态文件。
• 命名要求： 仓库名称必须遵循严格的格式：[您的 GitHub 用户名].github.io，例如我的GitHub名称为shijianus则填写 shijianus.github.io。
• 设置： 创建时选择公开 (Public) 仓库，后续你也可以修改为 私密（Private）。

Ⅲ. Hexo 站点初始化与文件结构详解

3.1. 初始化博客项目（hexo init）

选择/创建一个本地文件夹作为博客源码的存放位置。

• 操作过程： 在该文件夹内打开命令行或 Git Bash（右键选择在终端打开或Git Bash）。
  • 命令示例：

    1 2	hexo init [您的博客文件夹名称] # 示例：hexo init shijianus-blog

  • 提示： 推荐在科学环境下安装 Hexo，否则可能耗时较久。
• 进入目录并安装依赖： 即使初始化命令拉取了文件，依赖包的安装也可能失败。请手动进入新创建的文件夹，并执行安装命令：

  1 2 3

  cd [您的博客文件夹名称] npm install # 或 cnpm install

3.2. 本地预览运行（hexo server）

您可以使用 Hexo 内置的本地服务器进行预览。

• 启动命令： 在项目根目录下运行：

  1 2 3

  hexo server # 简写：hexo s # 最后应该出现 INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

• 访问： 在浏览器中输入 http://localhost:4000 即可查看默认的 Hexo 网站。
• 停止服务器： 在命令行窗口按下 Ctrl + C。

3.3. 核心文件结构与作用

Ⅳ. Hexo 内容创作与组织

Hexo 的内容主要通过 Markdown 文件和 Front Matter（元数据）来定义。

4.1. Front Matter（文章元数据）的使用与实例

Front Matter 是位于 Markdown 文件顶部、由两条 --- 包裹的 YAML 或 JSON 格式的元数据，用于定义文章的属性。

• 默认字段： title (标题), date (日期), tags (标签) 等。

• 创建文章 A 示例文章 A.md

  1 2 3 4 5 6 7 8

  --- title: Unit tags: --- --- This is an example. ---

• 操作实例： 修改文章 A 的 Front Matter 会立即影响主题的渲染。

  1. 将 title 从 a 更改为 a is title。
  2. 将 date 从 2017-09-13 更改为 2017-09-14。
  3. 效果： 网站上的文章标题和日期会同步改变，说明主题使用了 Front Matter 的信息。
  4. 在 Front Matter 中添加了 tags: [tag 1, tag 2, tag 3]，主题卡片也随之显示了这些标签。

4.2. 文章、页面与草稿的创建与发布

• 预览草稿实例：
  • 首先创建草稿 B：hexo new draft B。
  • 必须关闭服务器后，运行以下命令才能预览到草稿：

    1	hexo server --draft

• 发布草稿实例：
  • 当草稿 B 准备发布时，运行：

    1 2	hexo publish B # Hexo 会自动将其从 _drafts 移动到 _posts 文件夹。

• 默认布局控制实例：
  • 在 _config.yml 文件的 writing 部分，可以设置 default_layout: [post/draft/page]。
  • 示例： 将 default_layout 设为 draft，则当您只运行 hexo new E 时，Hexo 会自动将其创建为草稿 E，而非文章。

4.3. Scaffolds（脚手架）模板定制与实例

Scaffolds 位于 scaffolds/ 文件夹，是创建新内容时的默认模板。

• 文件类型： 默认包含 draft.md、page.md 和 post.md。
• 定制 Front Matter 实例： 如果您希望新建的草稿默认包含作者信息：
  1. 打开 scaffolds/draft.md 文件。
  2. 在 Front Matter 中添加：

     1	author: shijianus

  3. 效果： 运行 hexo new draft D，新建的 D.markdown 文件将自动包含 author: shijianus 字段。
• 占位符： Scaffolds 使用 { { title } } 和 { { date } } 作为占位符，在创建文件时自动填充。
• 自定义内容实例： 您可以在 Scaffold 文件中添加默认的 Markdown 内容（例如，每篇文章末尾的固定信息），每次创建新文章时会自动包含。
• 创建自定义 Scaffold 实例： 创建 scaffolds/draft.md 文件，然后使用 hexo new draft F 命令，使用不同的模板布局。
• 提供几个我的脚手架：
  1. page.md 示例：

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

     --- title: {{ title }} #【必需】页面标题 date: {{ date }} #【必需】页面创建日期 type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置 updated: #【可选】页面更新日期 comments: #【可选】显示页面评论模块(默认 true) description: #【可选】页面描述 keywords: #【可选】页面关键字 top_img: https://drawing.shijian.qzz.io/file/AgACAgEAAyEGAAS6jkJbAAMKaPH6WxMi3NluwmC7rgICG7WeCZkAAgQLaxv7c5BH8Vzb_dwm3uABAAMCAAN3AAM2BA.png #【可选】页面顶部图片 mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false) katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false) aside: #【可选】显示侧边栏 (默认 true) aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置 highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置) top_single_background: #【可选】部分页面的顶部模块背景图片 ---

  2. post.md 示例：

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

     --- title: {{ title }} #【必需】页面标题 date: {{ date }} #【必需】页面创建日期 updated: #【可选】页面更新日期 tags: #【可选】文章标签 categories: #【可选】文章分类 keywords: #【可选】文章关键字 description: #【可选】文章描述 top: # 1 置顶 top_img: #【可选】文章顶部图片 comments: #【可选】显示文章评论模块(默认 true) cover: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空) toc: #【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置) toc_number: #【可选】显示 toc_number(默认为设置中 toc 的 number 配置) toc_style_simple: #【可选】显示 toc 简洁模式 copyright: #【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置) copyright_author: #【可选】文章版权模块的文章作者 copyright_author_href: #【可选】文章版权模块的文章作者链接 copyright_url: #【可选】文章版权模块的文章作者链接 copyright_info: #【可选】文章版权模块的版权声明文字 mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false) katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false) aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置 highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置) aside: #【可选】显示侧边栏 (默认 true) swiper_index: 10 #【可选】首页轮播图配置 index 索引，数字越小越靠前 top_group_index: 10 #【可选】首页右侧卡片组配置, 数字越小越靠前 ai: #【可选】文章ai摘要 background: "#fff" #【可选】文章主色，必须是16进制颜色且有6位，不可缩减，例如#ffffff 不可写成#fff ---

4.4. Tags（标签）与 Categories（分类）组织

标签和分类用于组织内容，Hexo 会自动生成索引页。

• 添加方式： 在文章的 Front Matter 中添加 tags 或 categories 数组。
• Tags 实例：
  • 文章 A 设 tags: [tag 1, tag 2, tag 3]；文章 B 设 tags: [tag 1]；文章 C 设 tags: [tag 3]。
  • 效果： Hexo 自动生成 /tags/tag 1 页面，点击后会列出所有带有该标签的文章（A 和 B）。
• 多级分类实例：
  • 在 Front Matter 中使用嵌套结构：categories: [cat 1, cat 1.1]。
  • 效果： Hexo 会生成多级目录结构，例如 /categories/cat 1/cat 1.1。

Ⅴ. Hexo 进阶功能：Tag Plugins 与资源管理

5.1. Tag Plugins（标签插件）进阶用法与实例

Tag Plugins 是添加到 Markdown 文件中的代码片段，可渲染复杂内容，避免编写 HTML。

• 语法结构： 使用双层花括号和百分号 {% %}。
• 代码块插入实例：
  • 使用双标签结构：{% codeblock %}` 和 `{% endcodeblock %}。
  • 示例代码：

    1 2 3 4

    {% codeblock lang:javascript %} alert("Hello World"); var myVar = "hello world"; {% endcodeblock %}

  • 效果： lang:javascript 参数提供语法高亮和样式化。
• YouTube 视频嵌入实例：
  • 只需提供 YouTube 视频的 ID。
  • 示例操作： 从 YouTube 分享/嵌入代码中提取 ID，并在文章 Front Matter 模板中添加该字段。

    1	{% youtube YouTube ID %}

  • 效果： 视频会成功嵌入到文章中，并实现自适应缩放。

5.2. Asset Folders（资源文件夹）管理本地资源

Asset Folders 用于存储与单个文章相关的静态资源（如图片、PDF）。

• 步骤一：开启配置（必须）：
  1. 打开 Hexo 根目录下的全局配置文件 _config.yml。
  2. 滚动到 writing 部分，设置 post_asset_folder: true。
• 步骤二：创建资源文件夹： 运行 hexo new A 时，Hexo 会在 source/_posts/ 下创建 A.markdown 文件和同名 A 文件夹。
• 步骤三：引用资源（示例）：
  1. 将静态资源（如 hexo.jpg）放入资源文件夹 A 中。
  2. 在 A.markdown 文件中，使用 Hexo 标签引用：

5.3. 免费无限空间图床方案：Cloudflare Pages + Telegram Bot

此方案利用 CF Pages 和 Telegram 频道，实现免费无限空间的图床功能。

• 前提： 原来的 Telegraph API 已关闭，需要切换到 Telegram 频道。
• 操作过程（零度解说方案）：
  1. Bot 和频道准备：
     • 创建新的 Telegram 频道（公开/私密）。
     • 搜索 @BotFather，使用 /newbot 创建机器人，用户名必须以 bot 结尾。保存 Bot Token。
     • 将 Bot 添加为频道管理员。
  2. 获取频道 ID：
     • 搜索 @get_id_bot。
     • 将频道中的任意消息转发给 @get_id_bot。
     • Bot 返回的 ID 带有负号，必须保存。
  3. CF Pages 部署： Fork 图床开源仓库 (TF-Image)，在 CF Pages 中连接 GitHub 仓库部署。
  4. 配置环境变量： 在 CF Pages 设置 > 变量和机密中添加：
     • TELEGRAM_BOT_TOKEN：填写 Bot Token。
     • CHANNEL_ID：填写频道 ID（务必包含负号，例如 -123456789）。
  5. 重新部署 使变量生效。

Ⅵ. 主题安装、配置与美化

Hexo 默认主题为 Landscape，您可以安装其他主题进行美化。

6.1. 主题的安装与启用（以 Git Clone 和 NPM 为例）

安装主题（示例：Git Clone Alpha Dust）

1. 访问 Hexo 官方主题页面 (hexo.io/themes)，选择您喜欢的主题（如 Alpha Dust）。
2. 进入主题的 GitHub 页面，复制 Git 地址。
3. 在 Hexo 根目录下，运行 git clone 命令：

   1 2	git clone [主题 Git 地址] themes/alpha-dust # 示例：主题文件被下载到 themes/alpha-dust 文件夹。

安装主题（示例：NPM 安装 Anzhiyu 及其依赖）

1. 在 Hexo 根目录下，安装主题：

   1	npm install hexo-theme-anzhiyu

2. 安装主题所需的渲染器依赖：

   1	npm install hexo-renderer-pug hexo-renderer-stylus --save

启用主题

1. 修改 Hexo 根目录下的全局配置文件 _config.yml。
2. 设置 theme 变量：

   1	theme: anzhiyu # 或 alpha-dust

3. 提示： 每次修改 _config.yml 文件后，必须重启 Hexo Server 才能看到新主题效果。

主题配置分离（重要操作）

为方便主题升级，建议将主题的配置文件复制到 Hexo 根目录进行覆盖配置。

• 示例操作： 复制 themes/anzhiyu/_config.yml 到 Hexo 根目录，并重命名为 _config.anzhiyu.yml。后续所有主题配置都在这个根目录下的文件中进行修改，这会覆盖主题默认配置。

6.2. 站点全局配置（_config.yml）与路径优化

• 站点信息配置实例：

  1 2 3 4

  title: shijian 的演示博客 subtitle: test author: shijianus language: zh-CN

• 文章路径优化实例（Permalinks）： 修改 permalink 字段以优化文章 URL 结构。
  • 示例： 将默认路径注释掉，修改为简洁结构。

    1 2	# permalink: :year/:month/:day/:title/ permalink: wenzhang/:title/

  • 效果： 文章链接将变为 /wenzhang/这是另一篇博文。

6.3. 主题个性化配置与功能开启实例

以下操作在主题配置文件（例如 _config.anzhiyu.yml）中进行。

• 创建 Tags/Categories 页面并配置菜单：

  1. 生成页面文件：

     1 2	hexo new page tags hexo new page categories

  2. 配置菜单： 在主题配置文件中找到 menu 配置项，添加导航链接。
     • 示例（创建警告页并添加到导航）：
       • 运行 hexo new page SOS 创建警告页。
       • 在主题配置中添加：警告页: /sos/。
       • 添加站外链接实例： 博客本体: https://your.blog.com/ || fas fa-feather。

• 文章置顶功能实例：

  1. 安装插件：

     1	npm install hexo-generator-index-pin --save

  2. 使用： 在文章 Front Matter 中添加 top 字段并赋予数字（数字越大优先级越高）。

     1 2 3 4

     --- title: 这是置顶文章 top: 1 ---

• 开启本地搜索功能实例：

  1. 安装插件：

     1	npm install hexo-generator-search --save

  2. 启用： 在主题配置文件中，将本地搜索的开关设置为 true。

• 放置网站验证文件实例（示例）：

  • 将静态验证文件（例如 Google 广告验证文件 ADS.txt）直接放在 Hexo 根目录的 source 文件夹下。
  • 效果： 可通过 URL /ADS.txt 访问，例如 http://localhost:4000/ADS.txt。

• 鼠标烟火特效实例：

  • 在主题配置文件中找到相应配置项（如 烟火特效），将其设置为 true。
  • 效果： 刷新网站，点击鼠标会放烟花。

6.4. 网站模板系统进阶（Layouts, Partials, Variables, If/For Loops, Helpers, Data Files）

Layouts（布局）

Layouts 文件位于 themes/[主题名]/layout/，定义页面的骨架。

• 最高级布局： layout.ejs 是最高级布局，所有页面最终都会使用它。
• 内容插入： 使用特殊标签 <%- body %> 在父布局中插入子布局的内容。
  • 示例： index.ejs 的内容会被插入到 layout.ejs 中 <%- body %> 所在的位置。
• 页面特定布局： 可创建 post.ejs (用于文章)、page.ejs (用于独立页面)、tag.ejs (用于标签索引页) 等，这些布局会被嵌套到 layout.ejs 中。

Partials（局部文件）

Partials 用于将常用的代码块（如 Header, Footer）提取到单独的文件中，实现代码模块化。

• 存储位置： 通常在 themes/[主题名]/layout/partial/。
• 插入 Partial 实例：

  1	<%- partial('partial/header') %>

• 传递变量实例（示例）：
  1. Layout 中传递变量：

     1	<%- partial('partial/header', { title: 'hello world', color: 'blue' }) %>

  2. Partial 中访问： 在 header.ejs 中使用 <%= title %> 和 <%= color %> 访问。
  3. 效果： 不同的 Layout 可以通过传递变量来改变 Header 的颜色或标题。

Variables（变量）

用于访问页面或网站的元数据。

• 访问页面信息实例：
  • 标题：<%= page.title %>
  • 日期：<%= page.date %>
  • 内容：<%- page.content %>
• 访问自定义变量实例：
  • 在 Front Matter 设 author: shijianus。
  • 通过 <%= page.author %> 在模板中访问。

If Statements（条件判断）

用于在模板中根据条件执行代码块。

• 示例（判断作者）： 检查文章的 page.author 字段。

  1 2 3 4 5

  {% if page.author == "shijianus" %} shijianus is the author he's the best {% else %} This author sucks {% endif %}

• 示例（检查变量是否存在）：
  • {% if page.author %}：检查 author 变量是否已设置。

For Loops（循环）

用于遍历网站实体集合（如所有文章、标签、分类）。

• 示例 (遍历所有文章的标题)：

  1 2 3 4

  {% site.posts.forEach(function(post) { %} <%= post.title %> <br> {% }) %}

  • 效果： 打印出所有文章的标题（如 shijianus 的 A 和 B）。
  • 其他可循环实体： 您可以将 site.posts 替换为 site.pages、site.tags 或 site.categories。

Helpers（助手函数）

Helpers 是内置函数，用于执行字符串操作、日期格式化等实用功能。

Data Files（数据文件）

用于存储网站全局的、非文章内容的配置数据，作为一个小型数据库使用。

• 存储位置： 必须在 source/ 文件夹下创建 _data/ 文件夹。文件格式 YAML 或 JSON。
• 示例： 创建 source/_data/my_data.yml，内容为 var1: "var one's value"。
• 访问： 通过 site.data.[文件名].[变量] 访问。
  • 示例： <%= site.data.my_data.var1 %>，输出 var one's value。

Ⅶ. 博客部署与持续维护

7.1. GitHub Pages 部署流程

部署 Hexo 博客需要先生成静态文件，然后推送到远程仓库。

• 步骤一：安装 Git 部署插件

  1	npm install hexo-deployer-git --save

• 步骤二：配置部署信息
  1. 打开 Hexo 根目录下的 _config.yml 文件。
  2. 滚动到文件底部，配置 deploy 字段。
     • 示例配置：

       1 2 3 4

       deploy: type: git repository: https://github.com/[GitHub用户名]/[仓库名].git branch: main # 确保分支名正确

• 步骤三：生成静态文件
  • 命令：hexo generate (或 hexo g)。
  • 作用： 将内容编译到 public 文件夹，包含所有静态 HTML 文件。
• 步骤四：执行部署
  1. 清理缓存（重要）： 遇到配置或主题更改不生效时，运行此命令清除缓存 (db.json) 和已生成的 public 文件夹。

     1	hexo clean

  2. 部署命令：

     1 2	hexo deploy # 简写：hexo d

  • 提示： 首次推送可能需要 GitHub 授权。

7.2. Cloudflare Pages/Zeabur 部署加速

Cloudflare Pages 部署

CF Pages 提供全球 CDN 加速，可替代 GitHub Pages 在国内访问不稳定的问题。

1. 登录 Cloudflare，进入 Workers & Pages > Pages。
2. 选择连接到 GitHub，授权并选择您的 Hexo 仓库。
3. 构建设置保持默认（无需修改构建命令和输出目录），点击保存并部署。

Zeabur 部署

Zeabur 提供了免费托管服务。

1. 登录 Zeabur，授权 GitHub 账户。
2. 选择新建项目，选择服务（选择免费计划）。
3. 选择您的 Hexo 仓库，点击部署。
4. 部署完成后，可以在网络选项中添加自定义域名或使用免费生成的域名。

7.3. Hexo 常用命令总结与部署流程

博客更新部署流程：

完成本地修改后，请遵循以下命令序列更新您的在线博客：

1
2
3
4
5
6

# 1. 清理缓存，确保所有更改生效
hexo clean
# 2. 生成静态文件
hexo g
# 3. 部署到远程仓库
hexo d

Hexo 会将新文件推送到 GitHub，托管平台（如 CF Pages/Zeabur）会自动同步并完成在线部署。

当然，你也可以直接复制下面的命令来直接操作，这样会更快：

• 本地预览：这样会清理本地缓存，并且在本地进行测试

  1	hexo cl; hexo s

• 推送更新上线：这样会清理本地缓存，并且使用hexo-deployer-git插件生成静态文件，并帮助你部署到远程仓库中

  1	hexo cl; hexo g; hexo d

Hexo 会将新文件推送到 GitHub，托管平台（如 CF Pages/Zeabur）会自动同步并完成在线部署