第九章：JavaScript 脚本与全局背景图
JavaScript 脚本与全局背景图什么是 JavaScript？JavaScript（简称 JS）是一种编程语言，用来让网页”动”起来。在博客中，JS 可以： 动态修改页面内容 响应用户操作（点击、滚动等） 加载外部资源（图片、数据等） 本博客的背景图系统设计目标 首页文章列表：每篇文章显示不同的封面图 上一篇/下一篇：显示随机背景图 相关推荐：显示随机背景图 文章页顶部：显示随机背景图 文件结构12345678source/├── img/│ └── covers/ # 43 张封面图│ ├── 1.webp│ ├── 2.webp│ └── ...└── js/ └── randomBg.js # 背景图控制脚本 JavaScript 基础语法变量1234567// 声明变量var name = "Henry"; // 字符串var count = 43; // 数字var isReady = true; ...
第八章：CSS 样式自定义指南
CSS 样式自定义指南什么是 CSS？CSS（Cascading Style Sheets，层叠样式表）是用来控制网页外观的语言。简单来说： HTML 负责网页的结构（有哪些内容） CSS 负责网页的样式（长什么样） Butterfly 主题的样式自定义方式方式一：主题配置文件（简单）在 _config.butterfly.yml 中直接修改颜色： 123456theme_color: enable: true main: "#49B1F5" # 主色调（蓝色） paginator: "#00c4b6" # 分页颜色 button_hover: "#FF7242" # 按钮悬停颜色 link_color: "#99a9bf" # 链接颜色 优点：简单，不需要写代码缺点：只能修改颜色，不能修改布局 方式二：自定义 CSS 文件（灵活）创建自己的 CSS 文件来覆盖主题样式。 步骤 1：在 _config.butterfly.yml 中添加注...
第一章：快速入门
Hexo 博客快速入门什么是 Hexo？Hexo 是一个快速、简洁且强大的静态博客框架，基于 Node.js 构建。你只需要使用 Markdown 书写文章，Hexo 就能在几秒内生成漂亮的静态网站。 环境要求 依赖 版本要求 说明 Node.js 20.19.0+ (推荐22) Hexo 8.0+ 最低要求 Git 最新版本 版本控制 npm 9.x+ 包管理器 重要提示：Node.js 24 与部分 Hexo 插件不兼容，建议使用 Node.js 22。 安装 Hexo12345# 全局安装 hexo-clinpm install -g hexo-cli# 验证安装hexo version 初始化博客123456# 创建博客目录hexo init my-blogcd my-blog# 安装依赖npm install 初始化完成后，目录结构如下： 1234567my-blog/├── _config.yml # 主配置文件├── package.json # 依赖配置├── scaffolds/ # 模板文件夹├── ...
第二章：文章管理
文章管理指南新建文章1hexo new "文章标题" 生成的文件位于 source/_posts/文章标题.md 命令选项123456789101112# 指定布局hexo new draft "草稿文章" # 创建草稿hexo new page "关于我" # 创建页面# 自定义路径hexo new post --path 2026/my-post "文章标题"# 自定义 slug（URL）hexo new post --slug my-custom-url "文章标题"# 替换已有文章hexo new post --replace "文章标题" Front-matter 配置Front-matter 是文章顶部的 YAML 或 JSON 配置块，用于配置文章的元数据。 YAML 格式（推荐）12345678910---title: 文章标题date: 2026-06-19 12:00:00tags: - 标签1 - 标签2categ...
第三章：主题配置
Butterfly 主题配置指南主题概述Butterfly 是一款基于 hexo-theme-melody 开发的 Hexo 主题，具有简洁的卡片式 UI 设计。 官方文档: https://butterfly.js.org/GitHub: https://github.com/jerryc127/hexo-theme-butterfly当前版本: 5.5.4 主题安装方式一：npm 安装（推荐）1npm install hexo-theme-butterfly 升级方法： 1npm update hexo-theme-butterfly 方式二：Git 安装12345# 稳定版（推荐）git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly# 测试版git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 升级方法：在主题目录下运行 ...
第四章：部署指南
部署指南部署方式概览 方式 说明 适用场景 GitHub Actions 自动化 CI/CD 本项目使用 GitHub Pages GitHub 托管 免费托管 GitLab Pages GitLab 托管 私有仓库 一键部署 hexo-deployer 传统方式 手动部署 rsync/scp 自有服务器 本项目部署架构123456789本地开发 → git push master → GitHub Actions 触发 ↓ npm install ↓ npx hexo generate ↓ SSH Deploy 到服务器 ...
第五章：插件管理
插件管理指南插件系统概述Hexo 拥有强大的插件系统，可以轻松扩展功能而无需修改核心代码。插件分为两种类型： 类型 说明 适用场景 Script 简单脚本 快速添加小功能 Plugin 完整插件包 复杂功能或发布到 NPM 本项目已安装插件核心插件 插件 版本 用途 hexo ^8.0.0 Hexo 核心 hexo-server ^3.0.0 本地开发服务器 hexo-renderer-ejs ^2.0.0 EJS 模板渲染 hexo-renderer-marked ^7.0.0 Markdown 渲染 hexo-renderer-stylus ^3.0.1 Stylus 样式渲染 生成器插件 插件 版本 用途 hexo-generator-index ^4.0.0 首页生成 hexo-generator-archive ^2.0.0 归档页生成 hexo-generator-category ^2.0.0 分类页生成 hexo-generator-tag ^2.0.0 标签页生成 hexo-genera...
第六章：自定义扩展
自定义扩展指南概述Hexo 支持通过多种方式自定义博客的外观和功能，无需修改主题源码。 自定义 CSS文件位置1source/css/custom.css 配置注入在 _config.butterfly.yml 中配置： 123inject: head: - <link rel="stylesheet" href="/css/custom.css"> 常用自定义样式12345678910111213141516171819202122232425262728293031/* 自定义主题色 */:root { --primary-color: #49B1F5; --link-color: #99a9bf;}/* 文章内容样式 */.post-content { line-height: 1.8;}/* 代码块样式 */code { font-family: 'Fira Code', monospace;}/* 图片圆角 */.pos...
附录：快速开始
快速开始环境要求 Node.js: 22.x（推荐，CI 环境使用此版本） npm: 9.x+ 或 yarn Git: 最新版本 注意: Node.js 24 与部分 Hexo 插件不兼容，请使用 Node.js 22。 安装依赖12345678# 克隆项目git clone <repository-url>cd HexoBlogDemo# 安装依赖npm install# 或yarn install 本地开发1234# 启动本地服务器npm run server# 访问 http://localhost:4000 本地服务器支持热重载，修改文件后会自动刷新。 常用命令 命令 说明 npm run server 启动本地服务器 npm run build 生成静态文件到 public/ npm run clean 清理 public/ 和 db.json npm run deploy 部署到服务器 详细命令12345678910111213141516171819202122232425# 生成静态文件hexo generate# ...
第七章：常见问题
常见问题与解决方案构建问题问题：npm install 失败原因: 依赖版本冲突或网络问题 解决方案: 12345678910# 清除缓存npm cache clean --force# 删除 node_modules 重新安装rm -rf node_modules package-lock.jsonnpm install# 使用国内镜像npm config set registry https://registry.npmmirror.comnpm install 问题：hexo generate 报错原因: Node.js 版本不兼容 解决方案: 12345# 检查 Node 版本node -v# 使用 nvm 切换版本nvm use 22 问题：主题样式丢失原因: 主题未正确安装或 CDN 问题 解决方案: 12345678# 重新安装主题npm install hexo-theme-butterfly# 检查 CDN 配置# _config.butterfly.ymlCDN: internal_provider: local third_party_provide...