快速开始
按照本指南在你的 Hexo 博客上安装和设置 ModernDuang 主题。
前提条件
- Node.js（推荐 v14 或更高版本）
- Hexo（v6 或更高版本）
- 一个已有的 Hexo 站点，或使用
hexo init 创建新站点
提示： 如果 hexo init 下载遇到网络问题，可以手动克隆 Hexo 官方模板仓库：
git clone https://github.com/hexojs/hexo-starter.git your-hexo-site
cd your-hexo-site
npm install
安装
第一步：安装主题
进入你的 Hexo 站点目录，通过 npm 安装主题：
cd your-hexo-site
npm install hexo-theme-modernduang --save
第二步：切换主题
编辑 Hexo 站点根目录的 _config.yml，设置主题：
第三步：复制默认配置
将主题的默认配置文件复制到站点根目录，命名为 _config.modernduang.yml：
cp themes/modernduang/_config.yml _config.modernduang.yml
注意： Hexo 会自动将 _config.modernduang.yml 与主题默认配置合并。你只需要指定想要覆盖的选项。
第四步：配置基本设置
首先编辑 Hexo 主配置文件 _config.yml，设置站点名称、描述和副标题：
# Site
title: 我的博客 # 站点名称，显示在首页 Hero 和浏览器标签页
subtitle: '' # 站点副标题
description: 记录技术与生活 # 站点描述，用于 SEO 和友链页
author: 你的名字 # 作者名，显示在首页个人信息卡片
language: zh-CN # 站点语言
title 和 description 会自动被主题读取——title 显示在首页 Hero 区域的标题和浏览器标签页，description 用于 SEO 和友链页的站点信息。
然后打开 _config.modernduang.yml，设置主题选项：
# 首页个人信息卡片
profile:
avatar: https://your-avatar-url.png
motto: 你的座右铭
social:
- name: GitHub
url: https://github.com/yourname
icon: github
# 页脚
footer:
since: 2024
author: 你的名字
powered: true
social:
travelling: true
github: true
email: false
第五步：创建页面
使用 hexo new page 命令创建主题所需的各个页面：
hexo new page tags
hexo new page categories
hexo new page about
hexo new page links
重要： hexo new page 生成的页面默认只包含 title 和 date 字段，需要为每个页面手动添加 layout 字段，主题才能使用对应的模板渲染。
各页面需要添加的 layout 如下：
例如，source/links/index.md 生成后的内容如下：
---
title: 友链
date: 2024-01-01 00:00:00
---
将 date 一行替换为 layout: links，title 可自定义为任意名称，会在页面顶部显示：
---
title: 友链
layout: links
---
第六步：生成并启动
先执行 hexo generate 生成静态文件，再启动开发服务器：
hexo generate
hexo server
在浏览器中打开 http://localhost:4000，你应该能看到使用了 ModernDuang 主题的博客！
最小化配置示例
以下是最精简的可运行配置：
# _config.modernduang.yml
favicon: /img/favicon.ico
menu:
首页: /
归档: /archives
标签: /tags
分类: /categories
友链: /links
关于: /about
dark_mode:
enable: true
default: light
hero:
mode: fixed
text: 欢迎来到我的博客
profile:
avatar: ''
motto: ''
social: []
footer:
since: 2024
author: ''
powered: true
项目结构
安装完成后，你的 Hexo 站点文件将按照以下结构组织：
your-hexo-site/
├── _config.yml # Hexo 主配置（设置 theme: modernduang）
├── _config.modernduang.yml # 主题专属配置
├── package.json # 项目依赖
├── node_modules/ # 已安装的 npm 包
├── scaffolds/ # 文章/页面/草稿模板
│ ├── draft.md
│ ├── page.md
│ └── post.md
├── source/ # 站点内容源目录
│ ├── _posts/ # 博客文章（Markdown 文件）
│ │ └── hello-world.md
│ ├── about/ # 关于页面（由 Step 6 创建）
│ │ └── index.md
│ ├── links/ # 友链页面（由 Step 6 创建）
│ │ └── index.md
│ ├── tags/ # 标签页面（由 Step 6 创建）
│ │ └── index.md
│ ├── categories/ # 分类页面（由 Step 6 创建）
│ │ └── index.md
│ └── img/ # 站点图片资源
├── themes/
│ └── modernduang/
│ ├── _config.yml # 主题默认配置（不要直接修改）
│ ├── package.json
│ ├── README.md
│ ├── screenshot.png
│ ├── layout/ # EJS 模板文件
│ │ ├── _link-apply.md # 友链申请板块内容
│ │ ├── layout.ejs # 基础布局
│ │ ├── index.ejs # 首页
│ │ ├── post.ejs # 文章页
│ │ ├── archive.ejs # 归档页
│ │ ├── tags.ejs # 标签页
│ │ ├── tag.ejs # 单个标签页
│ │ ├── categories.ejs # 分类页
│ │ ├── category.ejs # 单个分类页
│ │ ├── links.ejs # 友链页
│ │ ├── about.ejs # 关于页
│ │ ├── 404.ejs # 404 页面
│ │ └── partials/ # 可复用组件
│ │ ├── header.ejs
│ │ ├── footer.ejs
│ │ └── comments/
│ │ └── twikoo.ejs
│ ├── source/ # 主题静态资源
│ │ ├── css/main.css # 全部主题样式
│ │ ├── js/main.js # 主题 JavaScript
│ │ └── img/ # 主题内置图片（ICP 图标等）
│ └── scripts/ # Hexo 辅助脚本
│ ├── mermaid.js # Mermaid 图表支持
│ ├── note-tags.js # 自定义引用块标签
│ └── link-apply.js # 友链申请板块渲染
└── public/ # 生成的静态站点（hexo generate 后产生）
下一步
