Jekyll - Setup Markdown Note Tags

I use Obsidian to make markdown notes. I put the tags in the front matter. On this Jekyll website (my Digital Garden) these tags are used to navigate. My setup is described below.

Dependencies

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.

Tags and markdown notes

Add tags to the yaml front matter of a markdown note as follows:

tags: jekyll obsidian

Setup Jekyll - Index page

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

<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’: the Explore part as you can see on the home page.

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. You can add a tag for Docker as follows:

Add under the first loop and make sure beneath the digitalgarden tag code:

{% 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>

Add under the last loop and make sure beneath the digitalgarden tag code:

{% 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>

Setup Jekyll - Notes

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 (which is open to read) also has tags. For that you can add the following code to note.html:

{% include tags.html %}

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

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

<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>

Read other notes

Comments

    No comments found for this note.

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

    Tags


    Notes mentioning this note

    There are no notes linking to this note.


    Notes Graph