Hexo主题编写心得

2024/06/27
- 编程
0阅读

Blog切换到Hexo将近一年，从仿写Ocean、Bookworm Light Astro模板到能够基于Tailwind Css构建自己的主题，也经历了一些波折。第五篇内容就讲讲开发自定义主题的一些心得。

一、基础结构

Hexo的主题从顶层视角来看，主要包含两块：主题配置文件和主题资源文件夹。

（1）主题配置文件

文件位置：根目录下的_config.[theme name].yml。
主要作用：配置主题的一些特定参数、比如导航栏菜单项、社交链接、备案号、其他拓展应用配置等等。
使用方式：在模板文件中，可以通过theme.**xxx**来获取配置内容。

Tips：不推荐将主题配置写入全局配置文件_config.yml中，一旦后续在多个模板间来回切换，相近的配置项非常容易混淆，导致后期维护成本很高。

（2）主题资源文件夹

文件位置：根目录下themes目录中的主题文件夹。
文件结构：

.
├── _config.yml
└── themes
    └── xxx theme
        ├── languages => i18n
        ├── layout    => 模板目录
        ├── scripts   => 插件目录
        └── source    => 资源目录

Tips：具体文件（夹）命名及作用请参考官网的主题和模板章节内容。

二、模板语法

Hexo的默认模板引擎是Nunjucks，模板页面的后缀有.ejs和.swig两种格式，我是采用.ejs来编写模板的。如果过去有PHP或者JSP之类前后端混合开发经验，对于这类模板写法应该是非常熟悉的。

这里主要讲两类写法：布局引用和模板语法。

（1）布局引用

顾名思义，一些公共的、可复用的布局可以通过<%- partial('xxx', {}) %>来快速复用，避免重复代码。

（2）数据展示

可以通过尖括号语法在页面上输出相应变量信息，例如<%= xxx %>可以输出变量xxx。除了这个基础的语法外还有以下这些用法：

<% ‘脚本’ 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 ‘<%’
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

（3）逻辑判断

所有的if判断、for循环语法都是包裹在<% ... %>内，同时记得在结尾加上结束代码（例如：<% } %>）。

Tips：在hexo中循环语法建议使用Array.map形式

（4）公共变量

页面中可使用的变量，主要有下面三类：

模板变量：例如site和page，具体在[官网文档](变量 | Hexo)中有详尽的介绍。
主题配置：记录在_config.[theme name].yml的主题配置信息，如社交链接、logo、菜单项等。
自定义数据：参考本站的收藏模块，通过site.data.xxx就可以使用存放在source/_data中的配置文件。

数据来源于JSON配置文件

三、Tailwind CSS

css框架的应用也是前端页面非常重要的部分，具体配置可以参考之前第二篇文章来了解Hexo引入Tailwind的方式。

四、静态资源

所有的静态资源都放在themes/[theme name]/source/目录下，在编译后他们会被放置到根目录。例如themes/[theme name]/source/css/index.css在编译之后路径就会变成/css/index.css。

同理，我们可以在themes/[theme name]/source/下放置一个404.html来实现自定义404页面。

Tips：如果网站是部署在OSS/COS上的小伙伴，可以在对应控制台配置404页面路径；如果是通过nginx部署，则在对应站点配置文件中添加一行error_page 404 /404.html;即可。

五、自定义插件

有些时候我们可能会针对模板做一些额外处理，例如获取文章封面用于列表展示，调整页面展示特效等行为。通常我们会编写插件在某个钩子(Hook)上做一些附加动作（参考之前的第三篇内容）。

但如果将这些插件放在根目录的scripts中其实并不太合适，他们独属于某个主题，在其他主题中并未被使用。所以应该放置在主题文件夹下的scripts目录中。

#Blog建设历程