跳到主要内容

内容管理

内容是 Hugo 站点的核心。本章将详细介绍如何创建、组织和管理 Hugo 内容。

Front Matter​

Front Matter 是内容文件开头的元数据部分，用于定义页面的各种属性。Hugo 支持三种格式。

TOML 格式（推荐）​

使用 +++ 分隔：

+++
title = "我的文章"
date = 2024-01-15T10:00:00+08:00
draft = false
categories = ["技术"]
tags = ["Hugo", "静态网站"]
+++

文章内容...

YAML 格式​

使用 --- 分隔：

---
title: "我的文章"
date: 2024-01-15T10:00:00+08:00
draft: false
categories:
  - 技术
tags:
  - Hugo
  - 静态网站
---

文章内容...

JSON 格式​

使用 {} 包裹：

{
  "title": "我的文章",
  "date": "2024-01-15T10:00:00+08:00",
  "draft": false,
  "categories": ["技术"],
  "tags": ["Hugo", "静态网站"]
}

文章内容...

常用 Front Matter 变量​

变量说明示例
title页面标题"我的文章"
date发布日期2024-01-15
lastmod最后修改日期2024-01-20
draft是否为草稿true / false
publishDate发布日期（用于定时发布）2024-02-01
expiryDate过期日期2025-01-01
description页面描述"文章简介"
summary自定义摘要"这是摘要"
slugURL 别名"my-post"
url完整 URL/custom/path/
aliases重定向别名["/old-url/"]
weight排序权重10
tags标签["Hugo", "Web"]
categories分类["技术"]
keywords关键词["静态网站"]
author作者"张三"
image特色图片"/images/cover.jpg"
toc是否显示目录true / false
comment是否允许评论true / false

自定义 Front Matter​

你可以添加任意自定义变量：

+++
title = "产品评测"
rating = 5
product_name = "Hugo"
pros = ["快速", "简单"]
cons = ["学习曲线"]
+++

评分：{{ .Params.rating }}/5

在模板中通过 .Params 访问：

<p>评分：{{ .Params.rating }}/5</p>

内容组织​

Hugo 提供了多种方式来组织内容。

Section（分区）​

Section 是基于 content 目录结构自动创建的内容分组。

content/
├── posts/           # posts section
│   ├── _index.md
│   └── article.md
├── tutorials/       # tutorials section
│   ├── _index.md
│   └── guide.md
└── about.md         # 根级别页面

每个 Section 可以有自己的列表模板和单页模板。

Taxonomy（分类法）​

Taxonomy 是用户定义的内容分类系统，默认支持 tags 和 categories。

配置分类法

# hugo.toml
[taxonomies]
  tag = "tags"
  category = "categories"
  author = "authors"

使用分类法

+++
title = "Hugo 教程"
tags = ["Hugo", "教程"]
categories = ["技术文档"]
authors = ["张三", "李四"]
+++

访问分类法页面

  • 所有标签：/tags/
  • 特定标签：/tags/hugo/
  • 所有分类：/categories/
  • 特定分类：/categories/技术文档/

Page Bundle（页面捆绑）​

Page Bundle 将页面及其相关资源组织在一起。

Leaf Bundle（叶子捆绑）

以 index.md 结尾，有自己的 URL：

content/
└── posts/
    └── my-post/
        ├── index.md
        ├── cover.jpg
        └── images/
            └── photo.jpg

在 Markdown 中引用资源：

![封面](cover.jpg)
![照片](images/photo.jpg)

Branch Bundle（分支捆绑）

以 _index.md 结尾，用于列表页：

content/
└── posts/
    ├── _index.md
    ├── post-1.md
    └── post-2.md

创建内容​

使用命令创建​

# 创建文章
hugo new posts/my-article.md

# 创建页面捆绑
hugo new posts/my-post/index.md

# 创建 about 页面
hugo new about.md

手动创建​

直接在 content 目录下创建 Markdown 文件即可。

内容格式​

Hugo 支持 Markdown 和其他格式。

Markdown

默认格式，使用 Goldmark 解析器：

## 标题

这是**粗体**和*斜体*。

- 列表项 1
- 列表项 2

