How can I set a default layout and permalink for a collection?

[drakonicguy]

Hi,

Apologies if this is similar to a discussion that's already been posted here. Please point me in the right direction if this has been answered somewhere. I don't really know how to search for this.

I'm trying to move my site to 11ty from Jekyll, and I'm having trouble finding out if defaults can be set for a collection.
In my Jekyll _config.yaml, I have:

collections:
  posts:
    permalink: /blog/:year-:month-:day-:title:output_ext

and

defaults:
  -
    scope:
      path: ""
      type: "posts" 
    values:
      layout: "blog-main"

which sets the default layout for posts to blog-main, and their paths to /blog/year-month-day-title.html. How can I recreate this in 11ty?

[pdehaan]

I'd probably use a directory data file.

Here's my sample project structure:

tree -a --gitignore

.
├── .gitignore
├── eleventy.config.js
├── package-lock.json
├── package.json
├── src/
│   ├── _includes/
│   │   └── blog-main.liquid
│   └── blog/
│       ├── blog.11tydata.js
│       ├── five.liquid
│       ├── four.liquid
│       ├── one.liquid
│       ├── seven.liquid
│       ├── six.liquid
│       ├── three.liquid
│       └── two.liquid
└── www/
    └── blog/
        ├── 2011-01-20-this-is-page-one.html
        ├── 2022-04-13-this-is-page-4.html
        ├── 2024-01-13-seven.html
        ├── 2024-01-13-this-is-page-3.html
        ├── 2024-01-13-this-is-page-5.html
        ├── 2024-01-13-this-is-page-six.html
        └── 2024-01-13-this-is-page-two.html

6 directories, 20 files

My root eleventy.config.js looks like this (basically just specifies default input/output directory and a layout alias):

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addLayoutAlias("blog-main", "blog-main.liquid");

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

And my src/blog/blog.11tydata.js file looks like this:

module.exports = {
  tags: ["posts"],
  layout: "blog-main",
  permalink(data) {
    const pageDate = data.page.date.toLocaleDateString("en-CA");
    const pageSlug = this.slugify(data.title ?? data.page.fileSlug);
    return `/blog/${pageDate}-${pageSlug}.html`
  },
};

The directory data file will:

1. Set the tags for each file in src/blog/** to "posts", which will auto-create collections.posts and populate it with the blog posts.
2. Set the layout for each blog post to "blog-main" (which is our alias for src/_includes/blog-main.liquid).
3. Set the permalink for each blog post to "/blog/YYYY-MM-DD-{slugified title or fileSlug}.html".

src/blog/four.liquid looks like this:

---
title: This is Page 4
date: 2022-04-14
---

<h1>{{ title }}</h1>

And src/blog/seven.liquid looks like this:

---
# no specified `title` or `date` (`page.date` will default to the current build date/time).
---

Page 7, no title.

And my build output looks like:

npm run build

> 11ty-3166@1.0.0 build
> eleventy

[11ty] Writing www/blog/2022-04-13-this-is-page-4.html from ./src/blog/four.liquid
[11ty] Writing www/blog/2011-01-20-this-is-page-one.html from ./src/blog/one.liquid
[11ty] Writing www/blog/2024-01-13-this-is-page-5.html from ./src/blog/five.liquid
[11ty] Writing www/blog/2024-01-13-seven.html from ./src/blog/seven.liquid
[11ty] Writing www/blog/2024-01-13-this-is-page-3.html from ./src/blog/three.liquid
[11ty] Writing www/blog/2024-01-13-this-is-page-six.html from ./src/blog/six.liquid
[11ty] Writing www/blog/2024-01-13-this-is-page-two.html from ./src/blog/two.liquid
[11ty] Wrote 7 files in 0.03 seconds (v2.0.1)

[pdehaan]

In fact, I'll just push the repo. Probably easier to see in GitHub than it is trying to piece it together above.
https://github.com/pdehaan/11ty-3166

[drakonicguy]

It worked, thanks a lot!

[drakonicguy]

Nope, nevermind. Neither the permalink nor the layouts are defaulting, but I think the "posts" tag is being assigned. No idea what's going on.

[pdehaan]

@drakonicguy Do you have a public repo? Maybe I can clone and take a look.

[drakonicguy]

I'll set one up when I have some free time, as I do really want to get this working... Currently going through uni semester finals, haha.

[btrem]

You can also use a directory data json file instead of a javascript file. I generally use json unless I need to use logic in the data file. I don't know jekyll, so you'll have to create a date filter, maybe a title filter to fine tune the results, but this should give you an idea of how it works:

{
    "layout": "blog-main",
    "permalink": "/blog/{{ page.date | yourDateFilter ') }}-{{ title | slug }}"
}

[drakonicguy]

This works, I am facing a different issue now: Eleventy won't write anything to /blog/index.html....

[11ty] Output conflict: multiple input files are writing to `_site/blog/index.html`. Use distinct `permalink` values to resolve this conflict.
[11ty]   1. ./help.html
[11ty]   2. ./help.html
[11ty]   3. ./help.html (via DuplicatePermalinkOutputError)

[btrem]

It's hard to know from just the error. If I had to guess, I'd say that .help.html is using pagination where each page is writing to _site/blog/index.html. But I'd need more info.

[Meta: since this is a different problem, probably better to start a new discussion with the output conflict problem as the topic. That will help others who have the same problem to find a solution.]