Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 551
mike Avatar asked Nov 05 '25 10:11

mike


1 Answers

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

like image 160
Tanner Dolby Avatar answered Nov 07 '25 14:11

Tanner Dolby



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!