Eleventy - Custom Index - Tags

   
   
 11ty  
 ssg  
Article Series

This article series contain few sections.

Eleventy Basic

General Design

Custom Pages

Widget Component

Pagination Component

Page Content

Related Article Series

Conclusion

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Build tag tree and each tag-name page, using previous sorting and grouping filter.

Source Code

This article use tutor-06 theme. We will create it step by step.

1: Views: Tags

First thing to do is refactoring code.

Page Content: Nunjucks: Tags

Consider change the html page content with nunjucks code below.

---
layout    : tags
title     : List of Tags
eleventyExcludeFromCollections: true
---

{% include "index/tags-badge.njk" %}
{% include "index/tags-list.njk" %}

Partial: Nunjucks: Tags Badge

And move the header from previous page content into layout.

  <div class="field is-grouped is-grouped-multiline">
  {%- for tag in collections.tagList -%}
    {%- set postsList = collections[ tag ] -%}
    {%- set listCount = postsList.length -%}
    {%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}

    {% if listCount %}
    <div class="tags has-addons">
      <a href="{{ tagUrl | url }}">
        <div class="tag is-light blue lighten-2 z-depth-1"
          >{{ tag }} 
        </div><div class="tag is-dark blue darken-2 z-depth-1"
          >{{ listCount }}
        </div>
      </a>
    </div>
    &nbsp;
    {% endif %}
  {%- endfor -%}
    <div class="tags dummy"></div>
  </div>

Partial: Nunjucks: Tags List

And move the header from previous page content into layout.

  <section class="p-y-5" id="archive">
    {% for tag in collections.tagList %}
      {% set tagUrl %}/tags/{{ tag }}/{% endset %}
      <div id="{{ tag | slug }}" class ="anchor-target">
        <a href="{{ tagUrl | url }}">
        <span class="fa fa-tag"></span> 
        &nbsp; {{ tag }} </a>
      </div>
    {%- endfor -%}
  </section>

You will see previous the looks as below:

11ty: Page Content: tags

Partial: Nunjucks: Tags Tree

Consider go further with tree. I mean, each tag’s posts can also be displayed, right? We are going to utilize built in collections[ tag ].

  <section class="p-y-5" id="archive">
    {% for tag in collections.tagList %}
      {%- set postsList = collections[ tag ] -%}
      <div id="{{ tag | slug }}" class ="anchor-target">
        <span class="fa fa-tag"></span> 
        &nbsp; {{ tag }}
      </div>

      <div class="archive-list p-y-5">
      {%- for post in postsList -%}
        {% include "index/each-post.njk" %}
      {%- endfor -%}
      </div>
    {%- endfor -%}
  </section>

11ty: Layout: Tags Badge and Tags Tree

Page Content: Nunjucks: Tags

Do not forget to modify the page content.

---
layout    : tags
title     : List of Tags
eleventyExcludeFromCollections: true
---

{% include "index/tags-badge.njk" %}
{% include "index/tags-tree.njk" %}

Now we have our new looks as shown in figure below:

11ty: Page Content: tags tree

2: Views: Tag Name

There is no need to refactor the code. We can either utilize by-year.njk or by-month.njk, or even the simple one.

Page Content: Nunjucks: Tags

Consider change the html page content with nunjucks code below.

---
...
---

{% set posts = collections[ tag ] %}
{# include "index/by-year.njk" #}
{% include "index/by-month.njk" %}

  <p><a href="{{ '/tags/' | url }}" 
        class="button is-small"
       >List of all tags</a></p>

Render: Browser

Now you can see the result in your favorite browser.

11ty: Page Content: tag name

This is also displayed in tree fashioned, by grouping the posts monthly.

What is Next ?

Consider continue reading [ Eleventy - Custom Index - Blog ]. We are going to make a blog list. This is actually just an article index with different looks.

Thank you for reading.