Partials Pages

You can create partial pages that will be loaded into the slots content areas of your layout. This allows you to create reusable designs that can be used across multiple pages.

all partial pages needs to have the papel.js file included in the head of the file and a <link rel="layout"/> tag pointing to the layout file you want to render.

using layouts


      <head>
        <script src="papel.js" defer></script>
        <link rel="layout" href="/layout.html" />
      </head>
      <body>
        <main slot>
            <p> Hello World from About </p>
        </main>
      </body>

In the example above, the partial page is loaded into the slot content area of the layout file. Notice the slot attribute in the main tag, which specifies the content that will replace the default slot content in the layout.

Named Slots

Named slots can be created by adding the name attribute to any slot in your layout. This allows you to load partial content into specific areas of your layout. To specify the slot in the partial page, use the slot attribute with the corresponding slot name.

Using named slots


      <head>
        <script src="papel.js" defer></script>
        <link rel="layout" href="/layout.html" />
      </head>
      <body>
        <h2 slot="header"> Default Header </h2>
        <main slot>
          <p> Hello World from About </p>
        </main>
      </body>