深入瞭解 Hugo Blog 目錄結構

 發表於 2022-08-07  (最後修改於 2023-04-16)  |  2 分鐘  |  700 個字  |  androchentw

Overview

Challenges

  1. 隨著 blog post 越來越多, content/posts 下的 md 會越來越多, 想要好好整理一個大分類, 方便後續文章管理

Objectives

  1. 建立 content/posts 分類 folder structure, 並與 series 相對應

KRs

  1. 2022-08-07 分類所有 blog posts

Content

實戰: 調整目錄結構

  • Directory Structure

    • All content for your website will live inside this directory. Each top-level folder in Hugo is considered a content section.

    • For example, if your site has three main sections—blog, articles, and tutorials—you will have three directories at content/blog, content/articles, and content/tutorials. Hugo uses sections to assign default content types.

      1
2
3
4
5
6
7
8

      .
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

  • Content Types

    • Hugo is built around content organized in sections.
    • A content type is a way to organize your content.
    • 善用 Archetypes 幫你快速產生文章範本
      • Archetypes are templates used when creating new content.
    • 每份 md 裡的 type 好像也可以拿來用作分類使用

  • Content Sections

    • Hugo generates a section tree that matches your content.

    • A Section is a collection of pages that gets defined based on the organization structure under the content/ directory.

    • Nested Sections

    • 實際上就是直接在 content 底下開資料夾, 並且加入 _index.md 就可以了!

      1
2
3
4
5
6
7
8

      content
└── blog        <-- Section, because first-level dir under content/
    ├── funny-cats
    │   ├── mypost.md
    │   └── kittens         <-- Section, because contains _index.md
    │       └── _index.md
    └── tech                <-- Section, because contains _index.md
        └── _index.md

  • config.toml

    • mainSections

    • 我們要在 config.toml 新增 menu.main, 讓他能在 navigation bar 顯現

      1
2
3
4
5

      [[menu.main]]
  name = "Tech"
  pre = '<i class="fas fa-laptop-code fa-lg"></i>'
  url = "/tech/"
  weight = 1

    • Taxonomies

      • Hugo includes support for user-defined taxonomies.
      • Hugo includes support for user-defined groupings of content called taxonomies. Taxonomies are classifications of logical relationships between content.

Other Reference: 深入瞭解 Hugo 設計

  • Content Organization

    • Hugo assumes that the same structure that works to organize your source content is used to organize the rendered site.
    • The illustration shows three bundles. Note that the home page bundle cannot contain other content pages, although other files (images etc.) are allowed.
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

  • Page Bundles

    • Branch Bundles

      • A Branch Bundle is any directory at any hierarchy within the content/ directory, that contains at least an _index.md file.
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

      content/
├── branch-bundle-1
│   ├── branch-content1.md
│   ├── branch-content2.md
│   ├── image1.jpg
│   ├── image2.png
│   └── _index.md
└── branch-bundle-2
    ├── _index.md
    └── a-leaf-bundle
        └── index.md

Conclusion

實際會動到的 code

  1. 創建 content/ 下的 folder, 並加上 _index.md. git commit - feat: add sections
  2. 調整 config.toml, 使之顯示在 nav bar. git commit - feat: rearrange order weight of nav bar

Discussion

Ref

Murmur

  • 2022-08-07 整理癖…
blog 

其他相關