Adding Layout Capabilities

To enable layout functionality, you need to create slots where partial pages will load. Here's how it works:

You can create multiple slots to load various sections of the partial pages into each designated slot.
If a slot does not have a name, it will be considered the default slot. Keep in mind that having multiple default slots in nested layouts can cause rendering issues.
Any file can be used as a layout as long as it has at least one slot to load the content.

Minimal layout


    <html>
      <head>
        <script src="papel.js" defer></script>
      </head>
      <body>
        <main id="content">
          <slot>
            <h2> Hello World </h2>
          </slot>
        </main>
      </body>
    </html>

Named Slots

You can create named slots in your layout by adding the name attribute to any slot. Named slots allow you to load partial content that matches the slot's name.

Named slots


    <html>
      <head>
        <script src="papel.js" defer></script>
      </head>
      <body>
        <header>
          <slot name="header">
            <h2> Default Header </h2>
          </slot>
        </header>
        <main>
          <slot>
            <h2> Hello World </h2>
          </slot>
        </main>
      </body>
    </html>

In this example:

The <slot name="header"> is a named slot.
You can load partial content specifically into the "header" slot.

This makes it easy to organize your layout and target specific areas with partial content.