Partials

Partials as the name suggest is a way to extract a chunk of markup to its own file and then re-use it across multiple templates.

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

Basic example

Let's create a standard webpage with a header, sidebar, main and the 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.

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

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