Hugo的theme使用与定制

本文以Hyde为例,介绍Hugo主题的使用方法,以及如何进行简单的定制。

添加Theme

Hugo官网的Theme教程中,推荐的是先git clone,再删除.git目录的方式。

Before you use a theme, remove the .git folder in that theme’s root folder. Otherwise, this will cause problem if you deploy using Git.

然而,孤推荐使用另一种方式——git submodule

这个工具,可以把其它Git库,作为一个整体,添加到当前Git库中去。

Hyde为例,添加方式如下:

git submodule https://github.com/spf13/hyde.git themes/hyde

添加所有hugoThemes

有一个官方Git库hugoThemes,包含了大多数的Hugo主题。 通过以下方式,可以配置到一个Hugo项目中去。

git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes

这样,就可以任意使用这些主题了。

然而,即使这个库不是那么大,也是不合适的。 对于一个实际部署的网站来说,只会选择一个,其余全是浪费。

这只适合在建站初期做,选择主题时方便一些。

使用Theme

使用主题有两种方式,一是在执行命令时添加-t--theme参数,二是在配置中制定。 以下给出一些示例。

执行静态网站生成命令:

hugo --theme hyde

启动Web server:

hugo server --theme hyde

如果在网站配置config.toml中指定,则可以省略命令参数-t--theme

theme = "hyde"

定制Theme

在加入到Git中后,直接修改主题中的相关文件,即可定制。 不过,这不是孤的方法。

在静态引用他人代码,到自己的项目中去时,应该尽量不要对其进行修改。 因为,原作者可能会有俺们需要的更新。 最好的做法,是在外面做包装、覆盖之类的操作。

Hugo提供了覆盖的功能。

比如,把Hyde中的layouts/partials/sidebar.html,复制到Hugo项目下的相同位置。 然后,对这个文件的修改,就可以直接反馈在页面上了。

参考


相关笔记