2

I am looking to display all the tags from my collection posts in a sidebar, and have each tag click through to all the relevant posts. I would also like to display the number of times the tag has been used like this:

tag_name (10)

This is what I have currently which has got all the tags as a list but I cant figure out how to get the tag to click through to all relevant pages and also display the size.

<ul class="">
    {% assign tags =  site.vacancies | map: 'tags' | join: ','  | split: ',' | uniq %}
     {% for tag in tags %}
        <li class="text-capitalize">
            <a href="{{ tag }}" class="sidebar-tag">{{ tag }}</a>
        </li>
     {% endfor %}
 </ul>

2 Answers 2

2

First, retrieve all tags into an list by using site.tags provide by Jekyll Variables

{% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
{% assign tags_list = site_tags | split:',' | sort_natural %}

Secondly, get a link for each Tag with its post count correspondingly

<ul>
  {% for item in (0..site.tags.size) %}{% unless forloop.last %}
    {% capture this_word %}{{ tags_list[item] | strip_newlines }}{% endcapture %}
    <li><a href="#{{ this_word}}" class="tag"><span class="tag-name">{{ this_word }}</span> <span class="count">{{ site.tags[this_word].size }}</span></a></li>
  {% endunless %}{% endfor %}
</ul>

Thirdly, show each tag's name and its posts' name and date.

{% for item in (0..site.tags.size) %}{% unless forloop.last %}
  {% capture this_word %}{{ tags_list[item] | strip_newlines }}{% endcapture %}
    <article id="{{ this_word }}">
    <h2 class="tag-heading tag-name">{{ this_word }}</h2>
        <ul>
    {% for post in site.tags[this_word] %}{% if post.title != null %}
      <li><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}" >{{ post.date | date: '%m/%d/%Y' }} ---- {{ post.title }}</a></li>
    {% endif %}{% endfor %}
        </ul>
    </article>
{% endunless %}{% endfor %}
1

So there's a way to do it by creating an array of tags while iterating through posts in the collection and using lots of liquid... and I decided to do my own workaround.

I have a master list of all the tags that I use stored in /_data/tagList.yml. Each tag has a name and slug, and you can add more fields like a description if you want to. I iterate through the data in tagList, and for each tag have a link to a dedicated page that lists all the posts that contain that tag.

If you followed the Jekyll docs and used tags in the front matter and you are consistent in naming your tags, then you can use the site.tags[tag.name] | size filter to get a count on how many posts have that tag.

Drawbacks of this workaround are:

  • you need to update tagList.yml any time you make a new tag
  • you need to make a new page for that tag (not a big deal since you can just copy/paste code from other tag pages and just change the tag you're looking for)
  • you need to ensure you are consistent in naming and using tags
//   /_data/tagList.yml
- name: Coding
  slug: coding

- name: UnpopularOpinion
  slug: unpopular-opinion
//   /_posts/2019-01-01-example.html
---
tags: [Coding, UnpopularOpinion]
---
//   /blog/tags.html
{% for tag in site.data.tagList %}
    <div>
        <h2><a href="/blog/tags/{{tag.slug}}.html">{{tag.name}}</a></h2>
        {% assign postCount = site.tags[tag.name] | size %}
        <em>
            {% if postCount == 1 %}
                {{postCount}} post
            {% else %}
                {{postCount}} posts
            {% endif %}
        </em>
    </div>
{% endfor %}
//   /blog/tags/coding.html
{% assign numPosts = site.tags.Coding | size %}
{% if numPosts == 0 %}
    <p>No posts have this tag...yet.</p>
{% endif %}

{% for post in site.tags.Coding %}
    ...code to display a post...
{% endfor %}
3
  • This kinda works :D I now have a decent list of the tags and i have managed to get the tags to click through to a page. the count feature doesnt work...I am getting zero??
    – mrpbennett
    Feb 20, 2019 at 9:43
  • You can use {{ postCount }} right before the <em> to output the value of postCount. If it's always 0, then either site.tags or the tag.name is wrong. So, make sure the front matter in posts is using the tags field and that the names are exactly the same. Also forgot to mention that tags should have a comma-delimited array. tags: [Coding, UnpopularOpinion]. That might also help
    – DC.Azndj
    Feb 20, 2019 at 18:56
  • Updated the answer to be more fleshed out. Hopefully solves your bug
    – DC.Azndj
    Feb 20, 2019 at 19:08

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.