先前使用的Hexo主题略显花哨，为了让博客更学术范一点，准备在2024年伊始换一个新的主题。这个过程中遇到不少问题，其中之一便是如何在Hexo中自定义页面。

目录

  1. 前言
  2. Hexo的渲染逻辑
    1. Hexo框架
    2. 目录结构
    3. 渲染过程
  3. 自定义“友链”页面

前言

与Hexo的邂逅已有5年之久，期间换过不少主题。虽然总会遇到一些问题，但大多都在Github的教程以及各种issue的帮助下迎刃而解。每当看到一个焕然一新的主题，心中不免会产生一丝成就感。但说来惭愧，这么多年一直都对Hexo的配置浅尝辄止，就连最核心的页面渲染过程也是一知半解。

本次换了一个全新的主题——tranquilpeak。这个主题的UI风格很对我的胃口，美中不足的是它支持的特性并不是很丰富。例如，它不支持添加友情链接。本着不想抛弃那为数不多的“友谊”，我决定自己添加一个“友链”页面。

Hexo的渲染逻辑

Hexo框架

众所周知，Hexo是典型的静态博客框架。它需要用户先将本地的markdown文件渲染成静态的HTML网页，然后部署到服务器上供他人访问。在实际访问过程中，服务器只需要负责返回一个个静态的网页即可，并不需要进行额外的存储和逻辑运算。

因此，如何将用户编写的markdown文档渲染为精致的HTML页面就是Hexo需要解决的关键问题。Hexo的渲染过程主要涉及三个核心部分：

  1. 渲染引擎：这也是Hexo框架的核心，例如hexo-renderer-marked等npm包
  2. 数据：用户的博客内容，即若干个Markdown文档
  3. UI：Hexo的各种第三方主题

一句话总结三者的关系就是：渲染引擎根据主题设定的UI样式将用户编写的Markdown文档渲染成HTML页面（包括html、css和js三件套）。

目录结构

接下来，我将根据Hexo项目的目录结构对Hexo的渲染过程进行详细的介绍。一般而言，Hexo项目的目录主要包含以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.
├── public
├── source
│   ├── _drafts
│   ├── _posts
│   ├── archives
│   ├── categories
│   └── tags
├── themes
│   └── demo_theme
│       ├── languages
│       ├── layout
│       ├── scripts
│       │   ├── archive.ejs
│       │   ├── category.ejs
│       │   ├── index.ejs
│       │   ├── layout.ejs
│       │   ├── page.ejs
│       │   ├── post.ejs
│       │   └── tag.ejs
│       ├── source
│       └── _config.yml
└── _config.yml
  • source：存放用户数据，如用户创建的Markdown文档
  • themes：存放若干个Hexo主题
    • languages：多语言配置文件夹，里面定义了配置文件中变量到具体语言的映射
    • layout：布局，其中的*.ejs文件是对主页，分类，归档等页面的布局控制
    • scripts：script源码
    • source：css和js源码等
    • _config.yml：相应主题的配置文件
  • public：存放Hexo渲染得到的网页文件，部署时只需要将该目录上传到服务器
  • _config.yml：Hexo的配置文件

渲染过程

自定义“友链”页面