Skip to content

How to Link to a Project's Detailed Info Page

Jessica Cheng edited this page Feb 5, 2023 · 20 revisions

Overview

  • The following instructions are for how to link to a project's detailed information page using
  • 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>

References

i. See Jekyll's documentation on slug by searching for it on this webpage: https://jekyllrb.com/docs/permalinks/#placeholders
ii. Liquid template language's prepend: https://shopify.github.io/liquid/filters/prepend/
Clone this wiki locally