How do you specify a default layout for all pages in eleventy?

Question

It seems like you should be able to specify a fallback layout for all pages in an 11ty site using global data files and the data cascade, but I can't figure out how.

I've tried the following JSON in several locations:

{
  "layout": "layouts/page.njk"
}

I've put this JSON in:

• _data/default.json
• _data/site.json
• _data/site.11tydata.json
• _data/11tydata.json

So far no luck.

Zaremski

Answer 1

This is actually something which is (as far as I'm aware) not yet possible by default in Eleventy. You can use a directory data file to specify a layout for all files nested within that directory, but that doesn't currently work from the root of the project. There was a feature request for this on GitHub.

In that same GitHub issue a workaround was suggested, which works pretty well: namely to make a layout.js file in the _data folder which exports a string pointing to the layout location.

I gave it a quick test just now with the following setup, and it seems to work as desired:

I hope that helps!

Maraca

I got it working the same way. Also note: you can define defaults for every collection folder, where you might override this global value and assign a new standard for the collection - create a posts folder, place aposts.11tydata.json file and enter: { "eleventyExcludeFromCollections": false, "layout": "post", "permalink": "post/{{ title }}/", "tags": [ "posts" ] } – Tips

Answer 2

The method given by @user13601182 worked for me.

Another option is to add a data file at the top level of your source folder. It needs to have the same name as the folder followed by 11tydata.js or 11tydata.json. For example, if your source folder is named src, the file would be src.11tydata.js or src.11tydata.json

For example src/src.11tydata.js:

module.exports = {
    // Set a default layout for everything in the src folder and below.
    layout: "layouts/default.njk"
}

Squires

I've been struggling with this this afternoon and this solution works well. I now need to find something which works similarly for permalink, as I'm adding this to the front matter of every template: --- permalink: <%= ${page.filePathStem}.html %> --- – Picrotoxin

Answer 3

My solution is to put all of my template files in a directory called pages. In my .eleventy.js config, I set my input to pages. Ex:

module.exports = eleventyConfig => {
  return {
    dir: {
      input: 'pages',
    }
  };
};

Then, following the Eleventy documentation, you can set a JSON file in pages called pages.json. That file should look like the following:

{
  "layout": "default"
}

And with that, all of my pages, the index page included, default to the default layout. If you need to override a page, you can include the layout in the frontmatter. Or if you want to override everything in the directory, just include a <directory-name>.json file in that directory with the layout specified.

I haven't personally ran into any issues with this setup, and it is an added bonus to keep all of my templates together and not mixed with other config files as well.

Drapery

Answer 4

From the Eleventy docs:

Try adding { "layout": "layouts/post.njk" } to posts/posts.json to configure a layout for all of the templates inside of posts/*.

Ahem