Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display tags in jekyll and get the tag to click through to all relevant collection posts

Tags:

tags

jekyll

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>
like image 274
mrpbennett Avatar asked Dec 29 '25 09:12

mrpbennett


1 Answers

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 %}
like image 81
Lei.L Avatar answered Dec 31 '25 23:12

Lei.L