medienbaecker/kirby-modules

轻松将模块添加到您的页面

2.8.4 2024-08-16 06:30 UTC

README

此插件可以让您非常容易地使用 Kirby 创建模块化网站。

功能

📦 模块创建

  • 🗂️ 在 site/blueprints/modules/[module].ymlsite/snippets/modules/[module].php 中创建模块
  • 📁 或者:包含 [module].yml[module].phpsite/modules/[module]/ 文件夹
  • 🔧 使用 make:module 命令行工具生成新模块

🧩 核心功能

  • 🔄 自动为具有模块部分的页面创建隐藏的模块存储页面
  • 🎨 保持 changeTemplate 选项更新
  • 🚚 允许将模块移动到其他模块存储页面
  • 🧭 设置 navigation 选项,以便可以使用箭头在模块之间移动
  • 📄 使用 <?= $page->modules() ?> 轻松渲染模块
  • 🧰 如 hasModules()isModule()moduleId() 之类的有用方法
  • 🏷️ 可选自动生成模块的唯一别名
  • 👁️ 通过面板预览按钮在父页面上查看草稿模块
  • 🔗 扩展 url() 方法,在父页面上添加锚点链接
  • 🚦 直接访问模块 URL 将重定向到带有锚点的父页面

⚙️ 自定义选项

  • 🎛️ 设置默认模块类型
  • 🚫 排除特定模块类型
  • 🚀 选项自动发布模块
  • 🔀 控制模块创建后的重定向行为
Preview

安装

将此存储库下载到 /site/plugins/kirby-modules

或者,您可以使用 composer 安装它:composer require medienbaecker/kirby-modules

快速入门

  1. 安装插件
  2. site/blueprints/modules/[module].ymlsite/snippets/modules/[module].php 中设置您的第一个模块
  3. modules 部分添加到任何页面布局中并创建一些模块
  4. 使用 <?= $page->modules() ?> 在模板中渲染模块

我创建了一个 示例存储库,其中包含 Kirby 的 plainkit、此插件和三个非常简单的模块。

用法

什么是模块?

模块是一个普通页面,它被放置在一个模块容器中,与其它页面区分开来。这种方法使得可以在不牺牲常规子页面的情况下将页面用作模块。

📄 Page
  📄 Subpage A
  📄 Subpage B
  🗂 Modules
    📄 Module A
    📄 Module B

创建模块

类似于 ,您可以在 site/blueprints/modules/ 中创建模块布局,在 site/snippets/modules/ 中创建模块模板。例如,site/blueprints/modules/text.ymlsite/snippets/modules/text.php

也可以使用单独的 site/modules/ 文件夹。在这种情况下,您在 site/modules/text/text.yml 中创建模块布局,在 site/modules/text/text.php 中创建模块模板。

将模块添加到页面

modules 部分添加到任何页面布局中,将会自动创建一个模块容器。

渲染模块

在模板中,您可以使用 <?= $page->modules() ?> 来渲染模块。

示例

site/blueprints/pages/default.yml

title: Default Page
sections:
  modules: true

site/templates/default.php

<?= $page->modules() ?>

site/blueprints/modules/text.yml

title: Text Module
fields:
  textarea: true

site/snippets/modules/text.php

<div class="<?= $module->moduleId() ?>" id="<?= $module->uid() ?>">
  <h1><?= $module->title() ?></h1>
  <?= $module->textarea()->kt() ?>
</div>

您可以使用$module访问模块页面对象,使用$page访问父页面对象。方法$module->moduleId()返回模块ID作为BEM类,例如module--textmodule--gallery

配置

以下选项可添加到您的site/config/config.php

默认模块蓝图

return [
  'medienbaecker.modules.default' => 'gallery' // default: 'text'
];

排除模块蓝图

return [
  'medienbaecker.modules.exclude' => [
    'hero',
    'anotherForbiddenModule'
  ]
];

自动生成slug

return [
  'medienbaecker.modules.autoslug' => true
];

自动发布模块

return [
  'medienbaecker.modules.autopublish' => true
];

启用重定向

return [
  'medienbaecker.modules.redirect' => true
];

自定义

自定义模块模型

此插件创建了一个ModulePage模型,覆盖了某些方法。您可以使用自己的模型扩展此模型

// site/config/config.php

return [
  'medienbaecker.modules.model' => 'CustomModulePage'
];
// site/models/module.php

class CustomModulePage extends ModulePage {
  // methods...
}

手动定义可用模块

默认情况下,此插件会自动将所有模块填充到模块部分的create选项。如果您想手动定义可用模块,可以在蓝图中进行操作

modules:
  create:
    - module.text
    - module.images

许可证

此项目根据MIT许可证的条款进行许可。