タグ : Hugo
Dot 與 Page Object 與 Site Object 關係
Go Template 的 . 有 Context 概念，本文解釋為什麼 . 可以存取 Page Object 與 Site Object。
整合 Hugo 與 Pico CSS
Pico CSS 為著名的 Classless CSS，特別適合 Blog、Document 之類應用，而 Hugo 也適合 Blog 與 Document，因此 Hugo 與 Pico CSS 可說是天作之合。
使用 Prettier 美化 Go Template
Prettier 內建並沒有支援 Go Template，必須另外安裝社群所開發的 prettier-plugin-go-template 才可支援，並將 .html 交給該 Plugin 管理。
Hugo X Vue 3 實現 Todo List
Hugo 雖然常搭配 Petite-vue，但只能使用 reactive()，也沒 computed() 可用，若搭配 Vue 3 就能使用 ref() 與 computed()。
使用 Go Template Plugin 支援 Hugo
Hugo 的 Layout 是使用 Go Template，我們可安裝 JetBrains 官方的 Go Template Plugin 使其語法變色。
整合 Hugo 與 Alpine
Alpine 特別適合後端有自己 Template Engine 的使用場景，Hugo 雖然為 SSG，但因為使用了 Go Template，事實上與後端類似，因此也適合 Alpine。
整合 Hugo 與 Petite-vue (ESM)
Petite-vue 特別適合後端有自己 Template Engine 的使用場景，Hugo 雖然為 SSG，但因為使用了 Go Template，事實上與後端類似，因此也適合 Petite-vue，更可還原 Composition API 風格在 Hugo 上。
整合 Hugo 與 Petite-vue (IIFE)
Petite-vue 特別適合後端有自己 Template Engine 的使用場景，Hugo 雖然為 SSG，但因為使用了 Go Template，事實上與後端類似，因此也適合 Petite-vue，更可還原 Alpine 風格將 JavaScript 寫在 HTML 內。
如何使用 YAML 格式 Front Matter？
Hugo CLI 並沒有提供參數指定 Front Matter 的格式，預設會在 archetypes 目錄下建立 TOML 格式的 default.md，必須手動將 TOML 改成 YAML 後，將來 hugo new content 才會使用 YAML 格式。
Hugo 預設目錄架構
Hugo 不僅是個 CLI，更是一個 Framework，當使用 hego new site 建立一新站台後，他會自動建立一些預設目錄與檔案，可使團隊有相同的開發依據，也方便我們了解其他 Theme 架構。
為什麼該將 HTML 寫在 themes 而非 layouts？
Hugo 提供兩個目錄讓我們放 HTML Template：layouts 與 themes，若該專案只是自己使用，並沒有想發布主題，或許你會想將所有 HTML Template 寫在 layouts 即可，但實務上仍建議寫在 themes 底下。
使用 Hugo Module 安裝 Hextra 主題
Hextra 主題有多種安裝方式，若不想修改 Hextra 主題，且想獲得最乾淨的原始 Hugo 專案，則使用 Hugo Module 也是不錯方式。
使用 Git Submodule 安裝 Hextra 主題
Hextra 主題有多種安裝方式，若想修改 Hextra 主題，且想獲得最乾淨的原始 Hugo 專案，則要使用 Git Submodule 方式安裝。
Congo Theme Overview
Install Congo theme with the default configuration and the example site. Congo theme is built with TailwindCSS 3.2.
Building a Basic Theme
Although we can place all layouts into the layouts folder, we can also place these layouts into the themes folder to build our theme.
Creating index.html for Home Page Layout
Since home page has a different look than other content page, Hugo uses a separate layout layouts/index.html for the home page to generate.
Creating list.html for List Page Layout
When using hugo new to create many markdown files for a section, Hugo uses layouts/_default/list.html as the default list page layout to generate.
Integrating HATstack with Hugo
Hugo is great for JAMstack, but we have to use vanilla JavaScript and CSS to create templates. With Alpine and TailwindCSS, we can create layouts by declarative style directly in HTML.
Cleaning Up the public Folder
Hugo doesn’t clean up the public folder. If you were to remove some pages or rename them, you would need to delete the generated versions from the public folder as well.
Creating single.html for Single Page Layout
When using hugo new to create a markdown file, Hugo uses layouts/_default/single.html as the default single page layout to generate.