In this episode, we dive into how to set up a base layout in Twig so all your pages share a common structure. We start by making a new "layouts" directory in the views folder, and create an app.twig
file. This acts as our main layout, with a basic HTML structure. The key part is adding a {% block content %}
placeholder, so different pages can inject their own content into this shared layout.
Next, we see how to use this base layout in a real page. We update our home.twig
file to extend the new layout by using {% extends "layouts/app.twig" %}
. Inside home.twig
, we wrap all the page-specific HTML in a {% block content %}
so it slots perfectly into the layout.
To keep things modular, we create a "partials" folder and add a navigation.twig
file, which holds our site’s main navigation. By including this partial in our base layout with {% include "layouts/partials/navigation.twig" %}
, the navigation bar now appears automatically on every page.
From here, we talk about how you can reuse this structure for new pages by just extending the layout and defining their content blocks. This not only keeps the site DRY, but also sets us up to easily add dynamic features to the navigation, like login/logout states. By the end of this episode, you’ll have a reusable, organized page structure with consistent navigation throughout your app.