11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.

Home Page:https://www.11ty.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Local template/layout files?

maddsua opened this issue · comments

commented

Is your feature request related to a problem? Please describe.

I'm asking to implement some kind of partial file ignoring, so that it will be possible to have local layout files.

Take a look at the picture below. The idea is that I have a global layout file somewhere in _includes, and I also have this template.njk that can be included or used as a layout for index.njk of en.njk but not rendered to html file itself.

image

I mean, I kinda can do it now by including this template to the actual page files I wanna render, but 11ty will threat template file as a page too, so workarounds are needed.

Describe the solution you'd like

The simplest solution I can see is to allow some files not to be rendered to html, but at the same time to be included by the files that will produce output

Additional context

Yeah, the _includes dir is meant to hold all the layout and stuff, but that does not work well if you have many pages that are slightly different in their layouts

commented

At the moment I settled with this solution:

  1. In 11ty's config tell it to render '.njk' only, so it will skip over '.nj. files. VS Code still recognizes '.nj' as Nunjucks. Nice.
  2. Add data to frontmatter in actual page's file and include 'template.nj' below it
  3. All the text is supplied from a json file

It seems to work because 'template.nj' gets included as plain text and then the file included it gets processed. Need to test it more, seems very sketchy to be honest

Looks like this:

image

I say that my "solution" is sketchy, because Nunjucks docs state that included files are rendered separately and their render result is included afterwards.

P.S. Works even if template file is of type txt. Interesting....

I believe this could be implemented via the ignores configuration API, no?

https://www.11ty.dev/docs/ignores/#configuration-api

You could do something like this with a custom extension template.inc.njk and eleventyConfig.ignores.add("**/*.inc.njk");

commented

Thanks for the response! It was me, who was doing the weird stuff :)

It looks like I can use pagination to avoid all of this json/template importing mess. It's just my way of doing multilang pages was ... not optimal.
This unnecessary complexity can be replaced with nunjuck's if statements, so that:

index.njk ("banner_header" and other variables getting imported from the json):

---
lang: uk
---
{% include "./template.n" %}

template.nj:

<h1>{{ banner_header[lang] | verify | safe }}</h1>

becomes a single "camp_whatever_its_name.njk" (in theory):

---
pagination:
    data: ["en", "uk"] // plug an actual data here, it's just to be short
    size: 1
    alias: lang
---
<h1>

{% if lang == "en" %}
Hello world in English!
{% endif %}

{% if lang == "uk" %}
Вітання українською!
{% endif %}

</h1>