Cards and Components

Reusable snippets of html are stored in the _includes directory. They can be inserted into any page with the liquid tag {% include filename.html %}

Site components

Some pieces of html need to be included on multiple pages. For example, the header found in _include/header.html needs to be included an any index.html or layout page to render the site header. The header should be included at the top of an html body block.

Cards

This functionality is also very useful for cards. Liquid for loops allow us to place a card for each post with some filter in a page together. Because posts use front matter, the cards can render specific details for each post.

Card Example

club-card.html

<div> {{item.title}} | {{item.author}} </div>

2021-04-02-club.md

---
category: clubs
title: SOCIS
author: Ben Pearo
---
## Markdown 😄 
Markdown content goes here!

index.html

{% for item in site.posts %}
    {% if item.categories contains 'clubs' %}
        {% include club-card.html %}
    {% endif %}
{% endfor %}

Notes on usage

Object names: Whatever object name you use in your for loop must match the name in the cards. In the above example, we use for ITEM to match the card component. This is because the content of the card file is substituted directly into the page's html.

Filtering posts: We use if statements to filter posts in most cases. In the example, and on the website, we use category tags to filter which cards we render on which page. On the website, we also use front matter to set dates of some events, and then render upcoming and past events