This plugin makes it super easy to create modular websites with Kirby.
- Modules are registered as regular blueprints and templates.
- Every module is available to create in the
modules
section without editing any other file. - Modules can not be accessed directly and will automatically redirect to the parent page with an anchor.
- The container page is automatically created and hidden in the panel.
- You can preview draft modules on their parent pages via the panel preview button.
A module is a regular page, differentiated from other pages by being inside a modules container. This approach makes it possible to use pages as modules without sacrificing regular subpages.
📄 Page
📄 Subpage A
📄 Subpage B
🗂 Modules
📄 Module A
📄 Module B
tl;dr: I created an example repository with Kirby's plainkit, this plugin and three very simple modules.
Similar to blocks, you can create module blueprints in site/blueprints/modules/
and module templates in site/snippets/modules/
. E.g. site/blueprints/modules/text.yml
and site/snippets/modules/text.php
.
It's also possible to use a separate site/modules/
folder. In this case, you create your module blueprint in site/modules/text/text.yml
and the module template in site/modules/text/text.php
.
Add a modules
section to any page blueprint and a modules container will be automatically created.
In the template you can then use <?= $page->modules() ?>
to render the modules.
title: Default Page
sections:
modules: true
<?= $page->modules() ?>
title: Text Module
fields:
textarea: true
<div class="<?= $module->moduleId() ?>" id="<?= $module->uid() ?>">
<h1><?= $module->title() ?></h1>
<?= $module->textarea()->kt() ?>
</div>
You can access the module page object with $module
and the parent page object with $page
.
The $module->moduleId()
method returns the module ID as a BEM class, e.g. module--text
or module--gallery
.
The following options are available to add to your site/config/config.php
:
By default, the text
module will be the first/default option in the "Add page" modal. You can change this behaviour by setting your own default module:
return [
'medienbaecker.modules.default' => 'gallery'
];
By default, all modules will be available in the "Add page" modal. Change this by providing an array of excluded modules:
return [
'medienbaecker.modules.exclude' => [
'hero',
'anotherForbiddenModule'
]
];
If you want to automatically generate the slug according to the title, you can enable the autoslug
option. This hides the slug field from the create page modal:
return [
'medienbaecker.modules.autoslug' => true
];
With this option you can skip the draft status and create listed modules directly:
return [
'medienbaecker.modules.autopublish' => true
];
By default you won't get redirected to the modules pages you create. Change this behaviour by setting the redirect
option to true
:
return [
'medienbaecker.modules.redirect' => true
];
This plugin creates a ModulePage
model, overwriting certain methods.
You can extend this model with your own model:
// site/config/config.php
return [
'medienbaecker.modules.model' => 'CustomModulePage'
];
// site/models/module.php
class CustomModulePage extends ModulePage {
// methods...
}
Download this repository to /site/plugins/kirby-modules
.
Alternatively, you can install it with composer: composer require medienbaecker/kirby-modules
This project is licensed under the terms of the MIT license.