# 首頁控件化
想像一下，我們是不是可以把一個網頁分成多個塊，而可以單獨管理每個塊，比如可以設置某個塊是否顯示， 每個塊也可以有自己名稱，屬性等。
[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.查看更改后的首頁
刷新前臺首頁，此時顯示的內容：
同時你也可以隱藏控件，更改組件名稱，這兩個問題，大家可以自己思考一下。
> 請在`附件`下載本節源碼。