Search code examples
nunjuckseleventy

How do I incorporate Multiple Markdown files into a Nunjucks template with Eleventy?

CONTEXT:

  • Eleventy and Nunjucks (and Markdown)
  • A lot of long-form text (easier to create/edit using markdown).
  • Complex layouts.
  • Still new to SSGs

GOAL:

  • Manage chunks of text content using markdown.
  • Use these markdown files with template partials.
  • Assemble partials into a page.

EXPECTED RESULT

Processed html page:

    <html>
      <body>
        <div>
          <p>Some content originating from a markdown file.</p>
        </div>
        <div>
          <p>Some content originating from another markdown file.</p>
        </div>
      </body>
    </html>

ATTEMPTED ACTIONS

Here is what I've tried so far...

(Note: I've excluded my base.njk (html doctype shell) for readability.)

1. NJK MAIN with NJK PARTIAL INCLUDES

INPUT

Directory Structure

src/
    /_includes
        base.njk
        _layout-A.njk
        _layout-B.njk
    main-layout.njk
    content-1.md
    content-2.md

main-layout.njk

    {% extends "base.njk" %}

    {% block content %}

        {% include '_layout-A.njk' %}

        {% include '_layout-B.njk' %}

    {% endblock %}

content-1.md

    ---
    layout: _layout-A.njk
    --- 
    Some content.

_layout-A.njk

    <div>{{ content | safe }}</div>

content-2.md

    ---
    layout: _layout-B.njk
    --- 

    Some more content.

_layout-B.njk

    <div>{{ content | safe }}</div>

RESULT

  • Directory structure 'splits'.
dist/
    /content-1
        index.html
    /content-2
        index.html
    /main-layout
        index.html
  • Markdown content not passed through to parent page. Empty child tags in parent.

main-layout/index.html

    <html>
      <body>
        <div></div>
        <div></div> 
      </body>
    </html>

I'm at a loss for how the files are processed and what I can do to do what I set out to.

Solution

  • That's not how 11ty works. Each MD file is a single page.

    If you want to include multiple MD files to page, you should add custom filter for 11ty, to render it to html.

    See examples in this issue https://github.com/11ty/eleventy/issues/658