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