次世代 Hugo

無駄を削ぎ、本質を研ぐ

建立頁尾 Partial

Sam Xiao's Avatar 2025-07-16

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

Version

Hugo 0.148.0

layouts/_partials/footer.html

<footer class="footer">
  <p>Copyright {{ now.Year }}. All rights reserved.</p>
</footer>
  • 將 <footer> 的內容放在 footer partial 內

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 9

{{ partial "footer.html" . }}
  • 引用 footer partial

assets/scss/_partials/_footer.scss

@use 'vars';

.footer {
  padding: 1rem;
  background: vars.$footer-background-color;
  text-align: center;
}
  • 搭配 footer.html 的 SCSS

Conclusion

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

# Hugo