Eleventy: Create `n` number of pages based on an integer in a data file

[nicjohnson]

I'm trying to build n number of pages where n is an integer supplied in a data file.

My data file scriptures.json looks like this:

[
  {
    "name":"Genesis",
    "chapters":50
  },
  {
    "name":"Exodus",
    "chapters":40
  },
  {
    "name":"Leviticus",
    "chapters":27
  },
  {
    "name":"Numbers",
    "chapters":36
  },
  {
    "name":"Deuteronomy",
    "chapters":34
  }
]

I'd like to make a page for each chapter in each book with a permalink like this: /scriptures/{{ scriptures.name}}/{{ loop.index }} while looping n number of times supplied by scriptures.chapters.

I've tried so many different ways I don't even know if it makes sense to show template examples of what I've already tried.

Ideas?

[scottishstoater]

Hey Nic,

Hope I can get you back on track 👍

It's a tad confusing but pagination is what you're looking for. I'll try and walk you through a basic set up of how to go about this.

1. Create a folder /_data and add your scriptures.json file to it, so you have /_data/scriptures.json.
2. Create a file called /scriptures/index.liquid (assuming you're using liquid as it's the default).

Here in the YAML at the top we need to tell Eleventy:

1. What data to use
2. How many pages per item in that data (1 in our case)
3. Provide an alias so you can access each data object it holds easily
4. What permalink structure we want for our page(s).

---
pagination:
  data: scriptures
  size: 1
  alias: scripture
permalink: "scriptures/{{ scripture.name | slug }}/{{ scripture.chapters }}/index.html"
---

<a href="/">Back</a>
<h1>{{ scripture.name }}</h1>
<h2>Chapter {{ scripture.chapters }}</h2>

1. Create an index.liquid page in the root (this is optional, but will demonstrate it all wired up).

<ul>
  {%- for scripture in scriptures %}
  <li><a href="/scriptures/{{ scripture.name | slug }}/{{ scripture.chapters }}">{{ scripture.name }}</a></li>
  {%- endfor %}
</ul>

This will loop through the collection of link off to your page generated from the data.

1. Compile the site (using npx to be super lean with this walk through)

npx @11ty/eleventy 

This is very very stripped back but hopefully explains the basic concept without any additional complexities.

Reach out if you need anymore help 👍

[rphunt]

If you've already gotten the answer you need, then great. But if not, I'd like to clarify something. To me, it sounds like what you want to do is breakout each book so that each chapter has its own folder and index.html (each chapter having its own URL). The index.html would have the content of the respective chapter. Yes?

genesis/
    1/index.html (content of chapter 1)
    2/index.html (content of chapter 2)
    .
    .
    50/index.html (content of chapter 50)

exodus/
    1/index.html (content of chapter 1)
    2/index.html (content of chapter 2)
    .
    .
    40/index.html (content of chapter 40)

...etc...

@scottishstoater has already mentioned pagination. I think that's correct for this.

Say Genesis has 50 chapters. If each chapter is supplied as a separate item, Eleventy can automatically create the folder numbering using pagination. You don't need to indicate the amount anywhere, you don't need to do a loop.

Are you going to use markdown files, or will the content be in a json file? Let me know so I can show you a possible approach.

I have no experience with Netlify if that's what you're doing.

But if I just misunderstood your question, then nevermind ;)

[scottishstoater]

ahh @rphunt I think you're right, I've mis-read it.

[nicjohnson]

You guys are awesome.

@scottishstoater I appreciate your very well documented example. Fortunately, I understand the Pagination you described and I actually have a good working index page that has a link for each chapter. What I was asking for was output closer to what @rphunt described with an index.html for each chapter. However, after reading his post, I'm realizing that I'm going to need to provide content for each chapter page either via the JSON file or a MD file in the file structure.

Thank you both for helping me get on track!

[rphunt]

No problem. I have a document I've been working on that you might find helpful. It's a walk-through of Eleventy that I made for myself, and doesn't make a lot of assumptions about previous knowledge. Give it a look, it's actually a pretty quick guide:

https://rphunt.github.io/eleventy-walkthrough/

[pdehaan]

@nicjohnson Not sure if you solved your issues or not, but I was hacking on this while trying to figure out 11ty pagination and managed to come up with https://github.com/pdehaan/11ty-pagination. It's still a bit rough around the edges and it isn't speedy since I'm using a bible-api to fetch chapter verses from a remote server.

[pdehaan]

And I tried the other idea I had of downloading the entire bible as a JSON blob (4.34 MB), partitioning it into separate JSON files per book/chapter, and then dynamically generating all the .njk files: https://github.com/pdehaan/11ty-data-bible

Not the prettiest of code I've written, but it has been a very entertaining problem to try and solve.

---

Wrote 1192 files in 2.27 seconds (1.9ms each, v0.10.0)

11ty is awesome!