前言

今天要進一步介紹 Hugo Site 與內容分類頁面有關的部分：Content Section 與 Page Bundle。

Content Sections

Hugo 會依據專案底下的 ./content/* 生成網站可被瀏覽的內容頁面，搭配設置 Content Type (在 Front Matter 中的 type: section-folder)，渲染時會將匹配內容彙整成一頁 Content Section 頁面，例如：

這些 content section page 就像是「把文章分成一類 Content of Collection」的概念，你可以透過網址 http://your.baseurl.blog/section 列出對應文章選單。

請注意，要成為一組 Content Section，在資料夾底下至少要有一支 filename.md。

巢狀 Sections

Hugo 默認都是抓 ./content 底下第一層資料夾 (first-level) 為 Content Section，但也可以自訂整個巢狀結構中，哪些資料夾要設為 Content Section，只要在該資料夾底下建立一個 _index.md 檔案即可，舉例來說：

./content
├── another-section <---------- (section, 因為是 first-level folder)
│   └── another-section-post.md
└── post <--------------------- (section, 因為是 first-level folder)
    ├── first-post.md
    ├── nested-1 <------------- (section, 因為底下有 _index.md)
    │   ├── _index.md
    │   └── foo.md
    └── second-post.md

以下是 nested-1 的 Content Section 頁面：

Content Types

當你的文章在 first-level folder 底下，你必須設置 Content Type 讓文章可以「匹配」資料夾名稱，這邊以下列兩篇文章設置為例：

# ./content/post/first-post.md

---
title: "Second Post"
date: 2020-09-24T22:05:52+08:00
type: post

與

# ./content/post/second-post.md

---
title: "Second Post"
date: 2020-09-24T22:05:52+08:00
type: not-post-section

因為 second-post.md 的 content type 設為 not-post-section != post，因此 second-post.md 這篇文章就不會出現在 Section Page 中：

筆者好奇的測試了一下，有幾種文章出現在 Content Section 頁面與否的設置方式：

• 正常顯示內容

  • ./content/first-level 資料夾預設為 Section，資料夾底下的文章，無論有沒有設置 type: first-level-folder-name，都會於 Content Section Page 中列出。

• 內容會消失

  • 擁有 _index.md 的資料夾會被當作 Section，但若 _index.md 的 Front Matter 中設置了 type: non-post 整個 Section 頁面內容就會不見 (但網址一樣存在)。
  • 設置 type: not-first-level-folder-name-section 會把該文章從對應 Content Section 中移除。

Page Bundle

Page Bundle 可以讓使用者將頁面、頁面相關資源放在一包；Hugo 提供了三種 Bundle：

• Leaf Bundle：底下沒有任何子資料夾，只有文章與資源檔案
• Branch Bundle：與 Leaf 相對，其資料夾底下「至少有一個」子資料夾，與其他文章和資源檔案
• Headless Bundle：專門用來放 Page Resource 的，不會被發布，但可以載入該 Bundle 的資源使用

以下會以 Leaf Bundle 為例說明。

Leaf Bundles

結構如下：

./content
├── about-me <---------------------- (leaf bundle, 因為有 index.md)
│   └── index.md
└── post
    ├── section
    │   └── another-leaf-bundle <--- (leaf bundle, 因為有 index.md)
    │       └── index.md
    └── writing
        ├── image-1.jpg
        ├── image-2.jpg
        └── index.md <-------------- (leaf bundle, 上圖展示的頁面)

./content/post/writing/index.md 內容：

---
title: "Index Bundle Page"
type: post
---

我是 index.md

訪問 http://your.baseurl.blog/post/writing：

可以看出不管在哪一層的資料夾，都可以是一組 Leaf Bundle。圖片是透過 Page Resources 語法，修改 theme layout 秀出來的，請看以下說明；

筆者將以下這段：

{{ with .Resources.ByType "image" }}
  <div class="Image">
    {{ range . }}
      <!-- 圖片在此 -->
      <img src="{{ .RelPermalink }}">
      <p style="text-align: center; margin-top: 5px; margin-bottom: 25px;">{{ .Title }}</p>
    {{ end }}
  </div>
{{ end }}

放在佈景提供的這個檔案中 (找到 {{ .Content }} 放在他附近)：

./themes
└── tranquilpeak
    ├── layouts
    │   ├── _default
    │   │   ├── ...
    │   │   ├── single.html <--- here.
    │   ├── ...
    ├── ...

上面這個例子 {{ with .Resources.ByType "image" }} 是找出所有 image，有關於匹配規則請參考 Pattern Matching)；若是要引入某張圖片，穿插在文章之中時，筆者是透過 shortcode 的方式插入插圖，在之後的文章會在介紹。

Branch Bundle

Branch Bundle 與 Leaf Bundle 是很像的東西，用法只差在前者需建立的是 _index.md，後者是 index.md；至於何時該用 Leaf Bundle，何時用 Branch Bundle，筆者建議可以：

• Leaf Bundle：單頁應用時使用，頁面規劃上，該頁面已經不會往下點擊，展開任何內容。
• Branch Bundle：預期會是一整個 List 頁面時使用，例如 Taxonomy 列表頁面。

小結

今天筆者試著帶了些 (簡單的?) 例子讓大家認識 Content Section 與 Page Bundle，讓我們在規劃資料夾結構、網址結構，以及網站內容時，多一份工具可以運用。

另外，文中提到的 Page Resources 不限於圖片檔案，其他文件也都可以當作一種資源存放、取用。

在實務運用上，若你習慣把文章使用到的圖片、檔案等資源，放在使用到這些資源的文章相同的路徑底下，就可以走 Leaf Bundle 流派 (有些人習慣集中放在 ./static/images 底下，或是直接另外丟在別的地方)。

參考連結

• Hugo Content Organization
• Hugo Content Sections
• Hugo Content Types
• Hugo Page Bundles
• Hugo Page Resources
• Hugo: Leaf and Branch Bundles