创建新主题

Hugo 作为一个流行的静态网站生成器，其灵活性很大程度上体现在主题（theme）的定制与创建上。一个 Hugo 主题是定义网站外观和布局的一系列文件，包括模板、静态资源（CSS、JavaScript、图片）以及配置文件。从零开始创建一个新的 Hugo 主题，可以让你完全掌控网站的设计，并根据特定需求进行深度定制。

主题结构概览

一个典型的 Hugo 主题包含以下核心目录和文件：

layouts/: 存放网站的模板文件。
- _default/: 存放默认布局模板，当特定类型的页面没有找到对应模板时会使用这里的文件。
  - single.html: 单篇文章的默认布局。
  - list.html: 列表页（如博客首页、分类页）的默认布局。
- partials/: 存放可重用的模板片段，例如导航栏、页脚等。
- index.html: 网站首页的布局。
- 404.html: 404 错误页面的布局。
static/: 存放静态资源，如 CSS 文件、JavaScript 文件、图片、字体等。Hugo 会将此目录下的内容直接复制到网站的根目录下。
assets/: 存放需要 Hugo 进行处理的资源，例如 Sass/SCSS 文件、图片优化等。
i18n/: 存放多语言翻译文件。
archetypes/: 存放内容类型的模板，用于生成新内容时自动填充 frontmatter。
- default.md: 默认内容类型的模板。
package.json (可选): 如果主题使用了 npm 包管理器，会包含此文件。
go.mod (可选): 如果主题是作为一个 Go 模块发布的。

创建主题的步骤

1. 初始化主题

首先，在你的 Hugo 项目根目录下，使用 hugo new theme <your-theme-name> 命令创建一个新的主题。例如：

hugo new theme myawesome-theme

这会在你的项目根目录下的 themes/ 文件夹中创建一个名为 myawesome-theme 的新目录，并包含上述基本结构。

2. 配置 `config.toml` (或 `config.yaml`/`config.json`)

在你的 Hugo 项目的根目录下的配置文件（如 config.toml）中，你需要告诉 Hugo 使用你创建的主题。

baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

theme = "myawesome-theme" # 指定使用你的新主题

3. 设计布局（Layouts）

这是主题开发的核心部分。你需要使用 Go 模板语法来创建 HTML 文件，定义网站的结构和外观。

layouts/index.html: 定义网站首页的布局。通常会包含一个导航栏、文章列表以及页脚。

{{ define "main" }}
<main>
    <h1>Welcome to {{ .Site.Title }}</h1>
    {{ range .Pages }}
        <article>
            <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
            <p>{{ .Summary }}</p>
        </article>
    {{ end }}
</main>
{{ end }}

layouts/_default/list.html: 定义列表页的布局，例如博客文章列表。

{{ define "main" }}
<main>
    <h1>{{ .Title }}</h1>
    {{ range .Pages }}
        <article>
            <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
            <p>{{ .Summary }}</p>
        </article>
    {{ end }}
</main>
{{ end }}

layouts/_default/single.html: 定义单篇文章的布局。

{{ define "main" }}
<main>
    <h1>{{ .Title }}</h1>
    <p>Posted on {{ .Date.Format "2006-01-02" }}</p>
    <div>
        {{ .Content }}
    </div>
</main>
{{ end }}

layouts/partials/header.html: 创建可重用的头部导航。

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about/">About</a>
        {{ with .Site.Menus.main }}
            {{ range . }}
                <a href="{{ .URL }}">{{ .Name }}</a>
            {{ end }}
        {{ end }}
    </nav>
</header>

你需要在 layouts/index.html 或 layouts/_default/single.html 等文件中包含这个部分：{{ partial "header.html" . }}。

4. 添加静态资源（Static）

将你的 CSS、JavaScript 和图片文件放入 static/ 目录。例如，你可以创建一个 static/css/style.css 文件。

在你的布局模板中引用这些资源：

<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">

5. 使用 Archetypes

Archetypes 允许你为不同类型的内容（如博客文章、页面）创建预设的 frontmatter。在 archetypes/ 目录下创建 .md 文件。

archetypes/default.md:

+++
title = "{{ .Title }}"
date = {{ .Date }}
draft = true
+++

archetypes/posts.md:

+++
title = "{{ .Title }}"
date = {{ .Date }}
draft = false
categories = [""]
tags = [""]
+++

当你在 Hugo 项目中运行 hugo new posts/my-first-post.md 时，Hugo 会使用 archetypes/posts.md 来生成 content/posts/my-first-post.md 文件。

6. 国际化（i18n）

如果你的网站需要支持多语言，你可以在 i18n/ 目录下创建语言配置文件（如 en.toml, zh-cn.toml）。

i18n/zh-cn.toml:

[siteTitle]
other = "世界杯竞猜官网"

[welcomeMessage]
other = "欢迎来到我们的网站！"

在模板中访问这些翻译：{{ i18n "siteTitle" }}。

7. 预览与测试

在开发过程中，使用 hugo server 命令启动本地开发服务器，并实时预览你的主题更改。

hugo server -D # -D 参数会显示草稿内容

访问 http://localhost:1313/ 来查看你的网站。

8. 部署

当你的主题开发完成并测试无误后，你可以通过 hugo 命令生成静态网站文件，然后部署到你的托管服务商。

进阶主题开发

CSS 预处理器: Hugo 可以处理 Sass/SCSS。将你的 .scss 文件放在 assets/ 目录下，Hugo 会自动编译它们。
JavaScript 模块: 同样，JavaScript 文件也可以放在 assets/ 目录下，利用 Hugo 的 Pipeline API 进行处理。
图片处理: Hugo 的 images 模块允许你在模板中对图片进行裁剪、缩放等操作。
短代码 (Shortcodes): 创建自定义的短代码，以便在 Markdown 内容中嵌入复杂的 HTML 或逻辑。
主题继承: 你可以创建一个主题，然后基于它创建另一个主题，实现代码复用。

创建 Hugo 主题是一个循序渐进的过程，需要对 HTML、CSS、JavaScript 以及 Go 模板语法有一定了解。从简单的布局开始，逐步添加功能和样式，并利用 Hugo 提供的强大工具，你可以构建出高度定制化且功能丰富的网站。世界杯竞猜官网鼓励开发者们探索 Hugo 的无限可能，创造出更多优秀的主题。