Use layout for my includes

Hi, this might be a dumb question… but bare with me :frowning:

i have a couple of includes (files) that all look the same. I want to have them all use the same layout ( so i dont have to edit in every file when i need to change something with the layout.
the thing is that i call these includes from a file that already uses a layout. so my Front matter dont work.

How do i use a layout for my security.html files?
Example:

---
title: My title
heading: security
layout: product
img: securit-cover
---

  {% include  security/security1.html %}
  {% include  security/security2.html %}
  {% include security/security3.html %}
  {% include security/security4.html %}
  {% include  security/security5.html %}

My security1.html looks likte this, and the problem is that is will not use the single-product layout:

---
title: Security
heading: security1
layout: single-product
img :security1.jpg

---
hello world content for security1

You can chain layouts. A common convention is to have something like _layouts/default.html which has all the common page wrapper elements you need, <html>, <head>, <body>, etc.

Then you have child layouts that call the default layout but build on it. To do that you have to make use of the {{ content }} tag. A simple example would look something like:

_layouts/default.html

---
---

<html>
  <head>...</head>
  <body>
    {{ content }}
  </body>
</html>

_layouts/child.html

---
layout: default
---

<div class="main">
  {{ content }}
</div>

Then in your pages you’d do something like

page.md

---
title: My page
layout: child
---

Some page content

Which would give you final HTML of:

<html>
  <head>...</head>
  <body>
    <div class="main">
      <p>Some page content</p>
    </div>
  </body>
</html>
1 Like