HUGO
Menu
GitHub 87548 stars Mastodon

内容组织

Hugo 假设用于组织源内容的结构也用于组织渲染后的站点。

页面 Bundle

Hugo 支持打包到 Page Bundles 中的页面相对图像和其他资源。

这些术语是相互关联的,你还需要阅读 Page ResourcesImage Processing 以获取完整的信息。

content/
├── blog/
│   ├── hugo-is-cool/
│   │   ├── images/
│   │   │   ├── funnier-cat.jpg
│   │   │   └── funny-cat.jpg
│   │   ├── cats-info.md
│   │   └── index.md
│   ├── posts/
│   │   ├── post1.md
│   │   └── post2.md
│   ├── 1-landscape.jpg
│   ├── 2-sunset.jpg
│   ├── _index.md
│   ├── content-1.md
│   └── content-2.md
├── 1-logo.png
└── _index.md

上面的文件树显示了三个 bundle。注意首页 bundle 不能包含其他内容页面,尽管允许其他文件(图像等)。

内容源的组织

在 Hugo 中,你的内容应该以一种反映渲染后网站的方式进行组织。

虽然 Hugo 支持任何级别的内容嵌套,但顶层(即 content/<DIRECTORIES>)在 Hugo 中是特殊的,被认为是用于确定布局等的内容类型。要了解更多关于 section 的信息,包括如何嵌套它们,请参阅 sections

没有任何额外配置的情况下,以下将自动工作:

.
└── content
    └── about
    |   └── index.md  // <- https://example.org/about/
    ├── posts
    |   ├── firstpost.md   // <- https://example.org/posts/firstpost/
    |   ├── happy
    |   |   └── ness.md  // <- https://example.org/posts/happy/ness/
    |   └── secondpost.md  // <- https://example.org/posts/secondpost/
    └── quote
        ├── first.md       // <- https://example.org/quote/first/
        └── second.md      // <- https://example.org/quote/second/

Hugo 中的路径分解

以下演示了当你渲染 Hugo 网站时,内容组织和输出 URL 结构之间的关系。这些示例假设你正在 using pretty URLs,这是 Hugo 的默认行为。这些示例还假设你的 site’s configuration file 中的键值为 baseURL = "https://example.org/"

索引页面:_index.md

_index.md 在 Hugo 中扮演特殊角色。它允许你为 homesectiontaxonomyterm 页面添加 front matter 和内容。

通过在 SitePage 对象上调用 GetPage 方法来访问 _index.md 文件中的内容和元数据。

你可以为首页创建一个 _index.md,并在每个内容 section、分类法和术语中创建一个。以下显示了 Hugo 网站上包含 posts section 列表页面内容和 front matter 的 _index.md 的典型放置:

.         url
.       ⊢--^-⊣
.        path    slug
.       ⊢--^-⊣⊢---^---⊣
.           file path
.       ⊢------^------⊣
content/posts/_index.md

在构建时,这将输出到具有以下关联值的目标:

url ("/posts/")
                    ⊢-^-⊣
       baseurl      section ("posts")
⊢--------^---------⊣⊢-^-⊣
         permalink
⊢----------^-------------⊣
https://example.org/posts/index.html

sections 可以嵌套到你想要的任何深度。需要理解的重要一点是,要使 section 树完全可导航,至少最底层的 section 必须包含内容文件(即 _index.md)。

section 中的单页面

每个 section 中的单个内容文件将由 page template 渲染。以下是 posts 中单个 post 的示例:

path ("posts/my-first-hugo-post.md")
.       ⊢-----------^------------⊣
.      section        slug
.       ⊢-^-⊣⊢--------^----------⊣
content/posts/my-first-hugo-post.md

当 Hugo 构建你的站点时,内容将输出到以下目标:

url ("/posts/my-first-hugo-post/")
                   ⊢------------^----------⊣
       baseurl     section     slug
⊢--------^--------⊣⊢-^--⊣⊢-------^---------⊣
                 permalink
⊢--------------------^---------------------⊣
https://example.org/posts/my-first-hugo-post/index.html

路径说明

以下概念提供了更多关于你的项目组织与 Hugo 在构建网站输出时的默认行为之间关系的见解。

section

默认内容类型由存储内容项的 section 确定。section 由项目 content 目录内的位置确定。section 不能在 front matter 中指定或覆盖。

slug

slug 是 URL 路径的最后一段,由文件名定义,并可选择由 front matter 中的 slug 值覆盖。有关详细信息,请参阅 URL Management

path

内容的 path 由 section 到文件的路径确定。文件 path

  • 基于内容位置的路径,并且
  • 不包括 slug

url

url 是整个 URL 路径,由文件路径定义,并可选择由 front matter 中的 url 值覆盖。有关详细信息,请参阅 URL Management


Last updated: January 1, 0001
Improve this page