Jekyll markdown note tags setup

Jan 26, 2022

Introduction

I use Obsidian to create markdown notes and place the tags in the front matter. On my Jekyll website (my Digital Garden), these tags are utilized for navigation. My setup is described below.

First setup your Digital Garden with GitHub and for example Cloudflare Pages. Then install the paginate V2 plugin so that among other things pages for tags are automatically generated. Icons for the tags can be set with the Font Awesome Icons.

Setup

Tags and markdown notes

Add tags to the YAML front matter of a markdown note like this:

tags: jekyll obsidian

Jekyll index page setup

Add the following to index.html, above the html code with the Notes - Page h3 header:

// To edit use your text editor application, for example Nano
<p style="padding: 3rem 3.75rem; background: #f5f7ff; margin-bottom: 2rem; border-radius: .3rem; box-sizing: border-box; max-width: 66.666667%; text-align: center; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; margin-left: 16.666667%;">
  <b>Explore</b>
  {% comment %}map, flatten and sort{% endcomment %}
  {% assign tags =  site.notes | map: 'tags' | join: ','  | split: ',' | sort %}
  {% assign previousTag = "" %}
  {% assign counter = 0 %}

  {% for currentTag in tags %}

  {% comment %}first loop : initializing previousTag{% endcomment %}
  {% if previousTag == "" %}
    {% assign previousTag = currentTag %}
  {% endif %}

  {% if currentTag == previousTag %}
    {% assign counter = counter | plus: 1 %}
  {% else %}
  {% if previousTag == "cloudflare" %}
    <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}"><i class='fab fa-cloudflare'></i>&nbsp;{{- previousTag -}}&nbsp;({{ counter }})</a>
  {% elsif previousTag == "digitalgarden" %}
    <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}"><i class='fa fa-seedling'></i>&nbsp;{{- previousTag -}}&nbsp;({{ counter }})</a>
  {% else %}
    <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}">{{- previousTag -}}&nbsp;({{ counter }})</a>
  {% endif %}
  {% assign counter = 1 %}
  {% endif %}

  {% comment %}last loop : flushing what's left to print{% endcomment %}
  {% if forloop.last %}
    {% if previousTag == "cloudflare" %}
    <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}"><i class='fab fa-cloudflare'></i>&nbsp;{{- currentTag -}}&nbsp;({{ counter }})</a>
  {% elsif previousTag == "digitalgarden" %}
    <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}"><i class='fa fa-seedling'></i>&nbsp;{{- currentTag -}}&nbsp;({{ counter }})</a>
  {% else %}
    <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}">{{- currentTag -}}&nbsp;({{ counter }})</a>
  {% endif %}
  {% endif %}

  {% assign previousTag = currentTag %}

{% endfor %}
</p>

This will add the ‘tag cloud’. As an example I took the cloudflare tag and digitalgarden tag. You will have to manually add new tags to the code once (I don’t think this is a problem myself). The paginate V2 plugin ensures that the /tag/ pages are further generated automatically.

Insert under the first loop and ensure it is placed beneath the digitalgarden tag code:

// To edit use your text editor application, for example Nano
{% comment %}Add under the first loop{% endcomment %}
{% elsif previousTag == "docker" %}
<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}"><i class='fab fa-docker'></i>&nbsp;{{- previousTag -}}&nbsp;({{ counter }})</a>

Insert under the last loop and ensure it is placed beneath the digitalgarden tag code:

// To edit use your text editor application, for example Nano
{% comment %}Add under the last loop{% endcomment %}
{% elsif previousTag == "docker" %}
<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}"><i class='fab fa-docker'></i>&nbsp;{{- currentTag -}}&nbsp;({{ counter }})</a>

Now you have added a Docker tag.

Jekyll notes setup

The main page of this website also has tags listed under each note. This code is in notes.html and has already been added if the steps are followed within the note about the Paginate V2 plugin. A note page also has tags so add the following code to note.html:

// To edit use your text editor application, for example Nano
{% include tags.html %}

I chose to place the tags under the content within the div labeled notes-entry-container.

Then add the following code to tags.html (within the _includes folder):

// To edit use your text editor application, for example Nano
<h3 style="margin-bottom: 1em"><i class='fa fa-tags'></i> Tags</h3>
<ul class="tag">
  {% for tag in page.tags %}
    <li class="tag__item"><a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- tag -}}">{{- tag -}}</a></li>
  {% endfor %}
</ul>

Comments

No comments found for this note.

Join the discussion for this note on Github. Comments appear on this page instantly.