Eleventy: Is this situation supposed to work?

Created on 29 Dec 2018  路  13Comments  路  Source: 11ty/eleventy

A pug template...

````
extends index

block mainContent
p Content
````

...extending another pug template called index.pug with following content:

````

layout: "base.njk"

.o-container
block mainContent
p Test
````

with a layout called base.njk with following content:

<!doctype html> <html> <body> {{ content | safe }} </body> </html>

Code stripped down to the bare minimum. Is this supposed to work or is 11ty not that flexible? Just wondering if I'm not trying to debug the impossible. Thank you!

template language
Source
picture Wolfr

Most helpful comment

I see. So to allow rendering engine flexibility for any type of rendering engine (nunjucks, pug, md etc.) you have to same-ify parts of the tree creation process (what I mean by tree creation process is combining templates to an end result)... this was documented in the 11ty docs but I understand it better now.

Ultimately this approach kills folder flexibility, leading to the single _includes folder that 11ty has at the moment. Folder flexibility is something that Hugo touts as one of their big advantages. However, Hugo doesn't allow for the usage of the great templating languages instead offering its own templating language (AFAIK).

In my dream scenario one can make something like a styleguide for a project by having a folder for each component - let's say 40 folders - with in each folder an .md file for documentation, a few .njk files for components and their variations (with the ability to extend off of each other).

Then the authors of the final templates can include said .njk files directly

include components/my-component.njk

whether it's in a pug template or not. The static site generator figures out how to recombine everything to an HTML file.

The problem is that this is nigh impossible since it would need an implementation for this behavior in each templating language. The templating languages would have to be aware of the fact that their templates can be recombined, and you would need a common API to pass data, if that makes any sense.

picture Wolfr on 8 Jan 2019
👍3

All 13 comments

Looking at every example website I find that no one actually uses Pug, so is it correct to assume that a lot of Pug situations are untested?

Just wondering, I have a big interest in starting to use 11ty to be more flexible when it comes to creating content, but I need to know how far things have been developed (and then perhaps I can help develop these further)

Wolfr picture Wolfr on 30 Dec 2018

I'm also having issues with the pug rendering engine. My example case is 

layout: default.pug
permalink: /blog/
title: hello
---
ul
  each post in collections.post
    li(class=page.url == post.url ? 'active' : '')
      a(href=post.url)
        if post.data.title
          span(class='title')
            = post.data.title
        if post.data.date
          span(class='date')
            = post.data.date

I keep getting the error 

> Having trouble rendering pug template ./static/_posts/index.pug (TemplateContentRenderError)
> Having trouble compiling template ./static/_posts/index.pug (TemplateContentCompileError)
> static/_includes:1:1
  > 1| /blog/
-------^
unexpected token "slash" (Error)
Pretended to Process 0 files in 0.25 seconds

The same structure works for other template types.

iampeterbanjo picture iampeterbanjo on 6 Jan 2019

@iampeterbanjo can you check out #286? specifically these two comments:

zachleat picture zachleat on 7 Jan 2019

@Wolfr I think you may have run into an interesting issue that probably isn鈥檛 Eleventy compatible. See the warning here: https://www.11ty.io/docs/layouts/#addendum-about-existing-templating-features

Specifically pug extends exists outside of Eleventy鈥檚 realm and as such would not process front matter in that way. If you move away from using pug extends and buy into Eleventy鈥檚 layout system for your templates, it will work as expected.

Does that make sense?

zachleat picture zachleat on 7 Jan 2019

@zachleat thanks for your response. i did try using quotes and ---json frontmatter. I've created a repository with an MVP to reproduce this bug.

iampeterbanjo picture iampeterbanjo on 7 Jan 2019

@zachleat Extends are coupled to block overrides in Pug (block append/block prepend etc.), if I extend using Eleventy's layout system, can I still use block overrides?

My Pug usage is quite advanced in my main use case (building HTML/CSS prototypes for web apps), sometimes having 5 levels of extension with added variables on every deeper level.

Iwill run some tests to see what 11ty specifically supports if I use the built-in system.

Wolfr picture Wolfr on 7 Jan 2019

