How to Display Files and Folders in a Sidebar in Jekyll¶

{% raw %}

This guide will show you how to display files and folders in a sidebar in Jekyll, and how to create a hyperlink for each file.

Steps¶

Get the root folder of the collection

In Jekyll, a collection is a group of related documents. In this case, the collection is named "notes". We use the where filter to find the collection with the label that matches page.collection, and the first filter to get the first (and only) match.

{% assign root_folder = site.collections | where: "label", page.collection | first %}
<h2>Root Directory: {{ root_folder.label }}</h2>

Sort the documents in the root folder by their path

Each document in a collection has a path property that gives its location relative to the site source. We use the sort filter to arrange the documents in alphabetical order by their path.

{% assign docs = root_folder.docs | sort: 'path' %}

Initialize a variable to keep track of the previous path

We need to keep track of the path of the previous document so that we can compare it with the path of the current document. This allows us to determine when the path changes, which indicates a new folder.

{% assign prev_path = "" %}

Start an unordered list to display the files and folders

We use an unordered list (<ul>) to display the files and folders. Each file and folder will be a list item (<li>).

<ul>

Loop through each document

We use a for loop to iterate over each document in the collection.

{% for doc in docs %}

Get the path of the current document without the file name

We use the split filter to divide the path into an array of folders, and the pop filter to remove the last item from the array, which is the file name. This gives us the path of the current document without the file name.

{% assign current_path = doc.path | split: '/' | pop %}

If the current path is different from the previous path, create a new list item for each folder in the path

We compare the current path with the previous path. If they are different, this means we have moved to a new folder. We then create a new list item for each folder in the current path, excluding the root folder.

{% if current_path != prev_path %}
  {% for folder in current_path %}
    {% if forloop.index != 1 %}
      <li class="folder">{{ folder }}</li>
    {% endif %}
  {% endfor %}
  {% assign prev_path = current_path %}
{% endif %}

Create a list item with a hyperlink for each file

We create a list item for each file, with the file name being a hyperlink to the file's URL. We use the doc.url property to get the URL of the file.

<li class="file"><a href="{{ doc.url }}">{{ doc.title }}</a></li>

End the document loop

We close the for loop that iterates over the documents.

{% endfor %}

End the unordered list

We close the unordered list that displays the files and folders.
```
</ul>
```

This will display the files and folders in a sidebar, with each file being a hyperlink to its URL. The folders will not be repeated for each file, and the root folder will not be included in the path.