hugo/docs/content/indexes/displaying.md

title	date	linktitle	groups	groups_weight
Rendering Indexes	2013-07-01	Displaying	indexes	20

For Content

Index values assigned to this content

Within your content templates you may wish to display the indexes that that piece of content is assigned to.

Because we are leveraging the front matter system to define indexes for content, the indexes assigned to each content piece are located in the usual place (.Params.plural)

Example

<ul id="tags">
  {{ range .Params.tags }}
    <li><a href="tags/{{ . | urlize }}">{{ . }}</a> </li>
  {{ end }}
</ul>

Anywhere

Displaying all keys for an index

If you wish to display the list of all keys for an index you can find retrieve them from the .Site variable.

This may take the form of a tag cloud, a menu or simply a list.

The following example displays all tag keys:

Example

<ul id="all-tags">
  {{ range .Site.Indexes.tags }}
    <li><a href="/tags/{{ .Name | urlize }}">{{ .Name }}</a></li>  
  {{ end }}
</ul>

Creating a menu based on indexes

Hugo can generate menus based on indexes by iterating and nesting the index keys. This can be used to build a hierarchy of content within your site.

To have hugo create the menu, simply create a template in chrome called menu.html, then include it using the {{ template "chrome/menu.html" . }} syntax.

This example will list all indexes, each of their keys and all the content assigned to each key.

Example complete menu.html file

<section id="menu">
  <ul>
    {{ range $indexname, $index := .Site.Indexes }}
      <li><a href="/{{ $indexname | urlize }}">{{ $indexname }}</a> 
        <ul> 
          {{ range $key, $value := $index }}
          <li> {{ $key }} </li>
                <ul>
                {{ range $value.Pages }}
                    <li hugo-nav="{{ .RelPermalink}}"><a href="{{ .Permalink}}"> {{ .LinkTitle }} </a> </li>
                {{ end }}
                </ul>
          {{ end }}
        </ul>
      </li> 
    {{ end }}
  </ul>
</section>

It is more likely that you would want to use a single index for navigation. In this example we are using the groups index for our menu.

Example menu.html file using a single index

<section id="menu">
    <ul>
        {{ range $key, $index := .Site.Indexes.groups }}
        <li> {{ $key }} </li>
        <ul>
            {{ range $index.Pages }}
            <li hugo-nav="{{ .RelPermalink}}"><a href="{{ .Permalink}}"> {{ .LinkTitle }} </a> </li>
            {{ end }}
        </ul>
        {{ end }}
    </ul>
</section>

Or order the keys by Popularity

Example menu.html file using a single index

<section id="menu">
    <ul>
        {{ range .Site.Indexes.groups.ByCount }}
        <li> {{ .Name }} </li>
        <ul>
            {{ range .Pages }}
            <li hugo-nav="{{ .RelPermalink}}"><a href="{{ .Permalink}}"> {{ .LinkTitle }} </a> </li>
            {{ end }}
        </ul>
        {{ end }}
    </ul>
</section>