Eleventy: _layout folder at the root level, just like in jekyll

Created on 4 Jun 2018  路  7Comments  路  Source: 11ty/eleventy

Hi,

I'm coming from a jekyll background. I'm porting my website over to 11ty, but I noticed that you can't create your layouts in a _layouts directory at the root level and I'm forced to use the _includes folder instead.

I can alias the location of the layout template using the following
eleventyConfig.addLayoutAlias("default", "layouts/default");

That works for me but how hard would it be to make it possible to define the location of the layouts in the configuration along side the other directories? e.g.

...
dir: {
      includes: "_includes",
      data: "_data",
}
...

It would be great if I can add

layouts: "_layouts"

This will make me feel right at home, just like working with jekyll. :)

enhancement

Most helpful comment

I'm storing my layouts in /_includes/_layouts. I have globals stored in /_includes/_globals and some other includes in _includes.

Then for example, all of my pages are in /pages.

pages/pages.json:

{ "layout": "_layouts/page" }

This causes all pages to use _includes/_layouts/page.liquid by default, without needing a layout in the front matter. Individual pages can then use a custom layout:

---
layout: _layouts/page-custom
---

This approach works really well for me, so I thought I'd share in case anyone finds it useful.

All 7 comments

Interesting idea! This is going to be awkward but can you upvote your own issue? 馃憤馃徎


This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

The enhancement backlog can be found here: https://github.com/11ty/eleventy/issues?utf8=%E2%9C%93&q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+

You could use a _layouts directory for your includes, i.e.:

dir: {
  includes: "_layouts"
}

However, all regular includes need to be in there as well.

Overall, I don鈥檛 think it鈥檚 a goal of Eleventy to just mirror Jekyll so people can use the same source and run eleventy instead of jekyll build and have the same output.

I rather feel like the problem here is the limitation that includes/templates have to be in a sub directory (e.g. _includes) of the project. What鈥檚 that good for? Without that, people could just put their stuff wherever they want. Nothing would need to be configured for that. Unfortunately, that would be a big breaking change because includes are relative to the include directory.

Use case for not limiting includes to an includes directory: Including CSS files in a template in production mode.

Currently, I have my CSS files in /css. I want to include them in a template when building for production to not block rendering of my site. I work around the limitations by setting the include directory to the empty string. This way, I can include files from anywhere in the project.

Turns out eleventy used to support a _layouts folder, but that functionality was removed in 11b9f73.

(Disclosure: I'm in favor of a separate _layouts folder distinct from _includes and have up-voted this issue.)

I'm storing my layouts in /_includes/_layouts. I have globals stored in /_includes/_globals and some other includes in _includes.

Then for example, all of my pages are in /pages.

pages/pages.json:

{ "layout": "_layouts/page" }

This causes all pages to use _includes/_layouts/page.liquid by default, without needing a layout in the front matter. Individual pages can then use a custom layout:

---
layout: _layouts/page-custom
---

This approach works really well for me, so I thought I'd share in case anyone finds it useful.

This will be included with 0.7.2. Will be exposed the same as the includes dir configuration option but completely optionally as layouts. Maintains backwards compatibility and will fallback to use includes if layouts does not exist.

Docs added for this feature to https://www.11ty.io/docs/config/#directory-for-layouts-(optional) (after the deploy goes live)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

veleek picture veleek  路  3Comments

nilsmielke picture nilsmielke  路  4Comments

matt-auckland picture matt-auckland  路  3Comments

ndaidong picture ndaidong  路  4Comments

zachleat picture zachleat  路  3Comments