Hugo 主题开发笔记

我的极简 Hugo 主题 Notepadium 已被收录到官方主题推荐列表。

记录一下开发过程中的一些心得。

开发过程中

避免生成多余空行
Hugo 处理源文件时，会把 go 标记 {{ }} 所在行替换为空行保留在生成后的页面里，要避免这种情况需要使用 {{- -}} 告诉编译器需要移除空白。
如果你的代码是这样的：
```
{{ if ... }}
{{ end }}
```
需要替换为
```
{{- if ... -}}
{{- end -}}
```
模块化重复使用的代码
在 index.html 和 list.html 都要显示文章列表和分页器，而且代码逻辑完全一样。
那么可以把重复的代码抽离出来放到 partials 里。
partials/note-list.html 放文章列表布局的代码
partials/pagination.html 放分页器的代码
使用的时候直接包含进来就可以了：
```
{{- $paginator := .Paginator -}}

...

{{- partial "note-list.html" $paginator -}}
{{- partial "pagination.html" $paginator -}}
```
$paginator 是传给 partial 的参数，在 partial 内部可以直接使用 {{ . }} 获取到这个参数。

上架到官方主题列表

主题测试好了以后可以提交给 Hugo 官方审核，通过之后别人就可以在主题列表中发现你的主题。

上架的步骤如下：

到 gohugoio/hugoThemes 提交 Issues
主题是以 Issues 的形式进行评审的，不要提交为 PR。
主题的 ReadMe 中如果包含图片，需要使用绝对链接地址。
因为在 Hugo 主题页面内会直接提取 ReadMe 的内容进行展示。
如果是相对地址会导致显示不了图片，审核也不能通过。
需要提供主题的缩略图，路径是主题根目录的 /images/ 目录，需要提供缩略图和大图
screenshot.png 大图，w: 1500px, h: 1000px
tn.png 缩略图，w: 900px, h: 600px
把 screenshot.png 显示在 ReadMe 的顶部
主题里使用到的链接，应该使用相对地址（relURL），因为官方在上架后会给你生成一个 Demo 站点
如果是使用 BaseURL 进行拼接的路径，或者以 / 开头的路径，会导致生成的 Demo 不能找到资源，审核也不能通过。
使用到外部资源的链接不能是 // 开头的形式，需要写为 https:// 开头。
建议内置 exampleSite 在主题里，在主题根目录下创建一个 exampleSite 目录
把这个示例仓库HugoBasicExample里的 content 目录拷贝进来，不能更改里面的文件内容。
在里面新建一个配置文件 config.toml ，里面的内容需要自己写，除了第一行必须是 baseURL = "https://example.com", 配置文件的内容需要根据自己的主题进行填充。
主题需要能让这个例子正常运行起来才能上架，cd 到 exampleSite 目录里，执行 hugo server --themesDir ../.. 测试效果。