@iampeterbanjo Just a clarification as stated in #286, it needs both quotes and a pipe at the beginning "| /blog/"

zachleat picture zachleat on 8 Jan 2019

@iampeterbanjo and @Wolfr As an aside, I added some documentation about disabling templating in permalinks. It works globally, which is already available and on a per-template basis, which is coming in 0.7.0

Disabling pug templating in permalinks will allow you to use permalink: /blog/

https://www.11ty.io/docs/permalinks/#disable-templating-in-permalinks

zachleat picture zachleat on 8 Jan 2019

Extends are coupled to block overrides in Pug (block append/block prepend etc.), if I extend using Eleventy's layout system, can I still use block overrides?

@Wolfr Ah, I see. The problem isn鈥檛 necessarily that you鈥檙e trying to use extends in Pug, which is supported and we have tests around it (https://github.com/11ty/eleventy/blob/master/test/TemplateRenderPugTest.js#L37). The problem is that it doesn鈥檛 mix with Eleventy layouts in that specific way.

Lemme try to be more clear:

myTemplate.pug (this leaf template CAN use an Eleventy layout and front matter)

extends index

block mainContent
    p Content

index.pug (this is likely in the _includes directory and as such is excluded from Eleventy processing. This is processed by a pug extend and cannot use an Eleventy layout or more specifically won鈥檛 work with front matter in any way). Includes for all templating engines have this restriction. Read a little more: https://www.11ty.io/docs/config/#directory-for-includes

layout: "base.njk"
---

.o-container
    block mainContent
        p Test

Does that make sense?

Eleventy has access to myTemplate.pug but only the Pug engine has access to index.pug.

zachleat picture zachleat on 8 Jan 2019

I see. So to allow rendering engine flexibility for any type of rendering engine (nunjucks, pug, md etc.) you have to same-ify parts of the tree creation process (what I mean by tree creation process is combining templates to an end result)... this was documented in the 11ty docs but I understand it better now.

Ultimately this approach kills folder flexibility, leading to the single _includes folder that 11ty has at the moment. Folder flexibility is something that Hugo touts as one of their big advantages. However, Hugo doesn't allow for the usage of the great templating languages instead offering its own templating language (AFAIK).

In my dream scenario one can make something like a styleguide for a project by having a folder for each component - let's say 40 folders - with in each folder an .md file for documentation, a few .njk files for components and their variations (with the ability to extend off of each other).

Then the authors of the final templates can include said .njk files directly

include components/my-component.njk

whether it's in a pug template or not. The static site generator figures out how to recombine everything to an HTML file.

The problem is that this is nigh impossible since it would need an implementation for this behavior in each templating language. The templating languages would have to be aware of the fact that their templates can be recombined, and you would need a common API to pass data, if that makes any sense.

Wolfr picture Wolfr on 8 Jan 2019
👍3

Related #189 and #148

zachleat picture zachleat on 9 Jan 2019

@Wolfr I definitely wouldn鈥檛 say this is impossible. Most of this already exists because templateContent is available in each item in a collection (including collections.all). If you weren鈥檛 going to use this, we already have the notion of combining across different templating engines using Eleventy layouts.

Collections: https://www.11ty.io/docs/collections/#collection-item-data-structure
Layouts: https://www.11ty.io/docs/layouts/

Also related, @kleinfreund has been testing and filing issues to make the includes directory empty, sharing the input and includes directory together: https://github.com/11ty/eleventy/issues/403 This should work seamlessly in 0.7.2

Oh, and one more thing: note that you can set permalink: false to bypass a template writing to the output directory. This can also be set in a directory data file to apply to a folder of templates from one place: https://www.11ty.io/docs/permalinks/#permalink%3A-false Combining this with collections should get you a pseudo-includes directory pretty easily.

zachleat picture zachleat on 9 Mar 2019

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鈥攇reat! But if you鈥檙e still having problems, do not let the issue鈥檚 closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

zachleat picture zachleat on 22 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

DirtyF picture DirtyF  路  3Comments
nilsmielke picture nilsmielke  路  4Comments
veleek picture veleek  路  3Comments
aaronstezycki picture aaronstezycki  路  3Comments
smaimon picture smaimon  路  3Comments