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