我的博客网站基于Hexo，使用了Pug模板引擎。有时候感觉现在正在使用的主题不够满足自己的需求，就得手动修改Pug文件。

1. Pug基础

Pug过去被称为Jade，是一种高性能的模板引擎，广泛用于Node.JS。它使用简洁的缩进语法，使得HTML更易于编写和阅读。

1.1. Pug语法

Pug使用缩进来表示标签的嵌套关系：

1
2
3
4
5
6
doctype html
html
    head
        title My Pug Template
    body
        h1 Hello, Pug!

这将生成以下HTML：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>My Pug Template</title>
    </head>
    <body>
        <h1>Hello, Pug!</h1>
    </body>
</html>

树状结构：

1
2
3
4
ul
    li Item 1
    li Item 2
    li Item 3

标签后面使用括号来添加属性，并使用空格来添加内容：

1
a(href="https://www.example.com") Visit Example.com

约等于：

1
<a href="https://www.example.com">Visit Example.com</a>

你可以声明一个标签是自闭合的，加上一个斜杠的话：

1
img/

纯文本使用管道符 |：

1
2
3
p
    | This is a paragraph of text.
    | This is another line of text.

标签内文本是最常见的：

1
p This is a paragraph of <strong>text</strong> .

Pug模板中也可以使用JavaScript变量：

1
2
- var name = 'World'
h1 Hello, #{name}!
1
<h1>Hello, World!</h1>

以及标准的JavaScript控制结构：

1
2
3
4
5
- var user = { name: 'John', admin: true }
if user.admin
    p Hello, #{user.name}! You are an admin.
else
    p Hello, #{user.name}!
1
<p>Hello, John! You are an admin.</p>

2. Hexo中的Pug

Hexo可以使用Pug模板引擎，但是需要安装hexo-renderer-pug插件：

1
npm install hexo-renderer-pug --save

2.1. 配置项

在Pug模板中可以使用 theme 对象来访问主题配置项：

1
year = year == theme.startyear ? year : theme.startyear + ' - ' + year;

而在 _config.yml 中内容如下：

1
startyear: 2022

对于Hexo项目根目录下的 _config.yml 文件，可以使用 config 对象来访问配置项：

1
title = config.title

2.2. 页面布局

模板文件模板文件，重点便是“模板”这个词。我们可以将一些重复的内容放在模板文件中，然后在其他页面中引用。

比方说 HTML 的 <head> 标签：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// head.pug

meta(charset="utf-8")
meta(name="X-UA-Compatible", content="IE=edge")

title 
    block site_title
        = config.title
block description
    meta(name="description", content= config.description ? config.description : 'A Blog Powered By Hexo')

meta(name="viewport", content="width=device-width, initial-scale=1")
link(rel="icon", href=url_for(theme.favicon))
link(rel="stylesheet", href=url_for("css/hermes.css"))

- var xml = config.url + '/atom.xml'
    link(rel="search", type="application/opensearchdescription+xml", href=xml, title=config.title)

又或者说导航栏、页脚等等。

layout.pug 文件是一个特殊的模板文件，它是所有页面的父模板。这里是一个简单的例子：

1
2
3
4
5
6
7
8
9
10
11
doctype
html(lang=config.language)
    head
        include head
    body
        header
            include header.pug
        main
            block content
        footer
            include footer.pug

block 是一个特殊的标签，它允许子模板文件覆盖父模板文件中的内容。比如说，我们可以在 layout.pug 中定义一个 block content，然后在其他页面中覆盖它。

1
2
3
4
5
extends layout

block content
    h1 Hello, Pug!
    p This is a paragraph.

extends 则是用来引用父模板文件的。