整合 Hugo 與 LibSass
Hugo 內建支援 LibSass,可直接使用。
Hugo 內建支援 LibSass,可直接使用。
實務上很多目錄與檔案是由工具所建立與使用,我們並不會參與編輯,可將這些在專案中隱藏。
頁尾 部分常會在各網頁重複出現,相對應 HTML 的 <footer> 標籤,可將這部分內容抽成 footer Partial 方便維護,並搭配 _footer.scss。
頁首 部分常會在各網頁重複出現,相對應 HTML 的 <header> 標籤,可將這部分內容抽成 header Partial 方便維護,並搭配 _header.scss。
Hugo 預設以 baseof.html 提供所有頁面基礎 Template,並搭配 _baseof.scss。
HTML 的 <head> 會載入 CSS,也是各 Template 都會重複使用之處,可將其抽成 Partial 方便維護。
Hugo 內建支援 LibSass,其實也相當夠用,但 LibSass 已經停止支援,若想用最新的 Sass 語法,則必須另外安裝 Dart Sass,且 Hugo 已經原生支援 Dart Sass。
使用 Hugo 時,有些檔案並不用進 Git,我們可將這些檔案寫在 .gitignore 內。
除了能在 Hugo 引用外部 CSS 檔案外,Hugo 也兼具 Webpack 角色,可順便將 CSS 加以壓縮。
HTML在最後會載入 JavaScript,也是各 Template 都會重複使用之處,可將其抽成 Partial 方便維護。