建立頁首 Partial | 次世代 Hugo

頁首 部分常會在各網頁重複出現，相對應 HTML 的 <header> 標籤，可將這部分內容抽成 header Partial 方便維護，並搭配 _header.scss。

Version

Hugo 0.148.0

Header Partial

layouts/_partials/header.html

<header class="header">
  <h1>Hugo is awesome</h1>
</header>

• 將 <header> 的內容放在 header partial 內，且搭配 header class

Single Template

layouts/single.html

{{ define "main" }}
  {{ partial "header.html" . }}
  <main class="single">
    <h1>{{ .Title }}</h1>
    <article>
      {{ .Content }}
    </article>
  </main>
  {{ partial "footer.html" . }}
{{ end }}

• 為單筆 markdown 建立 single.html

Line 2

{{ partial "header.html" . }}

• 引用 header partial

Header Style

assets/scss/_partials/_header.scss

@use 'vars';

.header {
  padding: 1rem;
  background: vars.$header-background-color;
}

• 搭配 header.html 的 SCSS

Conclusion

• 無論在 layouts 下或 themes 下，都可在 _partials 目錄的 *.html 作為 Partial 使用
• assets/scss 與 layouts 下的目錄架構完全相同
• header.html 對應 _header.scss 方便維護，不必將所有 SCSS 都寫在 main.scss 內