Can a "layout" be used with "permalink":false #1802

ollicle · 2021-05-30T03:45:34Z

ollicle
May 30, 2021

I’m building a single page site as roughly described here using collections derived from a set of markdown files in nested directories.

Currently each .md has a template specified in the front matter. These templates correspond to names of include templates which are rendered using the derived ‘page’ data in a custom collection. For example with iconBlock.njk in _includes/:

fun.md:

---
template: iconBlock
img: foo.jpg
otherData: bar
---
## Foo is bar

_layouts/section.njk:

{% include "templates/" + block.data.template + ".njk" ignore missing %}

Instead, is there a way to include the result of rendering a template using its layout rather than using an additional "template" data property?

---
layout: iconBlock.njk
…
---
…

(Naturally with iconBlock.njk in _layouts)

Answered by ollicle

May 31, 2021

Based on my hasty testing, I don't think you can use layouts with permalink: false templates.

Thank-you @pdehaan !

View full answer

ollicle · 2021-05-30T03:53:14Z

ollicle
May 30, 2021
Author

Occurs to me I could do this with a two stage render, first outputting the partials (using layouts) into _includes. Before injecting them in a second pass.

This is problematic though, as I have more than a single depth of includes within includes. I’m hoping to avoid multiple passes if I can.

5 replies

pdehaan May 30, 2021
Collaborator

Based on my hasty testing, I don't think you can use layouts with permalink: false templates. So probably best to either stick with your current template: iconBlock solution, or there might be a way to make this work w/ Nunjucks template inheritance using {% extends %} and {% block %}.

tree -aI node_modules .
.
├── .eleventy.js
├── package-lock.json
├── package.json
├── src/
│   ├── _includes/
│   │   ├── layouts/
│   │   │   ├── base.njk
│   │   │   └── section.njk
│   │   └── templates/
│   │       ├── iconBlock.njk
│   │       └── textBlock.njk
│   ├── index.njk
│   └── pages/
│       ├── about.md
│       └── contact.md
└── www/
    └── index.html

.eleventy.js

This file is pretty boring, except I did have to explicitly set markdownTemplateEngine: "njk", since LiquidJS is the default processor for .md files.

src/_includes/layouts/base.njk

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>{{ title }}</title>
</head>
<body>

<div class="container">
  {{ content | safe }}
</div>

</body>
</html>

src/_includes/layouts/section.njk

This was refactored a few times and probably not needed since it only contains the following:

{{ block.templateContent | safe }}

See notes in src/index.njk below.

src/_includes/templates/iconBlock.njk

Behold my gifted HTML skills! This basically just shows some basic formatting and defines our placeholder {% block content %}...{% endblock %}.

<section>
  THIS IS A ICON SECTION!
  {% block content %}{% endblock %}
</section>
<hr/>

src/_includes/templates/textBlock.njk

Ditto, but slightly different formatting to see if it worked...

<section>
  THIS IS A TEXTs SECTION!
  {% block content %}{% endblock %}
</section>
<hr/>

src/pages/about.md

Nothing very interesting in our .md files. I tried extending different templates in each file (about => iconBlock, contact => textBlock). And in each .md file we set our {% block content %} contents.

You could also probably create a src/pages/pages.json directory data file and set {"permalink": false} there to save yourself setting it in the frontmatter of each page, but whatever.

---
title: ABOUT
tags: about
permalink: false
---

{% extends "templates/iconBlock.njk" %}

{% block content %}
  # {{ title }}

  This is the about page.
{% endblock %}

src/pages/contact.md

---
title: CONTacT
tags: contact
permalink: false
---

{% extends "templates/textBlock.njk" %}

{% block content %}
  # {{ title }}

  This is the content page.
{% endblock %}

src/index.njk

Finally we have our main index.njk. We define our sections array to loop over in the frontmatter (about subpage first, then contact), and then loop over each collection[tag], and finally {% include %} the ./src/_includes/layouts/section.njk file. Although I think you can safely replace {% include "layouts/section.njk" %} with {{ block.templateContent | safe }} and save yourself one more level of include nesting.

---
title: HOME
sections:
  - about
  - contact
layout: layouts/base.njk
---

