# 首页控件化 想像一下,我们是不是可以把一个网页分成多个块,而可以单独管理每个块,比如可以设置某个块是否显示, 每个块也可以有自己名称,属性等。 [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`模板,点`更新`按钮,此时模板更新成功。 打开前台首页,看到如下图: ![](https://box.kancloud.cn/d2a8781e59fb83d7a0748c1039d85dd8_1000x210.png) ## 5.设计模板 点`quick_start`模板的`设计`按钮,打开模板文件列表对话框 ![](https://box.kancloud.cn/5b9b9526ed3900ab4b8626760237126b_1000x261.png) 点首页文件的`设计`按钮,打开模板文件设计对话框,并选择`组件设置`选项卡 ![](https://box.kancloud.cn/5136985d543b20c1257140bfded9ede1_1000x491.png) 随意更改组件的设置 ## 6.查看更改后的首页 刷新前台首页,此时显示的内容: ![](https://box.kancloud.cn/f2dd1da500286b145fa96bbee1a9edaa_1000x223.png) 同时你也可以隐藏控件,更改组件名称,这两个问题,大家可以自己思考一下。 > 请在`附件`下载本节源码。