[链接](https://example.com)

![图片](image.jpg)

`行内代码`

```python
def hello():
    print("Hello, Hugo!")

**Org mode**

需要配置：

```toml
[markup]
  defaultMarkdownHandler = "org"

内容摘要​

Hugo 提供多种方式生成内容摘要。

自动摘要​

默认情况下，Hugo 取内容的前 70 个单词作为摘要。

手动摘要分割​

使用 <!--more--> 标记摘要结束位置：

+++
title = "我的文章"
+++

这是文章的摘要部分，会显示在列表页。

<!--more-->

这是文章的正文部分，只在详情页显示。

自定义摘要​

在 Front Matter 中指定：

+++
title = "我的文章"
summary = "这是自定义的文章摘要。"
+++

在模板中使用摘要​

<!-- 显示摘要 -->
{{ .Summary }}

<!-- 显示阅读更多链接 -->
{{ if .Truncated }}
<a href="{{ .RelPermalink }}">阅读更多</a>
{{ end }}

内容排序​

Hugo 支持多种排序方式。

默认排序​

默认按权重、日期排序：

{{ range .Site.RegularPages }}
    <!-- 按 weight, date 排序 -->
{{ end }}

自定义排序​

<!-- 按日期降序 -->
{{ range .Site.RegularPages.ByDate.Reverse }}
    <h2>{{ .Title }}</h2>
{{ end }}

<!-- 按标题排序 -->
{{ range .Site.RegularPages.ByTitle }}
    <h2>{{ .Title }}</h2>
{{ end }}

<!-- 按权重排序 -->
{{ range .Site.RegularPages.ByWeight }}
    <h2>{{ .Title }}</h2>
{{ end }}

<!-- 按发布日期排序 -->
{{ range .Site.RegularPages.ByPublishDate.Reverse }}
    <h2>{{ .Title }}</h2>
{{ end }}

<!-- 按最后修改日期排序 -->
{{ range .Site.RegularPages.ByLastmod.Reverse }}
    <h2>{{ .Title }}</h2>
{{ end }}

<!-- 按长度排序 -->
{{ range .Site.RegularPages.ByLength }}
    <h2>{{ .Title }}</h2>
{{ end }}

使用 weight 控制排序​

+++
title = "第一章"
weight = 1
+++

+++
title = "第二章"
weight = 2
+++

内容分组​

按日期分组​

{{ range .Site.RegularPages.GroupByDate "2006-01" }}
    <h2>{{ .Key }}</h2>
    <ul>
    {{ range .Pages }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
    </ul>
{{ end }}

按分类分组​

{{ range .Site.Taxonomies.tags }}
    <h2>{{ .Page.Title }}</h2>
    <ul>
    {{ range .Pages }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
    </ul>
{{ end }}

相关内容​

Hugo 可以根据标签、分类等推荐相关内容。

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3>相关文章</h3>
<ul>
    {{ range . }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
</ul>
{{ end }}

配置相关内容算法：

[related]
  includeNewer = true
  threshold = 80
  toLower = false
  [[related.indices]]
    name = "tags"
    weight = 100
  [[related.indices]]
    name = "categories"
    weight = 80
  [[related.indices]]
    name = "date"
    weight = 10

跨页面引用​

ref 和 relref​

引用其他页面的永久链接：

<!-- 使用 ref 获取绝对 URL -->
查看[关于页面]({{< ref "about.md" >}})

<!-- 使用 relref 获取相对 URL -->
查看[关于页面]({{< relref "about.md" >}})

<!-- 引用特定语言版本 -->
查看[关于页面]({{< ref "about.en.md" >}})

在模板中引用​

{{ with .Site.GetPage "about" }}
    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
{{ end }}

{{ with .Site.GetPage "posts/my-post" }}
    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
{{ end }}

菜单系统​

定义菜单​

在 Front Matter 中定义：

+++
title = "关于"
menu = "main"
+++

或详细配置：

+++
title = "关于"
[menu.main]
  name = "关于我们"
  weight = 3
  identifier = "about"
+++

在配置文件中定义：

[menu]
  [[menu.main]]
    name = "首页"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "博客"
    url = "/posts/"
    weight = 2
  [[menu.main]]
    name = "关于"
    url = "/about/"
    weight = 3

在模板中使用菜单​

<nav>
    <ul>
    {{ range .Site.Menus.main }}
        <li>
            <a href="{{ .URL }}">{{ .Name }}</a>
            {{ if .HasChildren }}
            <ul>
                {{ range .Children }}
                <li><a href="{{ .URL }}">{{ .Name }}</a></li>
                {{ end }}
            </ul>
            {{ end }}
        </li>
    {{ end }}
    </ul>
</nav>

多语言内容​

文件命名约定​

content/
├── posts/
│   ├── first-post.en.md    # 英文版
│   ├── first-post.zh.md    # 中文版
│   └── first-post.ja.md    # 日文版

配置多语言​

defaultContentLanguage = "zh"
[languages]
  [languages.zh]
    title = "我的博客"
    languageName = "中文"
    weight = 1
  [languages.en]
    title = "My Blog"
    languageName = "English"
    weight = 2

访问翻译链接​

{{ range .Translations }}
    <a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
{{ end }}

小结​

本章介绍了 Hugo 内容管理的核心知识：

  1. Front Matter 定义页面元数据
  2. Section 和 Taxonomy 组织内容
  3. Page Bundle 管理页面资源
  4. 摘要、排序和分组功能
  5. 菜单系统和多语言支持

下一章将学习 Hugo 模板系统，掌握如何自定义页面布局。