<main>
{% for tag in sections %}
  {% for block in collections[tag] %}
    <!-- {{ tag }} -->
    {# {% include "layouts/section.njk" %} #}
    {{ block.templateContent | safe }}
  {% endfor %}
{% endfor %}
</main>

SUMMARY

Neat story, what does it look like? The site should generate a single /www/index.html page which looks like this (once I ran it through npx prettier www --write):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HOME</title>
  </head>
  <body>
    <div class="container">
      <main>
        <!-- about -->
        <section>
          THIS IS A ICON SECTION!
          <h1>ABOUT</h1>
          <p>This is the about page.</p>
        </section>
        <hr />

        <!-- contact -->
        <section>
          THIS IS A TEXTs SECTION!
          <h1>CONTacT</h1>
          <p>This is the content page.</p>
        </section>
        <hr />
      </main>
    </div>
  </body>
</html>

Not sure if that is any better than what you have currently, but it was fun for me to play w/ custom layouts and blocks, so #YOLO.

pdehaan May 30, 2021
Collaborator

I pushed my sample code to https://github.com/pdehaan/11ty-one-pager-layouts since the formatting above isn't super great, or if you wanted to clone the repo and tweak it locally.

I also added a couple more random pages, and now the "contact" collection has 2 pages, and I added the pages.json data file idea.

Now I'm wondering if it's all too complex, and I just loop over collections.all and each section/page has an order: 111 number in the front matter to control which order the sections appear in.

pdehaan May 30, 2021
Collaborator

If you're intereseted in using a sorted custom collection, I added a v2 branch (and made it a PR if you want to see the diff). It feels a bit cleaner than doing a double loop on the front page. Plus now if you add another page in ./src/pages/, I think it'll automatically get added to the bottom of the main index.html page (unless you give it a specific sort order value).

pdehaan May 31, 2021
Collaborator

After a bit more thinking and experimentation, I got to wondering if a paired shortcode is any easier...

  eleventyConfig.addPairedShortcode("iconBlock", function (content, order) {
    return `<section data-order="${order}" data-file-slug="${this.page.filePathStem}" data-last-modified="${this.page.date.toISOString()}">
${content}
</section>`;
  });

Where my hypothetical ./src/pages/about.md looks like:

---
subtitle: ABOUT
order: 200
---

{% iconBlock order %}

  # {{ subtitle }}

  This is the about page.
{%- endiconBlock %}

And now the generated output for that section of the one-page-site looks like:

        <section
          data-order="200"
          data-file-slug="/pages/about"
          data-last-modified="2021-05-14T07:00:00.000Z"
        >
          <h1>ABOUT</h1>
          <p>This is the about page.</p>
        </section>

Pros:

Maybe easier to define your template directly as an Eleventy paired shortcode instead of dealing w/ Nunjucks' {% include %}, {% extend %}, and {% block %} tags.

Cons:

Now part of your layout is defined in the .eleventy.js file and is JavaScript instead of Nunjucks. I haven't tried them yet, but there also might be a way to define the layout as a Nunjucks {% macro %}.

ollicle May 31, 2021
Author

Wow, lots to unpack here, thank you so much Peter!

I will most certainly be giving some deeper thought into the opportunity njk extends brings to the puzzle.

The sorting is an interesting problem. I too have a custom collection sorted with an order property in each markdown template to avoid the “parent” pages knowing about their children by name. This makes adding new sections relatively easy as the only change needs to be in the new file. Although if we were optimising for a future reordering of existing items, a yml array like you have in V1 would be easier for an editor to rearrange than stepping through the files to figure out new order values. I’m yet to dig deeply into how Netlify CMS might help here.

Your method of enabling the front matter defined layout: property with extends is very clever!

Thanks again for the fully fleshed out out example, provides a whole lot more than the “No” that would have technically answered my question 🙏

ollicle · 2021-05-31T12:16:40Z

ollicle
May 31, 2021
Author

Based on my hasty testing, I don't think you can use layouts with permalink: false templates.

Thank-you @pdehaan !

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can a "layout" be used with "permalink":false #1802

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Can a "layout" be used with "permalink":false #1802

ollicle May 30, 2021

Replies: 2 comments · 5 replies

ollicle May 30, 2021 Author

pdehaan May 30, 2021 Collaborator

.eleventy.js

src/_includes/layouts/base.njk

src/_includes/layouts/section.njk

src/_includes/templates/iconBlock.njk

src/_includes/templates/textBlock.njk

src/pages/about.md

src/pages/contact.md

src/index.njk

SUMMARY

pdehaan May 30, 2021 Collaborator

pdehaan May 30, 2021 Collaborator

pdehaan May 31, 2021 Collaborator

ollicle May 31, 2021 Author

ollicle May 31, 2021 Author

ollicle
May 30, 2021

Replies: 2 comments 5 replies

ollicle
May 30, 2021
Author

pdehaan May 30, 2021
Collaborator

pdehaan May 30, 2021
Collaborator

pdehaan May 30, 2021
Collaborator

pdehaan May 31, 2021
Collaborator

ollicle May 31, 2021
Author

ollicle
May 31, 2021
Author