This plugin makes it super easy to create modular websites with Kirby.
📦 Module Creation
- 🗂️ Create modules in
site/blueprints/modules/[module].yml
andsite/snippets/modules/[module].php
- 📁 Alternatively:
site/modules/[module]/
folder with[module].yml
and[module].php
inside - 🔧 Use the
make:module
CLI command to generate new modules
🧩 Core Functionality
- 🔄 Automatically creates a hidden modules storage page for pages with a modules section
- 🎨 Keeps
changeTemplate
options up to date - 🚚 Allows moving modules to other modules storage pages
- 🧭 Sets the
navigation
option so you can use the arrows to move between modules - 📄 Easily render modules with
<?= $page->modules() ?>
- 🧰 Useful methods like
hasModules()
,isModule()
andmoduleId()
- 🏷️ Optionally auto-generate unique slugs for modules
- 👁️ View draft modules on parent pages via the panel preview button
- 🔗 Extended
url()
method with anchor links on the parent page - 🚦 Accessing Module URLs directly redirects to the parent page with an anchor
⚙️ Customization Options
- 🎛️ Set a default module type
- 🚫 Exclude specific module types
- 🚀 Option to auto-publish modules
- 🔀 Control redirect behavior after module creation
Download this repository to /site/plugins/kirby-modules
.
Alternatively, you can install it with composer: composer require medienbaecker/kirby-modules
- Install the plugin
- Set up your first module in
site/blueprints/modules/[module].yml
andsite/snippets/modules/[module].php
- Add a
modules
section to a page blueprint and create some modules - Render the modules in your template with
<?= $page->modules() ?>
I created an example repository with Kirby's plainkit, this plugin and three very simple modules.
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
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 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
:
return [
'medienbaecker.modules.default' => 'gallery' // default: 'text'
];
return [
'medienbaecker.modules.exclude' => [
'hero',
'anotherForbiddenModule'
]
];
return [
'medienbaecker.modules.autoslug' => true
];
return [
'medienbaecker.modules.autopublish' => 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...
}
By default, this plugin automatically populates the create
option of the modules section with all modules. If you want to manually define the available modules, you can do so in your blueprint:
modules:
create:
- module.text
- module.images
This project is licensed under the terms of the MIT license.