Jekyll markdown note tags setup
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.
Requirements
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> {{- previousTag -}} ({{ counter }})</a> {% elsif previousTag == "digitalgarden" %} <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}"><i class='fa fa-seedling'></i> {{- previousTag -}} ({{ counter }})</a> {% else %} <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}">{{- previousTag -}} ({{ 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> {{- currentTag -}} ({{ counter }})</a> {% elsif previousTag == "digitalgarden" %} <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}"><i class='fa fa-seedling'></i> {{- currentTag -}} ({{ counter }})</a> {% else %} <a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}">{{- currentTag -}} ({{ 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> {{- previousTag -}} ({{ 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> {{- currentTag -}} ({{ 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>
No comments found for this note.
Join the discussion for this note on Github. Comments appear on this page instantly.