Preface
Goal: Custom content output such as JSON.
Source Code
This article use tutor-06 theme. We will create it step by step.
1: Archive Data
Eleventy can read data, and can also produce data.
Frontmatter: Layout
Just set none.
Permalink
For this to works, you can use something like this
---
permalink: pages/index.json
---Page Content: JSON Example
The complete JSON example is below:
---
permalink: pages/index.json
---
{%- set posts = collections.posts -%}
{%- set postCount = posts.length -%}
{%- set cursor = 1 -%}
{
{% for post in posts %}
"{{ post.date | date('YYMMDDmm') }}": {
"title": "{{ post.data.title }}",
"url": "{{ post.url }}"
}
{%-if cursor != postCount %},{% endif -%}
{%-set cursor = cursor + 1 %}
{% endfor %}
}I give an identitiy number for each post using dates and minutes. It is rarely that a person blog in the same exact dates and minutes. So I guess, giving an ID like this is valid enough.
Render: Browser
The blog list, now looks like this below:
Data: archives.json
Now save the output to a file called _data/archives.json.
{
"15032535": {
"title": "Deftones - Be Quiet and Drive",
"url": "/lyrics/deftones-be-quiet-and-drive/"
},
"18091335": {
"title": "Disturbed - Stupify",
"url": "/lyrics/disturbed-stupify/"
},
"15071535": {
"title": "Marilyn Manson - Sweet Dreams",
"url": "/lyrics/eurythmics-sweet-dreams/"
},
"18011535": {
"title": "House of Pain - Jump Around",
"url": "/lyrics/house-of-pain-jump-around/"
},
"15072535": {
"title": "Marilyn Manson - Redeemer",
"url": "/lyrics/marylin-manson-redeemer/"
},
...
}
We are going to use this data in later chapter.
What is Next ?
Consider continue reading [ Eleventy - Nunjucks - Layout ]. We are going to revisit layouts, foucing on columns and colors.
Thank you for reading.