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

2.4 Themes

Hugo 主题是模板文件和可选网站资源（例如 CSS 和 JavaScript 文件）的集合。简而言之，主题定义了通过模板呈现源内容后您的网站的外观。

Hugo 在 https://themes.gohugo.io 上提供了大量用户贡献的主题。除非您是经验丰富的网页设计师，否则最好从此处的现有主题开始。这些主题的质量和复杂性差异很大，您应该谨慎选择。例如，您可以查看某个主题存储库在 GitHub 上的星星数量，以及该存储库是否仍然相对活跃。长时间（例如几年）未更新的主题可能仍适用于更高版本的 Hugo，也可能不适用于。您必须仔细测试它们。

在本节中，我们将解释 blogdown 中的默认主题是如何工作的，这也可能会给您一些关于如何开始使用其他主题的想法。

2.4.1 The default theme

blogdown 中的默认主题 hugo-lithium 托管在 GitHub 上：https://github.com/yihui/hugo-lithium。它最初是由 Jonathan Rutheiser 编写的，我对其进行了一些修改。这个主题适合那些喜欢简约风格，想要建立一个只有几个页面和一些博客文章的网站的人。

通常，GitHub 上的主题存储库有一个 README 文件，该文件也用作主题的文档。阅读完后，下一个要查找的文件是 exampleSite 目录下的 config.toml，其中包含基于此主题的网站的示例配置。如果主题没有 README 文件或 exampleSite 目录，您可能不应该使用它。

主题 hugo-lithium 的 config.toml 包含以下选项：

baseurl = "/"
relativeurls = false
languageCode = "en-us"
title = "A Hugo website"
theme = "hugo-lithium"
ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown", "_files$", "_cache$"]

[permalinks]
    post = "/:year/:month/:day/:slug/"

[[menu.main]]
    name = "About"
    url = "/about/"
[[menu.main]]
    name = "GitHub"
    url = "https://github.com/rstudio/blogdown"
[[menu.main]]
    name = "Twitter"
    url = "https://twitter.com/rstudio"

[params]
    description = "A website built through Hugo and blogdown."

    highlightjsVersion = "9.12.0"
    highlightjsCDN = "//cdnjs.cloudflare.com/ajax/libs"
    highlightjsLang = ["r", "yaml"]
    highlightjsTheme = "github"

    MathJaxCDN = "//cdnjs.cloudflare.com/ajax/libs"
    MathJaxVersion = "2.7.5"

[params.logo]
    url = "logo.png"
    width = 50
    height = 50
    alt = "Logo"

其中一些选项可能很容易理解，而另一些可能需要解释：

• baseurl: 当您拥有网站的域名后，您可以稍后配置此选项。不要忘记结尾的斜杠。

• relativeurls: 这是可选的。仅当您打算通过文件查看器在本地查看您的网站时，您可能才需要将其设置为 true，例如，双击 HTML 文件并在浏览器中查看它。该选项在 Hugo 中默认为 false，这意味着您的网站必须通过 Web 服务器查看，例如 blogdown::serve_site() 提供了本地 Web 服务器，因此当 relativeurls = false 时您可以在本地预览您的网站。

• title: 您网站的标题。通常，它显示在网络浏览器的标题栏或页面选项卡上。

• theme: 主题的目录名称。更改主题时需要非常小心，因为一个主题在配置方面可能与另一个主题截然不同。不同的主题很可能不适用于您当前的 config.toml。同样，您必须阅读主题的文档才能了解支持或需要哪些选项。

• ignoreFiles and permalinks: 这些选项已在 Section 2.2.2 中进行了解释。

• menu: 此选项列表指定顶部菜单项的文本和 URL。见 Figure ?? 获取示例页面。您可以更改或添加更多菜单项。如果您想排序项目，您可以为每个项目分配一个 weight，例如，

  [[menu.main]]
      name = "Home"
      url = "/"
      weight = 1
  [[menu.main]]
      name = "About"
      url = "/about/"
      weight = 2
  [[menu.main]]
      name = "GitHub"
      url = "https://github.com/rstudio/blogdown"
      weight = 3
  [[menu.main]]
      name = "CV"
      url = "/vitae/"
      weight = 4
  [[menu.main]]
      name = "Twitter"
      url = "https://twitter.com/rstudio"
      weight = 5

  上面的例子中，我添加了一个菜单项 CV，URL 为 /vitae/，在 content/ 目录下应该有对应的源文件 vitae.md 来生成页面 /vitae/index.html，所以链接会真正发挥作用。

• params: 主题的其他参数。

  • description: 您网站的简短描述。它在网页上不可见（您只能从 HTML 源代码中看到它），但应该向搜索引擎提供有关您网站的提示。

  • highlightjs*: 这些选项用于配置 JavaScript library highlight.js 以对网页上的代码块进行语法高亮显示。您可以更改版本（例如，9.12.0）、CND host（例如，使用 cdnjs: //cdnjs.cloudflare.com/ajax/libs）、添加更多语言（例如，["r", "yaml", "tex"]），并更改主题（例如，atom-one-light）。请参阅 https://highlightjs.org/static/demo/ 了解 highlight.js 支持的所有语言和主题。

  • MathJax*: JavaScript library MathJax 可以在网页上呈现 LaTeX 数学表达式。与 highlightjsCDN 类似，您可以指定 MathJax 的 CDN host，例如 //cdnjs.cloudflare.com/ajax/libs，也可以指定 MathJax 的版本。

  • logo: 用于定义网站 logo 的选项列表。默认使用 static/ 目录下的 logo.png 图片。

如果你想成为一名主题开发人员并完全了解有关这些选项的所有技术细节，你必须了解 Hugo 模板，我们将在 Section 2.5 中介绍。