11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
16.84k stars 487 forks source link

Can't use `eleventyComputed` with `pagination`? #2954

Open pmpinto opened 1 year ago

pmpinto commented 1 year ago

Operating system

macOS 13.3

Eleventy

2.0.1

Describe the bug

I'm trying to centralize the pagination.size value in a global file data so that I can use it multiple times with a single source of truth.

I tried data.site.size (from a _data/_site.json file), but didn't work. Here I'm trying eleventyComputed but even though it carries the right value to the template, the pagination itself seems to be using the one defined under pagination:

---js
{
  pagination: {
    data: "collections.post",
    size: 8,
    alias: "posts",
  },
  eleventyComputed: {
    pagination: {
      size: data => 2
    }
  }
}
---

Then on my template.njk:

<pre>pagination: {{ pagination.size }}</pre> {# returns 2 #}

Is there a way to have a global pagination setting?

Reproduction steps

No response

Expected behavior

No response

Reproduction URL

No response

Screenshots

No response

VAggrippino commented 1 year ago

Nope.

I'm trying to find the solution to another similar problem. It's different from mine, but I've seen a lot of people with this one and the same response... Computed data happens after pagination, so it can't change what's in pagination.

It's documented on the Computed Data in an info box at the top.

Uhm... I'm a noob. Wait for a response from someone who knows what they're talking about, but I think this is the answer.

pdehaan commented 1 year ago

I was able to get this working w/ a template data file and bonus require() to a global data file.

---
## src/index.njk
# SEE index.11tydata.js
---

<ul>
{% for post in p %}
  <li>title="{{ post.data.title }}"</li>
{% endfor %}
</ul>
// src/index.11tydata.js
const site = require("./_data/site.json");

module.exports = {
  pagination: {
   data: "collections.posts",
   size: site.paginationSize,
   alias: "p",
  },
};

Where my src/_data/site.json looks like this:

{
  "paginationSize": 2
}

OUTPUT

Now my HTML output files have two items in the pagination group (via my collections.posts collection):

<ul>
  <li>title="FiVe"</li>
  <li>title="FoUr"</li>
</ul>