A note from the authors: Some of the information and instructions in this book are now out of date because of changes to Hugo and the blogdown package. If you have suggestions for improving this book, please file an issue in our GitHub repository. Thanks for your patience while we work to update the book, and please stay tuned for the revised version!

In the meantime, you can find an introduction to the changes and new features in the v1.0 release blog post and this "Up & running with blogdown in 2021" blog post.

— Yihui, Amber, & Alison

1.7 Other themes

在 Hugo 中,themes 控制站点的整个外观和功能。Hugo 主题由以下元素组成:

  1. 配置文件。这可能是网站项目根目录中的单个 config.yamlconfig.toml 文件。某些主题还使用配置目录,位于 config/_default/ 中。请参阅 Chapter 2.2 了解有关这些文件的更多信息。

  2. 布局文件,例如位于 themes/hugo-lithium/layouts/ 中。Hugo 是一个模板系统,因此布局文件是 *.html 文件,具有特定的文件和命名结构。请参阅 Section 2.5 了解有关这些文件的更多信息。

  3. 样式资源文件,例如字体和 CSS。

  4. HTML 依赖项,如 JavaScript 文件。

所有这些文件都包含在 themes/ 文件夹中,并与您的网站 content/ 分开保存。然而,所有 Hugo 主题都依赖于特定的 content/ 和 YAML frontmatter,所以不要误以为主题和内容并不相互依赖—它们是相互依赖的!在本节中,我们提供了一些关于选择主题的固执己见的建议,以及使用 blogdown 处理 Hugo 主题的推荐工作流程。

1.7.1 Choosing themes

如果您非常关心网站的外观,那么一开始您可能会花费相当多的时间从 https://themes.gohugo.io 列出的集合中寻找您喜欢的 Hugo 主题。请注意,并非所有主题都经过 blogdown 测试。如果您发现某个主题与 blogdown 不能很好地配合,您可以向 https://github.com/rstudio/blogdown/issues 报告,我们会尽力调查原因,但学习和了解新主题是如何工作的可能会很耗时,因此我们建议您在提问之前先自行了解一下 Hugo,我们也鼓励用户互相帮助。

现在有大约 400 个 Hugo 主题可供选择。为了节省您的时间,我们在下面列出了一些符合我们口味的主题:

如果您不懂 HTML、CSS 或 JavaScript,并且没有使用 Hugo 主题或模板的经验,那么您可能需要大约 10 分钟才能开始使用新网站,因为您必须接受所提供的一切(例如默认主题);如果您确实拥有知识和经验(并且希望高度定制您的网站),那么您可能需要几天的时间才能开始。Hugo 确实很强大。对权力要谨慎。

另一件要记住的事情是,你在一个复杂的主题上付出的努力越多,将来切换到其他主题就越困难,因为你可能已经定制了很多不能直接移植到另一个主题的东西。所以请认真地问自己,“我是否非常喜欢这个奇特的主题,以至于在未来几年内我绝对不会改变它?”

If you choose to dig a rather deep hole, someday you will have no choice but keep on digging, even with tears.

— Liyun Chen10

1.7.2 New site, new theme

要在新站点中使用 hugo-lithium 以外的 Hugo 主题(我们在 Section 1.2 中展示),我们建议采用以下工作流程:

  1. https://themes.gohugo.io 上仔细选择一个主题,11 并找到其 GitHub 存储库的链接,格式为 https://github.com/user/repo。例如,Hugo theme Anatole 的来源位于 https://github.com/lxndrblz/anatole

  2. 在 RStudio 中创建一个新项目 (File -> New Project -> New Directory -> Website using blogdown) (见 Figures 1.11.2)。

  3. 在 “Hugo theme” 字段中,输入步骤 1 中链接中的 user/repo。单击 “Create Project”。

    或者,在 R 控制台中,您可以输入 blogdown::new_site(theme = 'user/repo')

    # for example, create a new site with the anatole theme
    blogdown::new_site(theme = 'lxndrblz/anatole')
  4. 使用新站点一段时间,如果您不喜欢它,可以重复上述步骤,否则编辑配置文件(config.yamlconfig.toml)中的选项。如果您不理解某些选项,请转到主题文档,这通常是 GitHub 存储库的 README 页面。并非所有选项都必须更改。

1.7.3 Existing site, new theme

一般来说,我们不建议您切换主题,因为每个 Hugo 主题都取决于您在特定于主题的配置文件(config.yamlconfig.toml)以及 content/ 文件的 YAML 中提供的不同变量。通常为各个主题提供示例站点,因此我们建议使用 blogdown::new_site(),然后编辑提供的示例站点作为起点。但是,如果您确实想使用现有站点测试不同的 Hugo 主题,则可以从以下工作流程开始:

  1. 在 R 控制台中,通过 blogdown::install_theme() 安装主题。

    blogdown::install_theme(theme = 'lxndrblz/anatole')
  2. 手动将配置文件(config.yamlconfig.toml)从 themes/theme-name/exampleSite/ 目录移动到网站的根目录以匹配新安装的主题。

  3. 仔细检查新主题的 exampleSitecontent/ 文件夹中的文件之间的差异。主题的示例站点内容是针对特定主题量身定制的,因此在不更改 content/ 的情况下更改主题/有点像穿别人的衣服—它们可能不合适。

1.7.4 Existing site, update theme

更新 Hugo 主题文件不适合胆小的人,除非必须,否则我们也不建议这样做。我们通常还建议您仅在集成 GIT 和 GitHub 进行版本控制时才执行此操作,并且首先尝试在分支中更新主题。

这很困难的主要原因是 Hugo 主题文件可能需要更改网站配置文件(config.yamlconfig.toml)以及各个内容文件的 YAML,具体取决于主题更新的程度。所以更新主题可能会很麻烦。

为什么主题开发者要更新他们的主题?三个原因。一、Hugo 改变了。因此,Hugo 主题开发人员必须更改其主题以跟上已弃用的 Hugo 功能。第二,Hugo 主题开发人员在报告错误时修复他们的主题。第三,流行的 Hugo 主题通常会提出大量功能请求,并且一些主题开发人员对添加新功能很敏感。

如果您发现自己需要更新主题,可以执行以下操作:

blogdown::install_theme(theme = 'lxndrblz/anatole', force = TRUE)

然后通过比较更新的主题的 exampleSite 来慢慢了解站点配置文件和 content/ frontmatter(YAML metadata)中的更改。如前所述,我们建议在合并之前在不同的分支(即 not main)中完成这项工作。


  1. Translated from her Chinese Weibo.↩︎

  2. 对于大多数主题,您可以通过从 http://themes.gohugo.io 导航到您选择的主题,然后单击 “Download” 来找到它。↩︎