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.
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.
{% assign cards = page.cards %}
{% include card-grid.html cards = cards%}
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
%}
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.