GETTING STARTED 基本原理

設定構建

build 配置選項

build 配置區塊包含與構建相關的全域配置選項。

hugo.
      
build:
  buildStats:
    disableClasses: false
    disableIDs: false
    disableTags: false
    enable: false
  cacheBusters:
  - source: (postcss|tailwind)\.config\.js
    target: (css|styles|scss|sass)
  noJSConfigInAssets: false
  useResourceCacheWhen: fallback

[build]
  noJSConfigInAssets = false
  useResourceCacheWhen = 'fallback'
  [build.buildStats]
    disableClasses = false
    disableIDs = false
    disableTags = false
    enable = false
  [[build.cacheBusters]]
    source = '(postcss|tailwind)\.config\.js'
    target = '(css|styles|scss|sass)'

{
   "build": {
      "buildStats": {
         "disableClasses": false,
         "disableIDs": false,
         "disableTags": false,
         "enable": false
      },
      "cacheBusters": [
         {
            "source": "(postcss|tailwind)\\.config\\.js",
            "target": "(css|styles|scss|sass)"
         }
      ],
      "noJSConfigInAssets": false,
      "useResourceCacheWhen": "fallback"
   }
}

buildStats

請參閱 設定 buildStats。

cachebusters

請參閱 設定快取突破器。

noJSConfigInAssets

(bool) 如果設為 true，則會關閉在 /assets 資料夾中寫入 jsconfig.json 檔案，用來映射執行 js.Build 的匯入檔案。此檔案主要是幫助在像是 VS Code 這類的程式編輯器中實現智慧提示和導航。請注意，如果您未使用 js.Build，則不會寫入此檔案。

useResourceCacheWhen

(string) 用於設定何時使用 /resources/_gen 中的快取資源進行 PostCSS 和 ToCSS。有效值為 never、always 和 fallback。最後一個值表示，當 PostCSS/擴展版本不可用時，將嘗試使用快取。

設定快取突破器

New in v0.112.0

build.cachebusters 配置選項是為了支援使用 Tailwind 3.x 的 JIT 編譯器開發，您可以在 build 配置中設定如下：

hugo.
      
build:
  buildStats:
    enable: true
  cachebusters:
  - source: assets/watching/hugo_stats\.json
    target: styles\.css
  - source: (postcss|tailwind)\.config\.js
    target: css
  - source: assets/.*\.(js|ts|jsx|tsx)
    target: js
  - source: assets/.*\.(.*)$
    target: $1

[build]
  [build.buildStats]
    enable = true
  [[build.cachebusters]]
    source = 'assets/watching/hugo_stats\.json'
    target = 'styles\.css'
  [[build.cachebusters]]
    source = '(postcss|tailwind)\.config\.js'
    target = 'css'
  [[build.cachebusters]]
    source = 'assets/.*\.(js|ts|jsx|tsx)'
    target = 'js'
  [[build.cachebusters]]
    source = 'assets/.*\.(.*)$'
    target = '$1'

{
   "build": {
      "buildStats": {
         "enable": true
      },
      "cachebusters": [
         {
            "source": "assets/watching/hugo_stats\\.json",
            "target": "styles\\.css"
         },
         {
            "source": "(postcss|tailwind)\\.config\\.js",
            "target": "css"
         },
         {
            "source": "assets/.*\\.(js|ts|jsx|tsx)",
            "target": "js"
         },
         {
            "source": "assets/.*\\.(.*)$",
            "target": "$1"
         }
      ]
   }
}

當啟用 buildStats New in v0.115.1 時，Hugo 會在每次構建時寫入一個 hugo_stats.json 檔案，該檔案包含 HTML 類別等數據，這些數據會用於呈現輸出的過程。此檔案的變動將會觸發 styles.css 文件的重新構建。您還需要將 hugo_stats.json 加入 Hugo 的伺服器監視範圍中。參見 Hugo Starter Tailwind Basic 來查看範例。

  • source: 一個正規表達式，匹配 Hugo 中虛擬組件目錄中的檔案，通常是 assets/...。
  • target: 一個正規表達式，匹配當 source 發生變動時應過期的資源快取中的鍵。您可以在表達式中使用來自 source 的正規表達式分組，例如 $1。

設定構建統計

hugo.
      
build:
  buildStats:
    disableClasses: false
    disableIDs: false
    disableTags: false
    enable: false

[build]
  [build.buildStats]
    disableClasses = false
    disableIDs = false
    disableTags = false
    enable = false

{
   "build": {
      "buildStats": {
         "disableClasses": false,
         "disableIDs": false,
         "disableTags": false,
         "enable": false
      }
   }
}
New in v0.115.1

如果 enable 設定為 true，將在您的專案根目錄建立一個 hugo_stats.json 檔案。此檔案包含已發布網站中每個 HTML 元素的 class 屬性、id 屬性和標籤。當 移除未使用的 CSS 之類的過程時，可以將此檔案作為數據來源。這一過程通常稱為修剪、清除或樹狀搖動。

您可以使用 disableClasses、disableIDs 和 disableTags 來從 hugo_stats.json 中排除 class 屬性、id 屬性或標籤。

Babel 術語表