點燈坊

失くすものさえない今が強くなるチャンスよ

Creating list.html for List Page Layout

Sam Xiao's Avatar 2022-03-03

When using hugo new to create many markdown files for a section, Hugo uses layouts/_default/list.html as the default list page layout to generate.

Version

Hugo 0.92

Create Markdown

$ hugo new tailwindcss/post1.md
  • hogo new : create markdown file by the default archetypes/default.md
  • tailwindcss/post1.md : create markdown under tailwindcss section

list000

post1.md is created by Hugo CLI.

list001

post1.md is created under the tailwindcss folder.

Markdown Content

tailwindcss/post1.md

---
title: "TailwindCSS Post1"
date: 2022-03-02T22:09:53+08:00
draft: false
---
This is Post1 for TailwindCSS

Modify post1.md as above to provide page variable and content.

list002

_index.md for Section Content

_index.md

---
title: TailwindCSS Series
description: Posts for TailwindCSS
---

Add _index.md under the tailwindcss folder to provide page variable for list page.

_index.md is a special file for section

list003

List Page Layout

layouts/_default/list.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/alpine.js" defer></script>
    <link rel="stylesheet" href="/output.css" />
    <title>{{ .Site.Title }}</title>
  </head>
  <body>
    <h2 class="text-4xl text-red-700">{{ .Title }}</h2>
    <ul>
      {{ range .Pages }}
      <li>
        <a href="{{ .Permalink }}">{{ .Title }}</a>
      </li>
      {{ end }}
    </ul>
  </body>
</html>

Create list.html for the default list page layout.

Line 6

<script src="/alpine.js" defer></script>
<link rel="stylesheet" href="/output.css" />

Since alpine.js and output.css are located under the static folder, we have to add / to access alpine.js and output.css.

Line 11

<h2 class="text-4xl text-red-700">{{ .Title }}</h2>
  • .Title : page variable from _index.md under tailwindcss folder

Line 12

<ul>
  {{ range .Pages }}
  <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
  </li>
  {{ end }}
</ul>
  • .Pages : contains all of the pages related to the section we’re working with
  • range : iterate over .Pages collection to get each page
  • .Permalink : get the URL of each page
  • .Title : get the title of each page

List Page

list004

Hugo creates the list page for the tailwindcss section on http://localhost:1313/tailwindcss/.

list005

Click each link on the list page. It will redirect to the post1 content page rendered by layouts/_default/single.html.

There are 3 basic layouts for Hugo :

  • layouts/index.html : default layout for home page
  • layouts/_default/single.html : default layout for single page and content page
  • layouts/_default/list.html : default layout for list page

Conclusion

  • layouts/_default/single.html is the default layout for single page and content page, whereas layouts/_default/list.html is the default layout for list page

Reference

Hugo, Lists of Content in Hugo

# Hugo