Extend Kirby’s templates with a powerful layout system

Related tags

Laravel layouts
Overview

Kirby Layouts plugin

This plugin extends Kirby’s templates with a powerful layout system.

Installation

Download

Download and copy this repository to /site/plugins/layouts.

Git submodule

git submodule add https://github.com/getkirby/layouts.git site/plugins/layouts

Composer

composer require getkirby/layouts

How it works

You can create full HTML layouts in a new /site/layouts folder. Layouts can define slots, which will then be filled with content by templates.

Layouts

You can create as many layouts as you need in your /site/layouts folder. Start with a default.php layout that will be picked up if no layout name is specified in the template.

/site/layouts/default.php

<html>
    <head>
        <title><?= $page->title() ?></title>
    </head>
    <body>
        <?php slot() ?>
        <?php endslot() ?>
    </body>
</html>

/site/templates/my-template.php

<?php layout() ?>

<h1>Hello world</h1>
<p>This will end up in the default slot</p>

Choosing a layout

To use a specific layout, you can pass its name to the layout() method.

/site/layouts/blog.php

<html>
    <head>
        <title>Blog</title>
    </head>
    <body>
        <h1>Blog</h1>
        <?php slot() ?>
        <?php endslot() ?>
    </body>
</html>

/site/templates/blog.php

<?php layout('blog') ?>

<!-- some articles -->

Working with slots

You can add as many different slots to your layout as you need. The default slot goes without a specific name. Every other slot needs a unique name. Slots in layouts can define default content, which will be rendered if the slot is not used in the template.

/site/layouts/default.php

<html>
    <head>
        <?php slot('head') ?>
        <title>Blog</title>
        <?php endslot() ?>
    </head>
    <body>
      <div class="page">

        <header class="header">
          <a href="/">Logo</a>
        </header>

        <div class="sidebar">
          <?php slot('sidebar') ?>
          <!-- default sidebar setup -->
          <?php endslot() ?>
        </div>

        <main class="main">
          <h1>Blog</h1>
          <?php slot() ?>
          <!-- this is the default slot -->
          <?php endslot() ?>
       </main>
     </div>
  </body>
</html>

Once the slots are defined, you can fill them from your template. If you use multiple slots, you must wrap content for each slot in the slot and endslot methods.

/site/templates/blog.php

<?php slot('sidebar') ?>
<nav>
  <!-- a custom sidebar menu -->
</nav>
<?php endslot() ?>

<?php slot() ?>
<!-- html for the default slot -->
<?php endslot() ?>

Working with snippets

Kirby's template system stays exactly as you know it. You can still work with templates without layouts and you can also still use snippets – in your templates and in your layouts.

/site/layouts/default.php

<html>
    <head>
        <?php slot('head') ?>
        <title>Blog</title>
        <?php endslot() ?>
    </head>
    <body>
      <div class="page">

        <?php snippet('header') ?>

        <div class="sidebar">
          <?php slot('sidebar') ?>
          <?php snippet('sidebar') ?>
          <?php endslot() ?>
        </div>

        <main class="main">
          <h1>Blog</h1>
          <?php slot() ?>
          <!-- this is the default slot -->
          <?php endslot() ?>
       </main>
     </div>
  </body>
</html>

Global layout data

You can pass global data to the layout method and make it available in every slot and snippet of your layout.

/site/layouts/default.php

<html>
    <head>
        <?php slot('head') ?>
        <title><?= $title ?></title>
        <?php endslot() ?>
    </head>
    <body>
      <div class="page">

        <?php snippet('header') ?>

        <div class="sidebar">
          <?php slot('sidebar') ?>
          <?php snippet('sidebar') ?>
          <?php endslot() ?>
        </div>

        <main class="main">
          <h1>Blog</h1>
          <?php slot() ?>
          <!-- this is the default slot -->
          <?php endslot() ?>
       </main>
     </div>
  </body>
</html>

/site/templates/blog.php

