Search code examples
liquideleventy

What is the proper way to include partial in liquid templates in eleventy 1?


Given the following file structure:

root/
  src/
    _includes/
      partials/
        navbar.liquid
        footer.liquid
        address.liquid
      base.liquid
    index.liquid

How do I include partials/navbar.liquid and partials/footer.liquid in base.liquid and include partials/address.liquid in partials/footer.liquid ?

NOTE: This behavior has changed in version 1 and I cannot figure out the new model. A working solution would be a great addition to the 11ty documentation.


Solution

  • Your project structure looks good. I created a demo locally using Eleventy v1.0.1 and the {% include %} logic works as expected with liquid templates when the correct template filepaths are provided.

    src/_includes/base.liquid

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>11ty demo</title>
    </head>
    <body>
        {% include "./partials/navbar.liquid" %}
        {{ content }}
        {% include "./partials/footer.liquid" %}
    </body>
    </html>
    

    src/index.liquid

    ---
    layout: base.liquid
    pageTitle: 11ty demo
    ---
    
    <h1>{{ pageTitle }}</h1>
    <p>Some content</p>
    

    Partials

    src/_includes/partials/navbar.liquid

    <nav><a href="/">Home Page Link</a></nav>
    

    src/_includes/partials/address.liquid

    <p>221 Some address info</p>
    

    src/_includes/partials/footer.liquid

    {% include "./address.liquid" %}
    <nav><a href="/">Footer link</a></nav>
    

    After performing a build with npx @11ty/eleventy and then serving the site with npx @11ty/eleventy --serve. Below is the generated site output:

    Screenshot of 11ty site output for demo code