Content view templates

The following are common use cases for content views:

• You want content of every type to be shown on the home page but only with limited summary views.
• You only want a bulleted list of your content in a taxonomy template. Views make this very straightforward by delegating the rendering of each different type of content to the content itself.

Create a content view

To create a new view, create a template in each of your different content type directories with the view name. The following example contains an “li” view and a “summary” view for the posts and project content types. As you can see, these sit next to the single template, single.html. You can even provide a specific view for a given type and continue to use the _default/single.html for the primary view.

  ▾ layouts/
    ▾ posts/
        li.html
        single.html
        summary.html
    ▾ project/
        li.html
        single.html
      summary.html

Which template will be rendered?

The following is the lookup order for content views ordered by specificity.

1. /layouts/<TYPE>/<VIEW>.html
2. /layouts/<SECTION>/<VIEW>.html
3. /layouts/_default/<VIEW>.html
4. /themes/<THEME>/layouts/<TYPE>/<VIEW>.html
5. /themes/<THEME>/layouts/<SECTION>/<VIEW>.html
6. /themes/<THEME>/layouts/_default/<VIEW>.html

Example: content view inside a list

list.html

In this example, .Render is passed into the template to call the render function. .Render is a special function that instructs content to render itself with the view template provided as the first argument. In this case, the template is going to render the summary.html view that follows:

<main id="main">
  <div>
    <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
      {{ .Render "summary" }}
    {{ end }}
  </div>
</main>

summary.html

Hugo passes the Page object to the following summary.html view template.

<article class="post">
  <header>
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
    <div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
  </header>
  {{ .Summary }}
  <footer>
  <a href='{{ .RelPermalink }}'>Read&nbsp;more&nbsp;&raquo;</a>
  </footer>
</article>

li.html

Continuing on the previous example, we can change our render function to use a smaller li.html view by changing the argument in the call to the .Render function (i.e., {{ .Render "li" }}).

<li>
  <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
  <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</li>