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

<header class="header"></header>
<div class="sidebar"></div>
<footer class="footer"></footer>

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

<!DOCTYPE html>
<meta charset="utf-8">
* { 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; }
<section class="layout">

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')