Layouts in edge allows you define a master layout for your pages and then override specific sections as needed.

Basic example

Let's create a standard webpage using layouts.

1. Create the following file structure

├── views
│   ├── layouts
│   │   └── master.edge
│   └── home.edge

2. Paste the following markup to the layout file.

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }}</title>
<link rel="stylesheet" href="[email protected]/css/bulma.min.css">
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<footer class="footer">

3. Paste the following markup to the resources/views/home.edge file.

@set('title', 'Home page')
<section class="hero is-warning">
<div class="hero-body">
<p class="title">
<p class="subtitle">

4. Render the view and you will end up with the following result

The layout tag

The layout tag is used to define the layout for a given template.

The section tag

The section tag is a placeholder exposed by a layout for injecting content. A layout can define as many sections as it wants and the parent template can override them when necessary.

In the following example, the layout renders the scripts tags inside the scripts section. This allows all the pages to use these script or override them completely by re-defining the same section with different script tags


<script src="./vendor.js"></script>
<script src="./app.js"></script>

Parent template overriding everything

<script src="./vendor.js"></script>
<script src="./admin.js"></script>

Parent template appending to existing scripts

@super {{-- Super means inherit --}}
<script src="./autocomplete.js"></script>