How to link to a projects detailed info page
Overview#
- The following instructions are for how to link to a project's detailed information page using
- the filenames of the Markdown files in the
_projects
directory, - Liquid template language, and
- Jekyll.
- We will be using code snippets from this as an example. It is recommended to view the code snippets in the context of the code in order to understand it better.
Instructions#
1) Use a for loop to go through each file in the _projects
directory using site.projects
; something like {%- for variable_name in site.projects -%}
. - From the example, see line 42: {% for project in site.projects %}
2) Create a variable with a relative pathname using Jekyll's slug
attribute [i] and using Liquid's prepend
to prepend "../projects/" [ii]. Slug
uses the filename of a document and "any character except numbers and letters is replaced as hyphen" in the filename [i]. - From the example, see line 45: {% assign project_relative_path = project.slug | prepend: "../projects/" %}
3) 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>