How to Link to a Project's Detailed Info Page

Overview

• The following instructions are for how to link to a project's detailed information page using
  • the filenames from the Markdown files in _projects directory,
  • Liquid template language, and
  • Jekyll.
• We will be using code snippets from this example. It is recommended to view the code snippets in the context of the code in order to understand it better.

Instructions

1. Create a variable with a relative pathname using Jekyll's slug attribute [ref 1] and using Liquid's prepend to prepend "../projects/" [ref 2]. Slug uses the filename of a document and any character except numbers and letters is replaced as hyphen in the filename [ref 1].

• From the example, see line 45: {% assign project_relative_path = project.slug | prepend: "../projects/" %}

2. Use the relative pathname variable for the href.

• From the example, see line 48: <a class="project-card-mini-title" href="{{ project_relative_path }}">{{project.title}}</a>

References [1] See Jekyll's documentation on slug: https://jekyllrb.com/docs/permalinks/#placeholders [2] Liquid template language's prepend: https://shopify.github.io/liquid/filters/prepend/