9.修改标签模板

更新时间：2020-05-29 11:04:50 作者：米拓建站

相信你看完上面几个文档，也了解得差不多了，现在来尝试修改模板吧。
修改模板通常就是修改css、js和页面结构。

## 修改css
标签模板的css文件目录为：`templates/当前模板文件夹/static/metinfo.css`；

**注意：**前台页面加载的是`static/metinfo.css`自动生成的缓存文件`cache/metinfo.css`,不可直接在缓存文件夹中修改模板样式，否在清除缓存后，则修改的样式代码会被删除。

### 场景：修改metv7模板导航字体大小为18px
![](../upload/202005/1590653447982284.png)

打开`templates/metv7/static/metinfo.css`文件，找到对应的样式代码进行修改
    
    .met-nav .nav-item .nav-link { font-size: 18px; }
	
**注意：需要在可视化后台——常用功能——清空缓存，重新生成缓存文件，否在前台无效**

## 修改js
修改方法与修改css同理。

标签模板的js文件目录为：`templates/当前模板文件夹/static/metinfo.js`。

**注意：**
- 前台页面加载的是`static/metinfo.js`自动生成的缓存文件`cache/metinfo.js`,不可直接在缓存文件夹中修改，否在清除缓存后，会被自动还原；
- 修改完成后，需到可视化后台——常用功能——清空缓存，重新生成缓存文件，否在前台无效。

## 修改文件结构
请参考“[模板文件结构](https://doc.metinfo.cn/mb/mb/117.html "模板文件结构")”，了解标签模板文件构成及页面对应的文件。

###场景1：删除首页的新闻区块
1.访问网站首页，在浏览器中按F12审查元素，找到新闻区块对应的代码区块。

![](../upload/202005/1590655782336837.png)

2.在模板文件中找到首页区块对应的文件(index.php)页面，删除对应区块的代码。

![](../upload/202005/1590656194159756.png)

3.刷新网站首页，可查看到，首页的新闻区块已被删除。

![](../upload/202005/1590656283380657.png)

### 场景2：复制首页产品区块
**1.复制首页产品区块代码**
参考场景1，找到首页产品区块代码，并复制一份在首页文件index.php中;
**2.修改新产品区块的自定义参数**
复制的区块，区块设置是共用的，所以需替换新的产品区块的设置，即区块对应的自定义参数。
![](../upload/202005/1590657279460389.png)
可在模板制作助手中自定义添加，新增新产品区块并添加自定义参数，注意变量名不可与已有标签重名，具体可参考“[自定义标签用法](https://doc.metinfo.cn/mb/mb/28.html "自定义标签用法")”。
![](../upload/202005/1590657634869104.png)
**注意：**需点击两次保存按钮，否在自定义参数不显示。
**3.替换代码中的自定义变量**
例如区块标题和区块描述，需在代码中修改区块m-id的值和对应的变量名称
![](../upload/202005/1590661385603481.png)
**注意：添加或修改区块的方法跟复制区块是一样的。**

文档中心

米拓学堂

帮助中心

在线交流

{"status":1,"html":"<style type=\"text\/css\">\r\n.onlinebox_three{border:2px solid;}\r\n.onlinebox_three .onlinebox_three_list{width: 160px;padding: 10px 0px;}\r\n.onlinebox_three .online-item{margin-bottom: 5px; padding: 0px 17px; position: relative;display: block;color: #666;}\r\n.onlinebox_three .online-item:last-child{margin-bottom: 0px;}\r\n.onlinebox_three .online-item:hover{background: #f8f8f8;}\r\n.onlinebox_three .online-item i{font-size: 16px;}\r\n.onlinebox_three .onlinebox-open{font-size: 22px;display:none;cursor: pointer;padding: 0 10px; font-size: 18px; line-height: 40px;}\r\n.onlinebox.min .onlinebox-open{display:block;padding:0 10px;background:#444;font-size:18px;line-height:40px;color:#fff}\r\n.onlinebox .onlinebox-min{position: relative;top:-4px;}\r\n@media (max-width: 767px){\r\n.onlinebox_three .online-item{font-size: 12px;padding-top: 6px;}\r\n.onlinebox_three .online-item i{font-size: 14px;}\r\n}\r\n<\/style>\r\n<div id='onlinebox'  class=\"onlinebox onlinebox_three hide\" m-type='online' m-id='online' style=\"border-color:#1baadb;\">\r\n    <div class=\"onlinebox-open\" style=\"background:#1baadb;\"><i class=\"fa fa-comments-o\"><\/i><\/div>\r\n    <div class=\"onlinebox-box\">\r\n        <div class=\"onlinebox-top\" style=\"background:#1baadb;\">\r\n            <div class=\"onlinebox-top-btn font-size-26\">\r\n                <a href=\"javascript:;\" class=\"onlinebox-close\" title=\"\">×<\/a>\r\n                <a href=\"javascript:;\" class=\"onlinebox-min\">-<\/a>\r\n            <\/div>\r\n            <h4>在线交流<\/h4>\r\n        <\/div>\r\n                                    <div class=\"met-editor onlinebox-bottom p-x-10 p-y-5\"><p style=\"text-align: center;\">\r\n    <img src=\"..\/upload\/202001\/1579417409303256.png\" data-width=\"120\" width=\"120\" data-height=\"120\" height=\"120\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    微信公众号\r\n<\/p>\r\n<p style=\"text-align:center;\">\r\n    <img src=\"..\/upload\/202001\/1579417452544806.png\" data-width=\"150\" width=\"150\" data-height=\"150\" height=\"150\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    QQ交流群\r\n<\/p><\/div>\r\n    <\/div>\r\n<\/div>","t":"4","x":"10","y":"130"}