Adding tags to pages created from paginating a data set

[danielLee0721]

Hi Everyone,

When creating a bunch of pages by using the pagination feature and iterating over a data set, is it possible to add tags to them somehow?

What I am trying to do is query a headless CMS for all my blog posts and then utilize pagination to generate individual blog pages. Unfortunately, I am not able to add tags to eleventyComputed to create collections...

Any help would be greatly appreciated.

Thank you! 🙏🏼

---
layout: defaultPage.html
pagination:
  data: blogPosts
  size: 1
  addAllPagesToCollections: true
permalink: "/blog/{{ pagination.items[0].title | slug }}/"
eleventyComputed:
  title: "{{ pagination.items[0].title }}"
  description: "{{ pagination.items[0].content | truncatewords: 20 | strip_html }}"
---

[pdehaan]

Good news, bad news... You should be able to dynamically set tags via eleventyComputed, but collections will not automatically be created. See #1225 (and related issues) for some more info.

But if you know the dynamically set tags, you might be able manually create the collections in your .eleventy.js config file using a for loop.

TIP: You might also be able to use pagination's alias instead of using pagination.items[0]: https://www.11ty.dev/docs/pagination/#aliasing-to-a-different-variable

[pdehaan]

src/_data/blogPosts.js

module.exports = [
  {
    title: "this is the thing of the stuff of dreams",
    content: `
      <p class="foo" tab-index="2">this is some content</p>
      <p class="subtitle">And some other stuff</p>
    `.trim(),
    tags: ["one", "two", "three"],
  },
  {
    title: "But wait, there's more!",
    content: `
      <p class="lead">A wild heading appears!</p>
      <p>And more content goes here</p>
    `,
    tags: ["one", "four"],
  }
];

src/blog.liquid

I had to switch to "---js" front matter block in order to cast the tags as an array instead of a stringified JSON string.
It might be easier to do some src/blog.11tydata.js template data file and keep the front matter in a separate .js file.

---js
{
  // layout: "defaultPage.html",
  pagination: {
    data: "blogPosts",
    size: 1,
    alias: "post",
    addAllPagesToCollections: true
  },
  tags: [
    "blog"
  ],
  permalink: "/blog/{{ post.title | slugify }}/",
  eleventyComputed: {
    description: "{{ post.content | strip_html | truncatewords: 6 }}",
    title: "{{ post.title }}",
    content(data) {
      return data.post.content;
    },
    tags(data) {
      return data.post.tags;
    }
  }
}
---

<h1 data-title>{{ title }}</h1>
<article data-description>{{ description }}</article>
<pre data-tags>{{ tags | json }}</pre>
<main data-content>
  {{- post.content -}}
</main>
<section data-collection-names>{{ collections | keys | json }}</section>

.eleventy.js

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addFilter("keys", data => Object.keys(data).sort());

  eleventyConfig.addCollection("one", collectionApi => {
    return collectionApi.getFilteredByTag("one");
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

OUTPUT

www/blog/but-wait-there-s-more/index.html

<h1 data-title>But wait, there's more!</h1>
<article data-description>A wild heading appears! And...</article>
<pre data-tags>["one","four"]</pre>
<main data-content>
  <p class="lead">A wild heading appears!</p>
  <p>And more content goes here</p>
</main>
<section data-collection-names>["all","blog","one"]</section>

www/blog/this-is-the-thing-of-the-stuff-of-dreams/index.html

<h1 data-title>this is the thing of the stuff of dreams</h1>
<article data-description>this is some content And some...</article>
<pre data-tags>["one","two","three"]</pre>
<main data-content>
  <p class="foo" tab-index="2">this is some content</p>
  <p class="subtitle">And some other stuff</p>
</main>
<section data-collection-names>["all","blog","one"]</section>

[danielLee0721]

@pdehaan Thank you, as always, for such a detailed response. Always very helpful! 🙏🏼🙏🏼🙏🏼

[pdehaan]

@danielLee0721 The one sneaky thing I did was reverse your order of operations on truncatewords vs strip_html:

-description: "{{ pagination.items[0].content | truncatewords: 20 | strip_html }}"
+description: "{{ pagination.items[0].content | strip_html | truncatewords: 20 }}"

generally you'd want to strip HTML content first since truncate's word count would otherwise get radically confused by something like <p class="foo bar" data-thing="stuff">Hello World</p>. It looks like LiquidJS's truncatewords filter splits on whitespace so the class names and attributes would throw off your expected word count.

https://github.com/harttle/liquidjs/blob/312000366d4f059590e3ecc72c14695a70b0f31d/src/filters/string.ts#L108-L114

[danielLee0721]

Good call! Thank you 🙏🏼🙏🏼🙏🏼