Partials

As the name suggests, partials are a way to extract a chunk of markup to its file and then re-use it across multiple templates.

Keeping the website header, logo, footer, and sidebar in its file are some common use cases for partials.

Basic example

Let's create a standard webpage with a header, sidebar, main, and footer using partials.

1. Create the following file structure

├── views

│   ├── partials

│   │   ├── footer.edge

│   │   ├── header.edge

│   │   └── sidebar.edge

│   └── home.edge

2. Write the following content inside the respective partials

partials/header.edge 
<header class="header"></header>
partials/sidebar.edge 
<div class="sidebar"></div>
partials/footer.edge 
<footer class="footer"></footer>

3. Write the following markup inside the home.edge file.

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <style>

    * { margin: 0; padding: 0; }

    .header { height: 60px; background: rgba(255,138,0,.2); }

    .layout { height: calc(100vh - 100px); display: flex; }

    .sidebar { height: 100%; background: rgba(156, 39, 176, 0.2); width: 250px; }

    main { height: 100%; background: #f7f7f7; flex: 1 }

    .footer { height: 40px; background: #5e5e5e; }

  </style>

</head>

<body>

  @include('partials/header')



  <section class="layout">

    @include('partials/sidebar')

    <main></main>

  </section>



  @include('partials/footer')

</body>

</html>

4. Result

The @include tag

The @include tag is responsible for loading and inlining the partials.

  • It accepts only a single argument, that is, the partial path relative from the views directory
  • The path can also be dynamic. Meaning you can use variables to define the partial path
  • The partial have access to the parent template state

Also, there is an additional @includeIf tag to include the partial, only when a certain condition is true.

@includeIf(post.comments, 'partials/comments')