# 小工具 / 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` 中。
