Hugo 資料夾與檔案結構

Hugo 專案目錄結構

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

• archetypes

  • Archetypes 是建立新文章時所使用的樣版檔案
  • 在用hugo new建立一個新文章檔案時，會依序找這幾個樣版檔，並以第1個找到的當作樣版
    • archetypes/posts.md
    • archetypes/default.md
    • themes/my-theme/archetypes/posts.md
    • themes/my-theme/archetypes/default.md

• assets

  • 存放需要用Hugo pipes處理的資源(asset)
    • Hugo pipes是Hugo資源處理功能的集合
      • 例如CSS、JS的合併與壓縮
    • 只有.Permalink 或 .RelPermalink 有用到的資源才會被輸出到public資料夾
    • 預設不會建立assets資料夾

• config

  • 一般設定根目錄的config.toml即可
  • Hugo有大量的Config指令，如果網站需要額外的config設定也可以建立config資料夾做進階設定
  • Configure Hugo

• content

  • 網站的全部文章都在這個目錄
  • content裡的第一層資料夾會被Hugo視為Section
    • 例如網站有3個主要的section，資料夾會像:
      • content/blog
      • content/articles
      • content/tutorials

• data

  • 存放其它Hugo編譯網站時會用到的資料
    • 例如資料庫檔、json, toml, yaml, CSV,…
  • 資料檔不能用來產生個別的網頁
  • 可以搭配layout將其顯示在頁面中

• layouts

  • 存放內容(content)如何轉換成靜態網站的.html模板
  • ShortCodes也是放在layouts裡
  • 模板包含
    • 列表頁面(list pages)
    • 首頁(homepage)
    • taxonomy
    • templates
    • partials
    • single page templates

• static

  • 存放所有靜態的內容:
    • image, CSS, JavaScript, …
  • 當Hugo建置你的網站時，static裡的資源會被直接複製
  • 使用static資料夾的例子
    • Google Search Console驗證網站所有權的檔案
    • 只能直接複製這個檔案，不能有任何修改

• resources

  • 快取一些可以用來加速編譯網站的檔案
  • 樣板的作者可以放編譯過的SASS檔，這樣就可以不必安裝預處理器

• assets放的是要(管線)處理的檔案，如SASS, 需要壓縮的圖片

• static放的是不需要處理的檔案，如CSS, javascript, 不需要壓縮的圖片

tree /f 目錄名稱 > dirs.txt

├─archetypes        # 新文章的預設內文
├─content           # 放文章的資料夾
│  └─Hugo           # 放文章的子資料夾，不同佈景，子資料夾也不同
├─data
├─layouts           # 版面相關的檔案   
├─resources
│  └─_gen
│      ├─assets
│      └─images
├─static            # 靜態資源(EX: CSS, JS, 圖片)
│  └─images
└─themes            # 佈景資料夾
    └─hugo-theme-techdoc
        ├─archetypes
        ├─exampleSite
        │  ├─content
        │  │  ├─archives
        │  │  ├─blog
        │  │  ├─chapter1
        │  │  ├─chapter2
        │  │  ├─chapter3
        │  │  │  └─chapter3-2
        │  │  ├─entry
        │  │  ├─getting-started
        │  │  ├─post
        │  │  ├─posts
        │  │  └─sample
        │  ├─resources
        │  │  └─_gen
        │  │      ├─assets
        │  │      └─images
        │  └─static
        │      └─images
        ├─images
        ├─layouts
        │  ├─blog
        │  ├─partials
        │  │  ├─menu
        │  │  └─meta
        │  ├─posts
        │  ├─shortcodes
        │  └─_default
        ├─src
        │  ├─js
        │  │  └─jquery.backtothetop
        │  └─scss
        │      ├─foundation
        │      └─function
        └─static
            ├─css
            └─js