# 小工具 / Widgets <p class="uk-article-lead">创建小工具,在网站的不同位置显示小型内容块。</p> 要确定小工具的内容会显示在什么地方,在管理面板中的 _Widgets_ 将小工具发布到主题定义的各个位置。扩展和主题都可以自带小工具,在开发上没有区别。 [toc=2] ## 定义小工具位置 在主题的 `index.php` 中可以定义任意数目的小工具位置。 ```php 'positions' => [ 'sidebar' => 'Sidebar', 'footer' => 'Footer', ], ``` ## 渲染小工具 要在小工具位置上发布任意东西,可以使用来自于主题的`views/template.php`文件的视图(View)渲染器示例。 ```php <?php if ($view->position()->exists('sidebar')) : ?> <?= $view->position('sidebar') ?> <?php endif; ?> ``` ## 注册新的小工具类型 在 `index.php` 文件中使用 `widgets` 属性来注册新的小工具类型。 ```php 'widgets' => [ 'widgets/hellowidget.php' ], ``` ## 定义新的小工具类型 在 Pagekit 内部,小工具是一种模块。因此小工具也是由模块的定义方法来定义的:一个包含特定属性的 PHP 数组。 `widgets/hellowidget.php`: ```php <?php return [ 'name' => 'hello/hellowidget', 'label' => 'Hello Widget', 'events' => [ 'view.scripts' => function ($event, $scripts) use ($app) { $scripts->register('widget-hellowidget', 'hello:js/widget.js', ['~widgets']); } ], 'render' => function ($widget) use ($app) { // ... return $app->view('hello/widget.php'); } ]; ``` 这个例子需要下面的两个文件来将小工具渲染到前端页面,一个 javascript 文件和一个 PHP 文件。 `js/widget.js`: ```javascript window.Widgets.components['system-login:settings'] = { section: { label: 'Settings' }, template: '<div>Your form markup here</div>', props: ['widget', 'config', 'form'] }; ``` `views/widget.php`: ```php <p>Hello Widget output.</p> ``` **Note** 一个完整的例子,位于 Pagekit 核心的 `app/system/modules/user/widgets/login.php` 中。