<?php layout('blog', ['title' => 'Blog') ?>

Some more content ...

License

MIT

Credits

Comments
  • Breaks pages cache

    Breaks pages cache

    If i use layouts and slots the pages cache is no longer created.

    If i return a string here instead of Tpl::load it works and cache files are created. Layout Class

    static public function render(array $data = []): string
    {
        Slots::render();
        return Tpl::load(kirby()->root('site') . '/layouts/' . static::$name . '.php', array_merge(Layout::$data ?? [], $data));
    }

    'cache' => [
    'pages' => [
      'active' => true
    ]
  ]

    $page->isCacheable() returns true. kirby()->cache('pages')->set('a.html', 'test'); creates a file so not a permission error.

    osx valet, kirby 3.6.6

    opened by bnomei 6
  • Global layout data not working

    Global layout data not working

    I tried to pass some data to the layout method, but I get "Undefined variable" error every time.

    My template: /site/templates/default.php

    <?php layout("default", ["title" => "Some title"]) ?>

<p>Some content...</p>

    Layout: /site/layouts/default.php

    <?= $title ?>

<?php slot() ?>
<?php endslot() ?>

    Latest version of Kirby Plainkit, no other plugins installed.

    opened by janherman 2
  • Breaks `$page->render()`

    Breaks `$page->render()`

    I've been preparing an error issue for the Kirby Static Site Generator not working if layouts are used, but looking closely at the problem, it seems there's something weird happening with the render() function when the layouts plugin is used.

    If I call $page('error')->render() with the layouts plugin on, the $page refers to the error (correct) page in the layout, but refers to the last rendered / first requested page (see edit) in the template itself.

    You can see the problem in the kirby/ssg/layouts demo repo build files:

    • layout: https://github.com/adamkiss/kirby-ssg-layouts-problem/blob/main/site/layouts/default.php
    • template: https://github.com/adamkiss/kirby-ssg-layouts-problem/blob/main/site/templates/default.php
    • built page: https://github.com/adamkiss/kirby-ssg-layouts-problem/blob/main/__build/error/index.html

    result of page('error')->render():

    <!DOCTYPE html>
<html class="no-js">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">

	<title>Error • Site Title</title>
	<script type="module">
		document.documentElement.classList.remove('no-js');
		document.documentElement.classList.add('js');
	</script>

	<link rel="icon" href="/favicon.png">
	<link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>

<body class="antialiased dark:bg-gray-900 dark:text-white">

<h1>Home</h1>

</body>
</html>

    Edit:

    Order matters. templates get whatever page called 'render' first.

    // generates `<h1>Error</h1>` in the template body
page('error')->render();

// generates `<h1>Home</h1>` in the template body of both
page('home')->render(); page('error')->render();

// generates `<h1>Error</h1>` in the template body of both
page('error')->render(); page('home')->render();
    opened by adamkiss 2
  • Add ability to define layouts in plugins

    Add ability to define layouts in plugins

    Would love to have the ability to register layouts via a plugin instead of having to have inside of the site/layouts folder.

    Any Plugin Index.php

    'layouts'     => [
    'default' => __DIR__ . '/layouts/default.php',
    'blog' => __DIR__ . '/layouts/blog.php',
    …
],

    Related forum post: https://forum.getkirby.com/t/how-do-i-register-layouts-in-plugins/25455

    opened by HYR 2
  • Nesting `slot()`s

    Nesting `slot()`s

    Hey there, I would like to nest slots - take the following scenario:

    <?php slot('content') ?>
<section class="container">
    <?php slot() ?>
    some default content
    <?php endslot() ?>
</section>
<?php endslot() ?>

    Most of the time, my templates would use slot(), drop some content, maybe echo $page->myfield()->toBlocks() etc but some templates would need to remove the container element and do something completely different. IMHO nesting slots would make this way more DRY, wouldn't it?

    Thanks for considering this and have a good day, S1SYPHOS

    opened by S1SYPHOS 0
Releases(1.0.1)
Owner
Kirby 3
This is the organization for Kirby 3
Kirby 3
GitHub
An opinioned approach to extend the laravel seed classes.

Laravel Seed Extender A highly opinioned way to work with the laravel seeder. Installation Require the package using composer: composer require touhid

Touhidur Rahman 9 Jan 20, 2022
Extend Laravel PHP framework to make working with Aiven databases simpler

Aiven Commands for Laravel ✨ Add some Aiven magic to your Laravel project ✨ This Laravel package provides some aiven commands for artisan to help with

Aiven 8 Aug 19, 2022
Simple Arabic Laravel Dashboard , has basic settings and a nice layout . to make it easy for you to create fast dashboard

Simple Arabic Laravel Dashboard ✅ Auto Seo ✅ Optimized Notifications With Images ✅ Smart Alerts ✅ Auto Js Validations ✅ Front End Alert ✅ Nice Image V

Peter Tharwat 254 Dec 19, 2022
This is huaweinvr extend for laravel

This is huaweinvr extend for laravel

Verus 1 Nov 18, 2021
Multi layout react laravel

multi-layout-react-laravel multi layout react-laravel is a repository for creating 1 integrated system, this repository uses react(laravel ui) version

null 2 Feb 13, 2022
Kirby 3 Plugin to use free and paid API of Seobility.net

Kirby 3 Seobility Kirby 3 Plugin to use free and paid API of Seobility.net Commercial Usage Support open source! This plugin is free but if you use it

Bruno Meilick 5 Dec 5, 2022
Provides a powerful error response system for Laravel

Laravel Exceptions Laravel Exceptions was created by, and is maintained by Graham Campbell, and provides a powerful error response system for both dev

Graham Campbell 571 Jan 31, 2022
🔔 Flasher is a powerful and flexible flash notification system for PHP, Laravel, Symfony

A powerful and flexible flash notifications system for PHP, Laravel, Symfony ?? PHP Flasher helps you to add flash notifications to your PHP projects.

PHP Flasher 158 Jan 4, 2023
A package that uses blade templates to control how markdown is converted to HTML inside Laravel, as well as providing support for markdown files to Laravel views.

Install Install via composer. $ composer require olliecodes/laravel-etched-blade Once installed you'll want to publish the config. $ php artisan vendo

Ollie Codes 19 Jul 5, 2021
Vim syntax highlighting for Blade templates.

vim-blade Vim syntax highlighting for Blade templates (Laravel 4+). This plugin contributes to vim-polyglot language pack. Installation Using vim-plug

Jason Walton 194 Dec 1, 2022
Simple transactional email classes/templates for Laravel 5 mailables

Tuxedo Tuxedo is an easy way to send transactional emails with Laravel's Mail classes, with the templates already done for you. Contents Installation

Tom Irons 92 May 27, 2022
Use Blade templates without the full Laravel framework

blade Use Laravel Blade templates as a standalone component without the full Laravel framework Full documentation is available at http://duncan3dc.git

Craig Duncan 138 Dec 7, 2022
API Blueprint Renderer for Laravel, customizable via Blade templates

API Blueprint Renderer for Laravel This Laravel package Blueprint Docs renders your API Blueprint. It comes with a standard theme that you can customi

Michael Schmidt-Voigt 225 Sep 16, 2022
Create inline partials in your Blade templates with ease

Create inline partials in your Blade templates with ease. This package introduces a new @capture directive that allows you to capture small parts of y

Ryan Chandler 27 Dec 8, 2022
A library for using Laravel Blade templates in WordPlate.

A library for using Laravel Blade templates in WordPress/WordPlate. Installation Require this package, with Composer, in the root directory of y

null 28 Nov 28, 2022
Mailing platform with templates and logs included.

MailCarrier User-friendly, API-ready mail platform with templates and logs. Design global layouts, compose your template, preview your emails and send

MailCarrier 18 Dec 14, 2022
Add Social Reactions to Laravel Eloquent Models. It lets people express how they feel about the content. Fully customizable Weighted Reaction System & Reaction Type System with Like, Dislike and any other custom emotion types. Do you react?

Laravel Love Introduction Laravel Love is emotional part of the application. It let people express how they feel about the content. Make any model rea

cybercog 996 Dec 28, 2022
Powerful Unsplash package for Laravel

Powerful Unsplash package for Laravel Provides a fluent api to use the Unsplash within Larvel applications. Use public actions or store images directl

null 54 Dec 25, 2022
Powerful REPL for the Laravel framework.

Introduction Laravel Tinker is a powerful REPL for the Laravel framework. Official Documentation Documentation for Tinker can be found on the Laravel

The Laravel Framework 7.1k Jan 3, 2023