Page Layout - Single & List

Lets add basic html template for our pages

Page Layout Templates

Create folder _default inside content/layouts . Ideally all these themeing goes under themes, but as I mentioned earlier we are not going to touch themes, for learning purpose.

Add 3 files,

  • baseOf.html
  • list.html
  • single.html

Refer to the repo https://github.com/pixobe/hugo-tutorial.git, and copy the content if you want to make it quicker.

baseOf.html

The file under _default folder contains the default layout for our site, if you remember in the previous step, we added define "main" , this is what it means when we are using default layout, what ever defined inside main block will be replacing the block "main" in below code.

<!DOCTYPE html>
<html>
   {{- partial "head.html" . -}}
   <body>
       {{- partial "header.html" . -}}
       <div id="content">
       {{- block "main" . }}{{- end }}
       </div>
       {{- partial "footer.html" . -}}
   </body>
</html>

By default all the page contains

  • Header
  • Content and a
  • Footer

list.html

What is list.html used for? in layman terms, this is the template to display folder level content.

For example, lets say we have a folder named blog under content, and our blog has few pages under it like

  • how-to-earn-money-online.md
  • how-to-start-blogging.md
  • my-struggles-with-affiliate-marketing.md

So you will access to all the pages under the folder blog (in hugo terms its section)

{{ define "main" }}
<h1>{{.title}}</h1>
<h2>List of articles under the {{.title}}</h2>
<ul>
  {{ range .Pages }}
  <!-- Theme variable-->
  <li>{{partial (printf "cards/%s.html" $theme) .}}</li>
  {{ end }}
</ul>
<!---->
{{ end}}

single.html

This is where you code template for your individual page, for all the individual frontmatter or pages under blog as mentioned above you Hugo will use this templat to render

{{ define "main" }}
<h1>{{.title}}</h1>
<h2>{{.description}}</h2>
<div>{{.Content}}</div>
<!---->
{{ end}}

Folder Structure

After you create necessary files and copy the content, the folder structure looks like this

Refer the git repo https://github.com/pixobe/hugo-tutorial

Note

As of now nothing changes, as we just defined our layouts and we havenot added header and footer yet

Coming next

Step 3: Header and Footer : Lets add some header and footer to our site.