Preface
Goal: Populate content for use with special custom index pages.
Source Code
This article use tutor-06 theme. We will create it step by step.
Prerequiste
Use Bulma MD in Eleventy.
From this article forward, the stylesheet rely on Bulma MD in article below. You should give a fast reading of this Bulma MD article first, before continue reading this article.
Layout Preview for Tutor 06
1: Populate the Content
As always, populate content with good reading is, as hard as giving meaningful variable. Luckily I have done it for you.
Custom Index Page
We are going to explore custom index page such as:
-
Archive
-
Tags
-
Blog (Article List with Pagination)
For this to work, we need a proper blog content, with such diversity such as posting year, and tags for each post, so we can represent the list nicely, with sorting, and also grouping whenever necessary.
My content choice comes to song lyrics.
We can tag song lyrics with its genre,
and naturally song lyrics also has date released.
I also add movie quotes to examine what does it looks,
to have entirely different folder category.
Pattern
Our typical content is usually short quote from a lyric, with four frontmatter items as below:
---
layout : post
title : 5FDP - Wash It All The Way
date : 2020-02-23 07:35:05
tags : ["metal", "2010s"]
---
I'm wasting here\
Can anyone\
Wash it all away?
I won't change for you\
And I can't take the pain\
There's nothing you can do\
And there's nothing you can sayAll example content should follow the pattern above.
All these content wear post layout.
How Many?
We need to populate the content, with about ten lyrics and five quotes, so that we have enough content to simulate pagination later on.
❯ tree views/lyrics views/quotes
views/lyrics
├── 5fdp-wash-it-all-the-way.md
├── deftones-be-quiet-and-drive.md
├── disturbed-stupify.md
├── eurythmics-sweet-dreams.md
├── house-of-pain-jump-around.md
├── marylin-manson-redeemer.md
├── onyx-slam.md
├── public-enemy-bring-the-noise.md
├── ratm-bulls-on-parade.md
├── soulfly-jump-da-fuck-up.md
├── soundgarden-black-hole-sun.md
└── white-zombie-more-human-than-human.md
views/quotes
├── dead-poets-society.md
├── every-day.md
├── fight-club.md
├── jerry-maguire.md
└── scott-pilgrim.md
0 directories, 17 files
Also edit the frontmatter as necessary, for the rest of the content.
Test
Consider to check, if this content works.
- Archive
- Tags
2: Configuration: Posts Collection
.eleventy.js:
For further use, I add a collection that contain only post kind,
by checking for each item.data.layout from frontmatter.
// Filter using `Array.filter`
eleventyConfig.addCollection("posts", function(collection) {
return collection.getAll().filter(function(item) {
// Filter by layout name
return "post" === item.data.layout;
});
});We can use later as:
{% set posts = collections.posts %}3: Header Menu
To make our live easier we need to alter our header menu a bit.
Partial: Nunjucks Header
It is a long header, so I crop the code. You can get the complete code in the repository.
<div class="navbar-brand">
<a class="navbar-item"
href="{{ "/" | url }}">
<img src="{{ "/assets/images/logo-gear.png" | url }}"
alt="Home" />
</a>
<a class="navbar-item"
href="{{ "/pages/" | url }}">
Blog
</a>
...
</div>And
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Archives
</a>
<div class="navbar-dropdown">
<a class="navbar-item"
href="{{ "/tags/" | url }}">
By Tags
</a>
<hr class="navbar-divider">
<a class="navbar-item"
href="{{ "/pages/archive-by-month/" | url }}">
By Month
</a>
<a class="navbar-item"
href="{{ "/pages/archive-by-year/" | url }}">
By Year
</a>
<a class="navbar-item"
href="{{ "/pages/archive-simple/" | url }}">
Simple
</a>
</div>
</div>
<a class="navbar-item"
href="{{ "/pages/about/" | url }}">
About
</a>
</div>4: Landing Page
We can also give a proper URL in landing so you can access archives page and tags page more quickly.
Page Content: index
It is actually very similar with previous index.html.
---
layout : home
eleventyExcludeFromCollections: true
---
<br/>
<p>
<a class="button is-dark
blue-grey darken-2 hoverable m-b-5"
href="{{ site.baseurl }}/pages/archive-by-month/"
>Articles Sorted by Month</a>
<a class="button is-dark
blue-grey darken-1 hoverable m-b-5"
href="{{ site.baseurl }}/tags/"
>Articles Sorted by Tag</a>
</p>
<p>As always,
should you be caught or killed,
any knowledge of your actions will be disavowed.</p>
<div class="justify-content-center">
<img src="{{ "/assets/images/cards/one-page.png" | url }}"
alt="business card">
</div>
<p>
<span class="fas fa-home"></span>
Whitewood Street, Monday Market,
East Jakarta, 55112, Indonesia.
</p>
5: Permalink
Update: New in Eleventy 0.11.0.
You can add permalink, with global setting , or per directory basis,
instead of setting-up each file’s frontmatter.
For example in lyrics directory you can add
views/lyrics/lyrics.11tydata.js.
// per directory basis
// instead of `_data/eleventyComputed.js`
const moment = require("moment");
const category = 'lyrics'
module.exports = {
eleventyComputed: {
permalink: (data) => {
if (!data.slug) return null;
else {
date = moment(data.date).format('YYYY/MM/DD');
return `${category}/${date}/${data.slug}.html`;
}
}
}
};Now add slug in frontmatter, for example
layout : post
title : Marilyn Manson - Redeemer
date : 2015-07-25 07:35:05
slug : marilyn-manson-redeemer
tags : ["industrial metal", "90s"]This will result an URL such as:
http://localhost:8080/lyrics/2015/07/25/marilyn-manson-redeemer.html
This way, you can freely name your file, for example with jekyll style of filenaming. Which is very nice, because you can sort the date in any file manager, such as:
2015-07-25-marilyn-manson-redeemer.md.
I use conditional if (!data.slug) return null;,
so that I can migrate easily.
The old URL which does not have any slug setting in frontmatter,
should also be working.
This is important, when you don’t want to change your URL.
Thera are many reason for this,
for example your URL has been a reference in other site,
or cached in google search.
What is Next ?
Consider continue reading [ Eleventy - Custom Index - Archive ]. We are going to use this populated content, with archive page, sorted by date, and grouped by month and year.
Thank you for reading.