Inherited Layouts

Layouts can be broken into partial layouts to create reusable and flexible designs. If you have a layout shared across multiple pages, you can define it as a partial layout and load it into your main layout.

Creating a Partial Layout

To create a partial layout, follow these steps:

Define Slots: Create a layout file with slots where partial pages will be loaded.
Inherit a Layout: Use the <link rel="layout" href="/layout.html"> tag in the head section to specify the parent layout that this partial layout will inherit.

Partial layout


      <head>
        <script src="papel.js" defer></script>
        <link rel="layout" href="/layout.html" />
      </head>
      <body>
        <nav>
          <a href="./chapter-1.html">Chapter 1</a>
          <a href="./chapter-2.html">Chapter 2</a>
        </nav>
          <slot name="chapter">
          <main>
            <p> Chapter index </p>
          </main>
          </slot>
      </body>

then you can load the partial layout into the partial page, this will load both layouts chapters/layout.html and /layout.html into the partial page.

using partial layouts


      <head>
        <script src="papel.js" defer></script>
        <link rel="layout" href="chapters/layout.html" />
      </head>
      <body>
        <main slot="chapter">
            <p> this is the chapter 1 </p>
        </main>
      </body>