HTML Partials

Learn about Partials within HTML pages

Partials enables you to reuse static pieces of contents without repeating your code within your .html pages.

This feature is enabled by default, but all partials requires to exist within a directory named .partials within your pages directory

Usage

Within your HTML pages you can use the <partial></partial> tag in order to include a partial, the partial tag takes the following arguments:

  • src: An absolute path to the partial that is relative to the .partials directory.
  • locals: a valid JSON string that is passed as data to the partial.

Lets create a sidebar.html partial within the pages/.partials directory with the following contents:

<!-- pages/.partials/sidebar.html -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Now we can use that partial within our pages/index.html page as follows:

<!-- pages/index.html -->
<html>
  <body>
    <partial src="/sidebar.html"></partial>
  </body>
</html>

The index.html page will produce the following results:

<html>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </body>
</html>

Passing data to Partials

Partials can accept data as well, we can do that by passing a valid JSON to the locals attribute when using the partial tag.

Lets create another partial that accepts locals:

<!-- pages/.partials/components/button.html -->
<button class="btn btn-{{ type }}">
    <span>{{ text }}</span>
</button>

Now we can pass data to the previous partial from within our pages as follows:

<!-- pages/index.html -->
<html>
  <body>
    <partial src="/components/button.html" locals='{"text": "Submit", "type": "primary"}'></partial>
  </body>
</html>

The index.html page will produce the following results:

<html>
  <body>
    <button class="btn btn-primary">
      <span>Submit</span>
    </button>
  </body>
</html>

Passing content to Partials

HTML content can be passed to partials as well, which is very useful when working with layouts as partials, below is how to pass and use content within a partial:

<!-- pages/.partials/article.html -->
<article>
  <section>
    <h2>{{ title }}</h2>
    <h4>{{ subtitle }}</h4>
  </section>
  <section class="content">
    <!-- the following tag will be replaced with the actual content -->
    <content></content>
  </section>
</article>

Now we can reuse the article template in our HTML pages:

<!-- pages/docs/overview.html -->
<html>
  <body>
    <partial src="/article.html" locals='{"title": "Overview", "subtitle": "Overview Subtitle"}'>
        <p>The content of the article</p>
    </partial>
  </body>
</html>

The docs/overview.html page will produce the following results:

<html>
  <body>
    <article>
      <section>
        <h2>Overview</h2>
        <h4>Overview Subtitle</h4>
      </section>
      <section class="content">
        <p>The content of the article</p>
      </section>
    </article>
  </body>
</html>