# 首页控件化
想像一下，我们是不是可以把一个网页分成多个块，而可以单独管理每个块，比如可以设置某个块是否显示， 每个块也可以有自己名称，属性等。
[TOC]
## 1.把首页分块
我们先把首页分成两块`分块一`和`分块二`
## 2.更改首页配置文件
我们把`public/themes/quick_start/portal/index.json` 文件内容更改如下：
```
{
"name": "首页",
"action": "portal/Index/index",
"description": "首页模板文件",
"order": 5.0,
"more": {
"vars": {
"name": {
"title": "姓名",
"value": "",
"type": "text",
"placeholder": "请填写用户姓名",
"tip": "设置后您的姓名将会显示在首页",
"rule": {
"require": true
}
}
},
"widgets": {
"block1": {
"title": "分块一",
"display": "1",
"vars": {
"background": {
"title": "背景色",
"value": "red",
"type": "select",
"options": {
"red": "红色",
"green": "绿色",
"blue": "蓝色"
},
"tip": "背景色",
"rule": {
"require": true
},
"message": {
"require": "不能为空"
}
}
}
},
"block2": {
"title": "分块二",
"display": "1",
"vars": {
"background": {
"title": "背景色",
"value": "blue",
"type": "select",
"options": {
"red": "红色",
"green": "绿色",
"blue": "蓝色"
},
"tip": "背景色",
"rule": {
"require": true
},
"message": {
"require": "不能为空"
}
},
"border_width": {
"title": "边框宽度",
"value": "1",
"type": "text",
"placeholder": "请填写边框宽度，整数",
"tip": "边框宽度，整数",
"rule": {
"require": true
}
},
"border_color": {
"title": "边框颜色",
"value": "red",
"type": "select",
"options": {
"red": "红色",
"green": "绿色",
"blue": "黄色"
},
"tip": "边框颜色",
"rule": {
"require": true
},
"message": {
"require": "不能为空"
}
}
}
}
}
}
}
```
在这一步我们给首页添加了两个控件，分别是`block1`和`block2`,并为它们设置了不同的属性
## 3.更改首页模板文件
我们把`public/themes/quick_start/portal/index.html` 文件内容更改如下：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{$theme_vars.name|default='ThinkCMF'}的网站</title>
</head>
<body>
Hello {$theme_vars.name|default='ThinkCMF'}!
<widget name="block1">
<div style="background:{$widget.vars.background|default='red'};height: 100px;line-height: 100px;margin-bottom: 10px;color:#fff;">
{$widget.title|default='分块一'}
</div>
</widget>
<widget name="block2">
<div style="background:{$widget.vars.background|default='blue'};border:{$widget.vars.border_width|default=1}px solid {$widget.vars.border_color|default='red'};height: 100px;line-height: 100px;color:#fff;">
{$widget.title|default='分块二'}
</div>
</widget>
</body>
</html>
```
## 4.更新模板
打开后台，设置->模板管理->所有模板，找到`quick_start`模板，点`更新`按钮，此时模板更新成功。
打开前台首页，看到如下图：
## 5.设计模板
点`quick_start`模板的`设计`按钮，打开模板文件列表对话框
点首页文件的`设计`按钮,打开模板文件设计对话框，并选择`组件设置`选项卡
随意更改组件的设置
## 6.查看更改后的首页
刷新前台首页，此时显示的内容：
同时你也可以隐藏控件，更改组件名称，这两个问题，大家可以自己思考一下。
> 请在`附件`下载本节源码。