Directory

It’s easy to make a basic grid of “cards” to link to pages on your site.

There are a few ways to get data on to the cards:

Which you use depends on if you’re just linking to a few pages that are in different folders, or a group of files in the same folder. Either way, you call the same include file to display the cards, you just send it data from different places.

Cards from pages in a folder

Below, we create a set of cards from data on pages in the essays folder. First we define a variable called essays that gathers all the metadata from the pages in the essays folder. Then we pass that to our include file that has the code to generate the cards themselves.

{% assign essays = site.pages | where_exp: "page", "page.path contains 'essays/'" %}

{% include card-grid.html cards = essays%}

All the HTML code that makes the cards follows the standard Bootstrap card model, which makes it easy to adjust the layout following Bootstrap documentation and examples.

Cards from data on THIS page

{% assign cards = page.cards %}

{% include card-grid.html cards = cards%}

A stacked layout

This works exactly like above, but calls a different include file that present a stack of long, short cards in a vertical display.

 {% assign cards = page.cards %}

{% include card-list.html 
cards = cards 
%}

...

Feasting with the Gods: Rituals and Symbolism in Viking Foodways

This chapter explores the ceremonial and religious aspects of food in Viking society, examining feasts, sacrificial offerings, and mythological references to food and drink in Norse texts.

...

From Fjord to Farm: Everyday Diets and Ingredients

Focusing on the archaeological and environmental evidence, this chapter reconstructs the daily diet of the Viking Age, highlighting key ingredients, farming practices, and seasonal food cycles.

All done

It’s also possible to create a directory through data on an external Google Sheet. See this page for an example.

This concludes our card display demo.