首页控件化
想像一下，我们是不是可以把一个网页分成多个块，而可以单独管理每个块，比如可以设置某个块是否显示， 每个块也可以有自己名称，属性等。
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.查看更改后的首页
刷新前台首页，此时显示的内容：
同时你也可以隐藏控件，更改组件名称，这两个问题，大家可以自己思考一下。
希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， LeCMS， ClassCMS， Fastadmin， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。
未经允许不得转载：Str Tom工作室 » 首页控件化
