次世代 Hugo

無駄を削ぎ、本質を研ぐ

建立文章清單 Template

Sam Xiao's Avatar 2025-07-09

Hugo 預設以 list.html 提供文章清單 Template，並搭配 _list.scss 與 _list.js。

Version

Hugo 0.147.8

List Template

layouts/list.html

{{ define "main" }}
  {{ partial "header.html" . }}
  <main class="list">
    <h1>{{ .Title }}</h1>
    <ul>
      {{ range .Pages }}
        <li>
          <a href="{{ .RelPermalink }}">
            {{ .Title }}
          </a>
        </li>
      {{ end }}
    </ul>
  </main>
  {{ partial "footer.html" . }}
{{ end }}
  • 為 markdown 清單建立 list.html

Line 1

{{ define "main" }}
{{ end }}
  • 配合 baseof.html 定義 main block

Line 2

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

Line 3

<main class="list">
  <h1>{{ .Title }}</h1>
  <ul>
    {{ range .Pages }}
    <li>
      <a href="{{ .RelPermalink }}">
        {{ .Title }}
      </a>
    </li>
    {{ end }}
  </ul>
</main>
  • list.html 主要內容都放在 <main> 底下，且搭配 list class

Line 15

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

Baseof Template

layouts/baseof.html

<!doctype html>
<html lang="en">
  <head>
    {{ partial "css.html" . }}
  </head>
  <body>
    {{ block "main" . }}{{ end }}
    {{ partial "js.html" . }}
  </body>
</html>
  • 所有 template 基礎的 baseof.html

Line 6

<body>
  {{ block "main" . }}{{ end }}
</body>
  • 在 <body> 內引用 main block

List Style

assets/scss/_list.scss

.list {
  padding: 2rem;

  ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}
  • 搭配 list.html 的 SCSS
  • 使用 巢狀 寫法與 HTML 結構同步方便維護

List Script

assets/js/_list.js

export const initList = () => {
  console.log('initList()')
}
  • 搭配 list.html 的 JavaScript

Conclusion

  • 無論在 layouts 下或 themes 下，都可使用 list.html 為文章清單 template
  • list.html 相當精簡，只包含 header partial、footer partial 與 main block
  • assets/scss 與 layouts 下的目錄架構完全相同
  • assets/js 與 layouts 下的目錄架構完全相同
  • list.html 對應 _list.scss 與 _list.js 方便維護，不必將所有 SCSS 與 JavaScript 都寫在 main.scss 與 main.js 內

# Hugo