Thinkcmf三首页控件化及模板描述文件

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": "知末!"/*模板描述*/
}

Thinkcmf三首页控件化及模板描述文件

猜你喜欢