4.标签设计原理

更新时间：2020-07-16 09:35:39 作者：米拓建站

## 什么是模板标签
- 模板标签是一组用来在网站前端页面(模板页面)获取网站数据的自定义函数；
- 模板标签通过模板引擎解析才会生效；
- 常见的一些cms或框架的模板标签写法示例：

**类似html的：**

```
 <list id="2" num="10">
 <li><a href="{$v.url}" title="链接关键词">{$v.title}</a></li>
 </list>
```
**使用大括号和中括号的：**

```
 {xxx:arclist row="10" id="2"}<li><a href="[field:url]" title="链接关键词">[field:title]</a></li>{/xxx:arclist}
```
**使用@和大括号：**

```
 @foreach($data as $item)
 <li><a href="{{$item- title="链接关键词">url}}" >{{$item->title}}</a></li>@endforeach
```

**其他：**

```
 {% for item in data %}<li><a href="{{item.url}}" title="链接关键词">{{item.title}}</a></li>{% endfor %}
```

## 米拓的模板标签

- 米拓模板标签的写法类似html标签;
- 行级标签：`<if></if>`，`<list></list>`，`<tag></tag>`，`<lang></lang>`;
- 块级标签：`<include />`，`<location />`，`<pager />`，`<pagination>`
- 结合米拓企业建站系统的模块特性，定义了产品、文章、下载、图片、搜索、导航等标签，在这些基础上统一使用`<tag>`标签传参的方式进行调用。

