整合 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 內。
若只是用來學習 HTML/CSS,可只安裝 Prettier、Stylelint、Live Server 與 Firefox Developer Edition 即可。
除了能在 Hugo 引用外部 CSS 檔案外,Hugo 也兼具 Webpack 角色,可順便將 CSS 加以壓縮。