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.

score 8 · Accepted Answer · 2020-06-18T04:25:33.493

8

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!

edited Jun 18 '20 at 04:25

answered Jun 18 '20 at 04:20

1

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" ] } – baHI Mar 13 '21 at 18:54

score 2 · Answer 2 · answered Mar 05 '21 at 18:49

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.

score 1 · Answer 3 · answered Oct 03 '21 at 02:50

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 Ex:

src/src.11tydata.js

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

score 0 · Answer 4 · answered Dec 07 '22 at 16:20

0

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/*.

answered Dec 07 '22 at 16:20

Zander

2,471
3
31
53

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

4 Answers4