### 米拓模板标签类型：
- **数据标签：**用于调用数据的标签，例如[tag标签](https://doc.metinfo.cn/mb/mbtag/list-91.html "tag标签")、[list标签](https://doc.metinfo.cn/mb/mbtag/84.html "list标签")、[location 面包屑导航](https://doc.metinfo.cn/mb/mbtag/86.html "location 面包屑导航")、[lang 多语言列表](https://doc.metinfo.cn/mb/mbtag/89.html "lang 多语言列表")；
- **功能标签：**[if标签](https://doc.metinfo.cn/mb/mbtag/85.html "if标签")、[pager 列表页分页标签](https://doc.metinfo.cn/mb/mbtag/87.html "pager 列表页分页标签")、[pagination 上一篇、下一篇](https://doc.metinfo.cn/mb/mbtag/88.html "pagination 上一篇、下一篇")、[include 文件引入标签](https://doc.metinfo.cn/mb/mbtag/98.html "include 文件引入标签")、[met_foot 页面结尾标签](https://doc.metinfo.cn/mb/mbtag/115.html "met_foot 页面结尾标签")、[met_meta 页面开头标签](https://doc.metinfo.cn/mb/mbtag/114.html "met_meta 页面开头标签")；
- **变量：**系统变量及模板自定义变量，具体参考模板标签大全中的“[特殊变量](https://doc.metinfo.cn/mb/mbtag/list-93.html "特殊变量")”；

## 使用米拓模板标签的好处

1.在没有模板标签之前,数据通过php函数传参获取，参数顺序和类型不利于理解和维护；
- 不使用模板标签时获取数据和参数传递示例：

$news_list = methtml_getarray(2,10,'',200,xxx,xxx);
	
- 使用模板标签后可以通过参数名识别参数类型和用途，并且传参不需要考虑排序：

<tag action="news.list" num="10" id="2" order="top" titlelen="200" xxx xxx></tag>
	
2.php代码嵌入到html页面中，字符拼接和变量输出非常复杂，可读性低，学习成本和维护成本高；
3.使用模板标签可以使前后端分离，模板制作人员只需要通过标签传参获取数据；
**使用前：**

<?phpecho <<<EOT
 -->
 
 	<li>
 		<h4>
 			<a href="{$val[url]}" title="{$val[title]}">
 				{$val['title']}
 			</a>
 		</h4>
 		{$val['description']}...
 	</li>
  
 <!--
 EOT;?>
	
**使用后：**

<tag action="news.list" id="2" num="10" ><li>
 		<h4>
 			<a href="{$val.url}" title="{$val.title}">
 				{$val.title}
 			</a>
 		</h4>
 		{$val.description}...
 	</li></tag>
		
4.利用模板标签可以少写重复的代码提高开发效率，如:
- 获取面包屑导航：`<location />`
- 获取分页：`<pager />`
- 引入公共模板文件：`<include file=""/>`

5.米拓模板标签的写法类似html标签，书写方便，看起来没有违和感，便于学习和理解。
6.简化了标签的数量，可以让初学者不需要学习过多的标签,也使以前接触过框架或cms的开发者可快速理解并上手制作网站。
7.跟其他cms不同的是使用米拓模板标签开发的网站支持可视化编辑，想改哪里点哪里，减少去后台到处找地方修改的时间。
8.模板页面不限制使用原生php。

## 模板引擎对模板标签的处理流程

1. 页面被访问时系统读取模板目录下对应的模板文件内容；
2. 模板引擎对模板文件内容进行正则替换解析,将模板中的标签替换成php自定义函数，将模板中的变量替换为php的变量；
3. 替换之后的内容就是原生的php代码和html,内容会缓存到cache/templates目录，下一次请求会从cache/templates目录读取缓存内容直接运行输出，不需要再次解析模板文件，从而提高网站访问速度；
4. 模板文件被修改或缓存被清空会重新解析模板。

静态页面编写需要添加各种图文内容，这些内容在制作模板的时候就用标签来调用，调用的是后台的数据，所以模板标签你必须得熟悉，你可以看看[模板标签大全](http://doc.metinfo.cn/mb/mbtag/ "模板标签大全")有哪些标签可以使用以及如何使用。

页面上的内容大部分都需要动态更新和可视化设置，而实现这一功能就需要模板自定义变量与模板标签相配合。

模板自定义变量（也叫自定义标签，跟模板标签不是同一个东西），变量类型有：分区、简短文本、多行文本、单选按钮、栏目选择、上传组件、编辑器、颜色选择器等，通过模板自定义变量与模板标签结合，可对页面的内容和排版样式进行可视化设置，能够实现很好的用户交互体验，构建强大灵活用户配置体验极佳的模板。
模板自定义变量需要使用【模板制作助手（6.0.0）】来生成，并在模板源码中使用。

## 变量标签的用法：
示例标签：**(不管是什么变量标签都是由前缀.变量名组成)**

$c.index_url //当前语言首页地址
	
这个变量标签是当前语言首页的链接地址，使用方法：{$c.index_url}
### 场景：LOGO的链接需要链接到首页
模板代码这样编写:
 
 <a href="{$c.index_url}" class="met-logo" title="{$c.met_webname}">
 <img src="{$c.met_logo}" alt="{$c.met_logo_keyword}" class="hidden-sm-down" title="图片关键词">// PC端显示的logo
 <img src="{$c.met_mobile_logo}" alt="{$c.met_logo_keyword}" class="hidden-md-up" title="图片关键词">// 手机端显示的logo
 </a>
	
编写好之后，前台页面访问的HTML代码：
 
 <a href="http://www.metinfo.cn/" class="met-logo" title="MetInfo官方网站">
 <img src="../upload/201405/1400045007.gif" alt="Logo关键词" class="hidden-sm-down" title="图片关键词">// PC端显示的logo
		<img src="../upload/201405/1400045894.gif" alt="Logo关键词" class="hidden-md-up" title="图片关键词">// 手机端显示的logo
 </a>
	
## 数组标签的用法：
### 场景1：我需要调用头部导航
模板代码这样编写:
 
 <tag action='category' type='head' class='active'>//调用头部导航
 <li class='nav-item'>
 <a href="{$m.url}" {$m.urlnew} title="{$m.name}" class="nav-link {$m.class}">{$m._name}</a>
 </li>
 </tag>
	
编写好之后，前台页面访问的HTML代码：
 
 <a href="about/" title="关于我们">关于我们</a>
 <a href="news/" title="新闻资讯">新闻资讯</a>
 <a href="product/" title="产品展示">产品展示</a>
 <a href="download/" title="下载中心">下载中心</a>
 <a href="case/" title="客户案例">客户案例</a>
 <a href="job/" title="招贤纳士">招贤纳士</a>
 <a href="link/" title="友情链接">友情链接</a>
 <a href="member/" title="会员中心">会员中心</a>
 <a href="search/" title="站内搜索">站内搜索</a>
 <a href="sitemap/" title="网站地图">网站地图</a>
 <a href="http://localhost/MetInfo6.0/admin/" title="网站管理">网站管理</a>

### 场景2：首页区块需要显示新闻中心这个栏目的名称和URL
 
 <tag action="category" type="current" cid="3" class="active">
 <a href="{$m.url}" title="链接关键词">{$m._name}</a>
 </tag>
	
其中cid=”3”的3为新闻中心的id，前台访问编译后：
 
 <a href="http://localhost/metui01/news/" title="链接关键词">新闻动态</a>