自定义Hugo主题 #

Hugo可以创建站点，还可以创建自己的主题。以站点 sunwe.xyz为例。让我们将站点中的内容和主题分离，让我们专注在内容创作上。同时还可以让更多和我们有共同诉求的人，重用我们的主题。

需求分析 #

我们的目标是分离出站点的主题，也就是将content和layouts，及static分离开，并作为主题引入。

所需要的步骤如下：

创建主题仓库
将模板样式从原有站点分离出来
引入主题

实施细节 #

接下来我们一步步的实现以上需求。

创建主题仓库 #

因为站点定位个人品牌，需求并不复杂，以简洁为主。我们给主题取名zero，寓意起点。

首先创建好空的zero Github仓库，再用Hugo命令生成主题默认目录结构：

➜  zero git:(main) ✗ hugo new theme .
Creating theme at /Users/sunwei/github/sunwei/zero/themes
➜  zero git:(main) ✗ ls
LICENSE   README.md public    resources themes

可以看出，Hugo认为我们是在站点里，正在给站点创建主题。实际上我们需要的是themes里面的内容。在我们的实例中，其实就theme.toml这一个主题配置文件。拷贝到我们的仓库根目录下后，更新其中说明内容如下：

name = "Zero"
license = "MIT"
licenselink = "https://github.com/sunwei/zero/blob/master/LICENSE"
description = "Hugo Theme for sunewi.xyz"
homepage = "https://sunwei.xyz/"
demosite = "https://sunwei.xyz"
tags = ["zero", "sunwei.xyz"]
features = ["clean"]
min_version = "0.41.0"

[author]
  name = "Sun Wei"
  homepage = "https://sunwei.xyz"

其它的文件都可以移除掉，因为我们并不是从零开始创建一个主题，而是将sunwei.xyz站点的主题独立出来。

为了让主题支持用模块的形式导入，我们还需要在仓库根目录下创建一个golang的模块文件go.mod，并更新内容如下：

module github.com/sunwei/zero

go 1.18

这是因为Hugo模块是基于Golang模块开发的。上面的代码第一行表示的是这个go模块的名字github.com/sunwei/zero，如果想导入这个模块，就需要导入这个索引。第二行表示支持的go版本。

准备好主题配置信息和Golang模块信息后，我们就可以引入站点主题了。

将模板样式从原有站点分离出来 #

打开站点源码。将其中的layouts和static目录，全部拷贝至我们的zero主题仓库根目录。当前zero主题目录结构如下所示：

➜  zero git:(main) tree
.
├── LICENSE
├── README.md
├── go.mod
├── layouts
│   ├── index.html
│   ├── partials
│   │   ├── foot.html
│   │   ├── head.html
│   │   └── language.html
│   └── taxonomy
│       └── taxonomy.html
├── static
│   └── css
│       └── style.css
└── theme.toml

5 directories, 10 files

实际上我们的zero主题，到此已经完成了。将更新推送到远端，就是一个大家都可以用的Hugo主题了。真的很方便！

引入主题 #

主题是创建完成了，接下来就是应用了。打开站点源码，移除相应的layouts和static目录。

先在config.toml配置文件中引入主题：

baseURL = 'https://sunwei.xyz/'
title = 'sunwei.xyz'
theme = "github.com/sunwei/zero"

defaultContentLanguage = 'zh'
[languages]
[languages.zh]
languageName = '中文'
contentDir = 'content'
weight = 1

[languages.en]
languageName = 'English'
contentDir = 'content.en'
weight = 2

接着新建go模块信息文件go.mod：

module github.com/sunwei/xyz

go 1.18

用Hugo模块命令更新模块配置信息:

➜  xyz git:(master) hugo mod get -u
go: no module dependencies to download
hugo: downloading modules …
go: downloading github.com/sunwei/zero v0.0.0-20221005003323-b204559ecb5e
go: added github.com/sunwei/zero v0.0.0-20221005003323-b204559ecb5e
hugo: collected modules in 2784 ms

再看go.mod，有自动插入模块信息：

module github.com/sunwei/xyz

go 1.18

require github.com/sunwei/zero v0.0.0-20221005003323-b204559ecb5e // indirect

实际上也可以主动指明版本号，但前提是zero有发布具体版本。实际上Hugo mod模块命令也可以很方便为咱们管理更新。

再一起来看下现在sunwei.xyz站点仓库的目录结构:

➜  xyz git:(master) tree
.
├── CNAME
├── README.md
├── command.sh
├── config.toml
├── content
│   └── _index.md
├── content.en
│   └── _index.md
├── go.mod
└── go.sum

2 directories, 8 files

和之前的相比：

➜  xyz git:(master) tree
.
├── CNAME
├── README.md
├── command.sh
├── config.toml
├── content
│   └── _index.md
├── content.en
│   └── _index.md
├── layouts
│   ├── index.html
│   ├── partials
│   │   ├── foot.html
│   │   ├── head.html
│   │   └── language.html
│   └── taxonomy
│       └── taxonomy.html
└── static
    └── css
        └── style.css

11 directories, 12 files

是不是更简洁明了！这就让我们可以更加专注在内容的创作上了。感谢Hugo！