建立頁首 Partial
頁首 部分常會在各網頁重複出現,相對應 HTML 的 <header> 標籤,可將這部分內容抽成 header Partial 方便維護,並搭配 _header.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 加以壓縮。
HTML在最後會載入 JavaScript,也是各 Template 都會重複使用之處,可將其抽成 Partial 方便維護。
除了 Homepage 外,有些頁面也會特別客製化,如 About、Series …等,我們也可針對這類頁面設計特別 Template,並搭配獨立 SCSS 與 JavaScript。
Hugo 預設以 list.html 提供文章清單 Template,並搭配 _list.scss 與 _list.js。