Eleventy: Adding title to paginated data

Created on 30 Mar 2019 · 4Comments · Source: 11ty/eleventy

I have a custom data file that contains an array of items I'd like to render into individual pages. Here's a simplified example:

[
  {
    "title": "Banana",
    "slug": "banana",
    "content": "<h1>Banana!</h1>"
  },
  {
    "title": "Mango",
    "slug": "mango",
    "content": "<h1>Mango!</h1>"
  }
]

In order to create the pages for these files, I've followed the instruction in the documentation and added a new fruit.njk. Here's what it looks like:

pagination:
  data: fruit
  size: 1
permalink: fruits/{{ pagination.items[0].slug }}/index.html
layout: layouts/default.njk
---

{% set fruit = paginations.items[0] %}

<article class="fruit">
  {{ content | safe }}
</article>

Here's what my default.njk layout file looks like:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title | required }}</title>
  </head>

  <body>
    {{ content | safe }}
  </body>
</html>

This works, but I can't figure out how to create a page title from this like I would using a collection. The permalink is easy to templatize, but I can't do that for titles. I've previous commented on #33, which may solve this problem, but I don't think that work as been done yet. Is there some way to accomplish what I'm trying to do?

Source

LandonSchropp

Most helpful comment

I'm using renderData for this.

Can't access my laptop right now, so here are some code snippets:

tag.njk

---
layout: base
permalink: /tag/{{ tag }}/
pagination:
  data: collections
  size: 1
  alias: tag
  filter:
    - all
    - post
  addAllPagesToCollections: true
renderData:
  title: Tagged with „{{ tag }}”
---

_includes/base.njk

---
---
<!doctype html>
<html lang="en">
  <head>
    {% include "_partials/head.njk" %}
  </head>
  <body>
    <div class="wrapper">
      <main>
        {{ content | safe }}
      </main>
    </div>
  </body>
</html>

_includes/_partials/head.njk

<meta charset="utf-8" />
{% if renderData.title %}
<title>{{ renderData.title | safe }} | {{ globals.title | safe }}</title>
{% elif title %}
<title>{{ title | safe }} | {{ globals.title | safe }}</title>
{% else %}
<title>{{ globals.title | safe }}</title>
{% endif %}

(Slightly trimmed to focus on essentials)

Ryuno-Ki on 4 Oct 2019

👍4

All 4 comments

As a side note, I did try to create a custom collection for this. It seems like eleventy allows collections to be created from custom sources, but it won't generate pages for those items in the collection.

eleventyConfig.addCollection("fruits", () => {

  // Grab all of the fruits
  let fruits = fs.readJsonSync(path.join(__dirname, 'data/fruits.json'));

  // The fruits are transformed into the data structure described in this document:
  // https://www.11ty.io/docs/collections/#collection-item-data-structure
  return fruits.map(fruit => {
    let { slug, content, ...data } = fruit;

    return {
      inputPath: `${ slug }.md`,
      fileSlug: slug,
      outputPath: `./build/${ slug }/index.html`,
      url: `/${ slug }/`,
      templateContent: content,
      data: {
        ...data,
        permalink: `fruits/${ slug }/index.html`,
        layout: "layouts/fruit.njk"
      }
    };
  });
});

This also felt like overkill to me for hat I'm trying to accomplish.

LandonSchropp on 30 Mar 2019

I finally figured this one out. I can reference paginations.items[0] in the parent layout.

LandonSchropp on 3 Apr 2019

@LandonSchropp Could you provide the final code that solved your issue? I am currently at the same situation. Thanks a lot in advance

lluishi93 on 20 Sep 2019