版权声明:知末随未 https://blog.csdn.net/mo3408/article/details/90199175
1.我们将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": "不能为空"
}
}
}
}
}
}
}
在这里我们分为两个模块。
然后修改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>
然后我们更新模板,刷新后显示:
然后选择文件列表,点击设计,可以任意修改,然后更新模板,会看到发生变化:
在这里我们可以任意修改。
2.模板的描述文件:
每一个前台模板根目录都会有一个描述文件manifest.json
, 它的作用就描述这个模板一些关键信息,比如模板名,版本号,作者信息等。
模板描述文件manifest.json
的结构如下:
{
"name": "simpleboot3",/*模板名,和目录名一样*/
"version": "1.0.0",/*模板版本号*/
"demo_url": "http://thinkcmf.wyzdjg.top",/*模板演示地址*/
"author": "知末",/*模板作者*/
"lang": "zh-cn",/*模板的语言*/
"author_url": "http://www.wyzdjg.top",/*模板作者个人主页*/
"keywords": "知末",/*模板关键字*/
"description": "知末!"/*模板描述*/
}