Globally set default layout?

[osmarks]

Is there some way to globally set the layout property? Using a global data file doesn't work, since the values in them don't override the top-level ones.

[zachleat]

You can use directory data files but they do not work yet in the project root, only in subfolders. See #245 for that request.

So to answer your question: kind-of. I would consider this request to be a duplicate of #245 though, which would complete this request too. Can you upvote and follow along there?

[zachleat]

Directory data files: https://www.11ty.io/docs/data-template-dir/

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

[KyleMit]

The challenge is, when using a global data object in the _data directory, the returned values are set on a property with the same name as the file

So if you have the following file:

_data/data.json

And it contains the following JSON object:

{ "layout": "default.njk" }

The resulting global data object will look like this:

But there's nothing special about data.data.layout - the layout property needs to be set on the top level object.

We can make this work in our favor by naming the file with the property name we'd like to set, and then using JS (not json) to return a plain string value.

So add the following file:

_data/layout.js

And add whatever value you want for you default layout page:

module.exports = "default.njk"

Which will now set the value at the appropriate depth

This is really nice if you'd like to process markdown files with your own custom styles that typically have to live at the root directory of your project (and don't want to add frontmatter to them)

• README.md
• CONTRIBUTING.md
• CODE_OF_CONDUCT.md
• CHANGE_LOG.md

And voila! Docs published to your site, instead of only visible through github

[jackmawer]

@KyleMit just to say thanks, this is a really useful workaround!

[keenanpayne]

@KyleMit Thank you so much for providing a workaround, as well as some clarity around why and how the workaround works. It's greatly appreciated.

[svivian]

I'm new to 11ty so apologies if this is a stupid question, but why can't this just be a config option in .eleventy.js? i.e.

module.exports = {
	layout: "mylayout.njk"
};

[Guillaume-Mayer]

I tried the workaround but it didn't work for me.
It seems that the js files in the _data directory are not loaded, not sure why.
But putting the name of the layout in a json worked.
In _data/layout.json: "base.liquid"
If it can help someone.

[jeremytarpley]

Just starting to learn 11ty and was trying to figure out how to set a global default layout - adding this in case it helps other beginners. Found two ways:

Method 1: Add a data file at the top level of your source folder. It needs to have the same name as the folder. For example, if your source folder is named src, the file would be src.11tydata.js or src.11tydata.json

src/src.11tydata.js

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

Method 2: In the _data folder, add a file named layout.js (This one is mentioned above. In this case, the format is a little different, it needs to be a string. Don't know enough yet to know why.)

_data/layout.js

module.exports = "default.njk"

[Muhammed-Rahif]

It's almost end of 2024 and you can do this by using eleventyConfig.addGlobalData without adding any additional file to you project other than eleventy.config.js. Somewhere inside eleventy.config.js:

eleventyConfig.addGlobalData("layout", "layout/default.njk");

More on https://stackoverflow.com/a/79218094/14781260