MetInfo帮助中心
网站首页
新手建站
米拓流程
使用手册
常见问题
模板制作教程
商业模板修改教程
应用开发教程
商业模板修改高级教程
[TOC] ##前言 `商业模板详细修改教程会修改模板配置数据文件，涉及到模板配置数据的重置，请谨慎修改，修改前务必备份网站数据和模板文件。` **米拓官方不提供任何模板修改的技术支持和咨询服务，亦不对用户自行修改模板而造成的损失承担任何责任，如对教程有疑问，可移步 [商业模板修改交流 ](https://qa.metinfo.cn/qa/ "商业模板修改交流 ")进行交流讨论！** ## 模板结构 ### 模板目录 | 名称 | 类型 | 说明 | | ------------ | ------------ | ------------ | | ajax | 文件夹 | 模板自定义的列表页列表文件，其中包括文章模块，产品模块，图片模块，下载模块，招聘模块，留言模块，搜索模块 | cache | 文件夹 | 每个模块页面UI打包生成的css，js的缓存文件，不要直接修改 | static | 文件夹 | 模板自定义的css、js等资源文件 | ui | 文件夹 | 模板调用的UI | 404.php | 文件 | 404页面，如果需要自定义，预览方式是在后台修改网站网址，会重新生成404页面 | download.php | 文件 | 下载模块列表页面 | feedback.php | 文件 | 反馈表单页面 | foot.php | 文件 | 底部文件，里面编写底部信息、底部导航代码等，所有的页面都会调用。 | head.php | 文件 | 头部文件，里面编写网站LOGO、导航、Banner等，所有的页面都会调用 |img.php | 文件 | 图片模块列表页面 | index.php | 文件 | 首页文件，里面编写首页内容部分的代码，引用了头部和底部文件。 | job.php | 文件 | 招聘模块列表页 | message_index.php | 文件 | 留言系统表单和留言列表页面 | metinfo.inc.php | 文件 | 模板引擎，可用来区分是ui模板还是标签模板 | news.php | 文件 | 文章模块列表页面 | position.php | 文件 | 网站位置 | product.php | 文件 | 产品模块列表页 | search.php | 文件 | 搜索模块列表页 | show.php | 文件 | 简介模块详情页面 | showdownload.php | 文件 | 下载模块详情页 | showimg.php | 文件 | 图片模块详情页 | showjob.php | 文件 | 招聘模块详情页 | shownews.php | 文件 | 新闻模块详情页 | showproduct.php | 文件 | 产品模块详情页 | sitemap.php |文件| 网站地图页面 | subcolumn_nav.php | 文件 | 内页二级栏目导航 | view.jpg |文件 | 模板风格后台预览图 | ui.json |文件 | 模板UI的数据，模板初始化或打包后自动生成 ###页面结构 例如：index.php  - 首页文件使用`include`标签调用了当前模板根目录下的头部文件`head.php`和`foot.php`，使用`ui`标签调用了几个区块的php文件。 - `include`标签：调用当前模板根目录下的文件。 参数：`file`-文件名称；`page`-调用head.php时专用，定义当前页面生成的js、css文件名称。 - `ui`标签：调用当前模板根目录下`UI`文件夹中的区块文件。 参数：`name`-UI名称；`style`-UI编号；`id`-安装编号（唯一值，不能和其他UI标签重复）。 ###模板配置数据结构 模板根目录下`ui.json`文件  ####数据结构 - page：页面配置数据 - index：模板文件名称 - 47：页面区块安装id - parent_name：区块名称，即该区块文件夹的父级文件夹名称 - ui_name：区块编号，即该区块文件夹的名称 - ui_page：区块所属模板文件名称 - ui_title：区块标题 - ui_description：区块描述 - ui_order：区块排序号（控制区块在页面的排序，值越小越靠前） - ui_version：区块版本号 - config：区块配置 - global：模板公共参数 `一个页面模板文件包含若干个模板文件和若干个区块文件，区块文件里可以调用所属区块的参数，所有模板文件和区块文件都可以调用模板公共参数` ####区块配置参数 - pid：区块安装id - parent_name：区块名称 - ui_name：区块编号 - uip_type：参数类型 - uip_style：栏目类型参数的选择范围 - uip_select：单选、下拉、多选类型参数的可选值 - uip_name：参数名（必须为字母数字的组合） - uip_key：参数key - uip_value：参数值 - uip_default：参数默认值 - uip_title：参数标题 - uip_description：参数描述 - uip_order：参数排序号（控制参数在可视化界面的区块设置弹框中的排序，值越小越靠前） - uip_hidden：该参数在区块参数弹框中是否隐藏，隐藏后通过点击弹框底部的【更多设置】按钮即可展开显示 ####模板公共参数  - id：参数id - pid：必须为0，代表该参数是模板公共参数 - parent_name：必须为global，代表该参数是模板公共参数 - ui_name：必须为system，代表该参数是模板公共参数 - uip_type：参数类型 - uip_style：栏目类型参数的选择范围 - uip_select：单选、下拉、多选类型参数的可选值 - uip_name：参数名（必须为字母数字的组合） - uip_key：参数key - uip_value：参数值 - uip_default：参数默认值 - uip_title：参数标题 - uip_description：参数描述 - uip_order：参数排序号（控制参数在可视化界面的导航【风格-风格设置】弹框中的排序，值越小越靠前） - lang：加载该参数的站点语言 - uip_hidden：该参数在可视化界面导航栏【风格设置】的弹框中是否隐藏，隐藏后通过点击弹框底部的【更多设置】按钮即可展开显示 `区块信息的值和所属区块参数的部分值必须一致`，例如： | 区块参数 | 区块 | | ------------ | ------------ | |id | pid | |parent_name | parent_name | |uip_name | ui_name | ##调整区块顺序   调整顺序后   ##复制区块 ###复制区块标签 找到需要复制区块的页面模板文件，复制需要复制区块的UI标签到需要添加的位置，可以复制到其他模板文件中。 ### **`郑重提醒：复制或者添加的区块安装id（pid，installid）要从9000开始，从10000开始是无效的`**  ###复制区块参数 打开模板根目录下`ui.json`文件，通过`【模板文件名称】`——>`UI标签中的id【等于ui.json中installid】`找到复制区块的的参数区域，复制该区块的参数到目标模板文件的目标位置。  修改`ui.json`中的参数信息并保存后，执行 [重新导入模板数据](#重新导入模板数据 "重新导入模板数据") 操作。 注意：`复制的区块可以在可视化界面中修改成和原区块不同的设置，但修改了区块源文件后，因为复制区块和原区块是调用的是同一套区块文件，所以对两个区块的影响效果是一样的，请谨慎修改区块源文件` ##添加区块 添加区块就是在复制区块的基础上，再去复制一套原区块的文件，并将新区块的文件夹名称，然后`ui.json`中新区块的参数信息改成新的参数信息。以此类推，根据区块规则，可以自己写一个新的区块出来，可以放在任意一个页面位置。 ###执行复制区块操作 先复制相似的区块或任意一个区块UI标签到目标页面模板文件的目标位置，然后复制原区块的区块参数信息到`ui.json`中对应页面位置。 这一步参考 [复制区块](#复制区块 "复制区块") 操作，操作完后暂时不要重新导入模板数据。 注意：`如果是从另一个模板添加UI过来的，可以不修改UI分类名，但是UI参数的数据需要从其他模板下的ui.json复制过来，并修改skin_name信息。` ###复制并修改区块文件 修改复制的UI标签的name`name`和`style`值，例如：`<ui name="diy_list" style="diy_001" id="10005" />`。至此已经新建了一个区块标签。  根据原区块UI标签上的`name`和`style`值从模板根目录的`ui`文件夹中找到原区块的区块文件夹，并将其复制到新区块标签上`name`和`style`值对应的区块文件夹中，没有则在`ui`文件夹中新建文件夹，并修改区块文件夹名称为区块编号，区块文件新建完成。  如果只是在原区块基础上做修改，则可以直接修改新区块文件，如果是要制作全新的区块，则要把新区块文件中的代码清空再去编写，同时区块文件夹下的img文件夹也要清空。 ###修改区块信息及参数 找到从原区块复制过来的新区块参数区域，修改按照新区块UI标签上的参数值来修改参数信息。  **新建区块信息完成，可以编写调试新区块了** 编写调试完毕后，执行 [重新导入模板数据](#重新导入模板数据 "重新导入模板数据") 操作。 ##删除区块 ###删除区块标签 找到需要删除区块所在的页面模板文件，删除区块对应的UI标签  ###删除区块参数 打开模板根目录下`ui.json`文件，通过`【模板文件名称】`——>`UI标签中的id【等于ui.json中installid】`找到删除区块的的参数区域，删除该参数区域。  修改`ui.json`中的参数信息并保存后，执行 [重新导入模板数据](#重新导入模板数据 "重新导入模板数据") 操作。 ##修改区块 根据UI标签上的信息，进入模板根目录下的UI文件夹，按照`name【区块名称】`-`style【区块编号】`的路径找到修改区块所在的UI文件夹，该文件夹包含需要修改的区块文件。  ###修改区块php、html、js、css 按照 [商业模板修改教程](../muban/186.html "UI修改保存") 修改区块代码。 ###修改区块参数 打开模板根目录下`ui.json`文件，通过`【模板文件名称】`——>`UI标签中的id【等于ui.json中installid】`找到当前区块的的参数区域。 例如：上图`index.php`模板文件中区块`service_list`的`id`为47，则`ui.json`中所属`index`部分的`installid`为47的区域为该区块参数的信息。  按照 [修改参数](#修改区块参数或公共参数 "修改区块参数或公共参数") 教程修改参数。 ###添加区块代码 可以在模板文件包括区块文件中添加修改自己的代码 ####模板文件添加代码 例如：模板根目录下的head.php  ####区块文件修改添加代码 例如：模板根目录下UI/about_list/met_16_1/index.php  ###修改区块引入的css、js、图片文件路径 打开区块文件夹下的`config.json`文件，修改引入的文件路径。 区块自定义css、js文件或文件夹放在区块文件夹根目录下，图片文件或文件夹放在区块文件夹下`img`。 ####修改区块引入的css、js文件路径 引入css、js文件的路径前缀以`ui/css/`和`ui/js/`代替。   例如： `ui/css/index.css`，`ui/js/index.js` 或： `ui/css/diy/index.css`，`ui/js/diy/index.js`  ####修改区块引入的图片文件路径  ](http://help.metinfo.cn/upload/201807/153300688942460.png " css中调用图片方式，以`$ui_url`为路径前缀。 例如： `.asdasd{background:url('$ui_url/view1.jpg');}` 或 `.asdasd{background:url('$ui_url/diy/view1.jpg');}` ##添加、修改模板公共文件 在每个页面模板文件都添加同一个模板文件，则该模板文件可作为模板公共文件加载，修改模板公共文件后在网站前台每个页面都会生效。例如：`head.php`、`foot.php`。  可在模板公共文件中自定义html、css、js代码，也可以调用其他区块、模板公共参数。 ###修改模板公共参数 打开模板根目录下`ui.json`文件，找到`global`参数区域。  按照 [修改参数](#修改区块参数或公共参数 "修改区块参数或公共参数") 教程修改参数。 ##修改区块参数或公共参数 `ui.json`文件中找到需要修改的参数信息部分，按照下表修改。 | 名称 | 能否修改 | 说明 |备注| | - | - | - | - | |id|不能||| |pid|不能||| |parent_name|不能||| |ui_name|不能||| |uip_type|能|参数类型，可取2到9的除开5的整数值|2：简短文本；3：多行文本；4：单选按钮；6：栏目选择；7：上传组件；8：编辑器；9：颜色选择器。| |uip_style|能|`uip_type`为6（栏目类型）的参数选择值范围，可从三个值`4、1、3`中选择设置|4：可选所有栏目；1：只能选择一级栏目；3：只能选择带信息列表的栏目（文章、产品、图片、下载、招聘）| |uip_select|能|单选、下拉、多选类型参数的可选值|值的写法：`$M$值文字$T$值`，多个值以`$M$`链接：`$M$值1文字$T$值1$M$值2文字$T$值2`。例如：`$M$红色$T$red`，多个值：`$M$红色$T$red$M$黑色$T$black`。| |uip_name|不能||| |uip_key|不能||| |uip_value|能|参数值|| |uip_default|能|参数默认值|参数没有设置uip_value时，调用该值| |uip_title|能|参数标题|| |uip_description|能|参数描述|| |uip_order|能|控制参数在可视化界面的导航【风格-风格设置】弹框中的排序，值越小越靠前|| |lang|不能||| |uip_hidden|能|该参数在区块参数弹框中是否隐藏，隐藏后通过点击弹框底部的【更多设置】按钮即可展开显示|0为不隐藏，1为隐藏；默认不隐藏| ###修改区块版本号 修改了区块任何文件或参数后，要修改区块版本号参数`ui_version`为`10000`，以保证模板升级后区块文件和参数不被还原。  修改`ui.json`中的参数信息并保存后，执行 [重新导入模板数据](#重新导入模板数据 "重新导入模板数据") 操作。 ##添加参数 `ui.json`文件中找到需要增加参数的区块部分，在区块config数组（如果是增加模板公共参数，则直接找global数组部分）的后面增加一个参数信息数组，也可以直接复制一个该区块config下已有的参数信息数组。 ###添加区块参数信息数组  ###添加模板公共参数信息数组  ###修改添加的参数信息数组 | 名称 | 说明 |备注| | - | - | - | |id|模板公共参数的id|等于上一个模板公共参数的id值加1| |pid|等于所属区块的installid|模板公共参数的该值为0| |parent_name|等于所属区块的parent_name|模板公共参数的该值为`global`| |ui_name|等于所属区块的ui_name|模板公共参数的该值为`system`| |uip_type|参数类型，可取2到9的除开5的整数值|2：简短文本；3：多行文本；4：单选按钮；6：栏目选择；7：上传组件；8：编辑器；9：颜色选择器。| |uip_style|`uip_type`为6（栏目类型）的参数选择值范围，可从三个值`4、1、3`中选择设置|4：可选所有栏目；1：只能选择一级栏目；3：只能选择带信息列表的栏目（文章、产品、图片、下载、招聘）| |uip_select|单选、下拉、多选类型参数的可选值|值的写法：`$M$值文字$T$值`，多个值以`$M$`链接：`$M$值1文字$T$值1$M$值2文字$T$值2`。例如：`$M$红色$T$red`，多个值：`$M$红色$T$red$M$黑色$T$black`。| |uip_name|参数名|必须为字母数字的组合| |uip_key|参数名key|与参数名相同| |uip_value|参数值|| |uip_default|参数默认值|参数没有设置uip_value时，调用该值| |uip_title|参数标题|| |uip_description|参数描述|| |uip_order|控制参数在可视化界面的导航【风格-风格设置】弹框中的排序，值越小越靠前|| |lang|加载该参数的站点语言|对应语言的站点加载该模板后，会调用该参数|| |uip_hidden|该参数在区块参数弹框中是否隐藏，隐藏后通过点击弹框底部的【更多设置】按钮即可展开显示|0为不隐藏，1为隐藏；默认不隐藏| 修改`ui.json`中的参数信息并保存后，执行 [重新导入模板数据](#重新导入模板数据 "重新导入模板数据") 操作。 ##重新导入模板数据 `修改ui.json过后，一定要记得`[修改区块版本号](#修改区块版本号 "修改区块版本号")。 到可视化界面导航【我的应用】-【官方模板管理工具】，删除当前模板的配置数据，再重新导入。    导入模板数据后，点击可视化界面导航【常用功能】-【清空缓存】，修改的参数即可生效。 `系统7.0以上的版本需要先切换到其他模板，才能删除该模板，再重新导入。` ##注意事项 **`郑重提醒：复制或者添加的区块的安装id（pid，installid）要从9000开始，从10000开始是无效的`** **修改模板之后，在修改的模板根目录【ui.json】中找到修改的区块文件对应的参数区域，其区块版本参数【ui_version】要改成10000，否则模板会提示升级，且升级后模板的文件会被还原。** `商业模板详高级改教程会修改模板配置数据文件，涉及到模板配置数据的重置，请谨慎修改，修改前务必备份网站数据和模板文件。` **米拓官方不提供任何模板修改的技术支持和咨询服务，亦不对用户自行修改模板而造成的损失承担任何责任，如对教程有疑问，可移步 [商业模板修改交流 ](http://forum.metinfo.cn/forum-44-1.html "商业模板修改交流 ")进行交流讨论！**