relations关联内容标签

更新时间：2021-09-24 18:05:36 作者：米拓建站

## 概述：
通过调用relations标签，可调用某条内容的关联内容列表在模板各页面展示。
## 使用范围：
模板各页面都可以调用，但指定内容的所属模块必须为文章模块、产品模块、图片模块、图片模块其中之一时，才能调用其关联内容，其关联内容所属模块也只能是这四个模块其中之一。
## 类型：
数据标签，用于调用指定内容的关联内容列表的标签。
## 语法：
```html
<div>
    <relations>
    <div>
        <h3>{$relation.relation_class_name}</h3>
        <ul>
            <list data="$relation['list']">
            <li>
                <a href='{$val.url}' title='{$val.title}' {$g.urlnew}>
                    <if value="$relation['relation_module'] neq 4">
                    <img src="{$val.imgurl}" alt="{$val.title}" width="100%">
                    </if>
                    <h4>{$val._title}</h4>
                </a>
            </li>
            </list>
        </ul>
    </div>
    </relations>
</div>
```
【说明】
relations标签中的数据内容，可通过$relation数组及对应的字段获取，具体可参考下方的`$relation数组`。
##标签原理：
relations标签是数据的集合，数据类型类似js的数组，可获得指定内容的关联内容列表的数据集合。
relations标签的语法和js中的for函数类似，在relations标签的内部书写待渲染的html标签，`$relation`为每个循环变量的别名，包含了关联内容所属栏目的数据。
**relations标签：**
```html
<div>
    <relations>
    <div>
        <h3>{$relation.relation_class_name}</h3>
        <ul>
            <list data="$relation['list']">
            <li>
                <a href='{$val.url}' title='{$val.title}' {$g.urlnew}>
                    <if value="$relation['relation_module'] neq 4">
                    <img src="{$val.imgurl}" alt="{$val.title}" width="100%">
                    </if>
                    <h4>{$val._title}</h4>
                </a>
            </li>
            </list>
        </ul>
    </div>
    </relations>
</div>
```
**for函数：**
```js
for(i=0;i<list.length;i++){
	document.write('<h3>'+list[i]['relation_class_name’]+'</h3>');
	for(j=0;j<list[i].list.length;j++){
		var val=list[i].list[j];
      	document.write(`<li>
                <a href='${val.url}' title='${val.title}' ${g.urlnew}>
                    ${list[i]['relation_module']!= 4?`<img src="${val.imgurl}" alt="${val.title}" width="100%">`:''}
                    </if>
                    <h4>${val._title}</h4>
                </a>
            </li>`);
	}
}
```
总结：relations标签是后台返回数据的集合，类似于数组，在标签内部编写html代码，并使用$relation变量来获取每个关联栏目的内容列表的数据，这样我们就可以得到一段动态的包含关联栏目和关联内容列表的代码了。
##参数说明：
relations标签，可通过传入不同的参数值，来调用对应的内容，以下为参数选项值：

|参数名|是否必填|默认值|参数值说明|
|:----    |:-------    |:---|:---|
|module	|内容列表中调用其关联内容时必填，详情页内容调用时不要填|默认为当前页所属栏目的模块值（$data[‘module’]）|调用该标签的内容所属栏目的模块值,内容列表中一般传$m[‘module’]|
|id	|内容列表中调用其关联内容时必填，详情页内容调用时不要填|默认为当前页的id（$data[‘id’]）|调用该标签的内容的id，内容列表中一般传$v[‘id’]|
##$relation数组：
relations标签是一个数据的集合，relations标签内部循环时默认已指定$relation数组为循环变量的别名，从而调用更多的关联栏目及内容数据。
###调用语法：
`{$relation.字段名称}`
例如：
```html
<div>
    <relations>
    <div>
<h3>{$relation.relation_class_name}</h3>//{$relation.relation_class_name}：关联内容所属栏目名称；可根据需求自行调用显示
<ul>
            <list data="$relation['list']">//$relation['list']：关联栏目中的关联内容列表，是一个数据集合，通过list标签循环输出数据；list标签用法请参考list标签文档https://doc.metinfo.cn/mb/mbtag/84.html
<li>
   //{$val.url}：关联内容链接；{$val._title}：关联内容标题(带标题自定义样式span标签)；{$val.title}：关联内容标题；{$val.imgurl}：关联内容封面图片；
//$relation['relation_module']：关联内容所属栏目的模块值,模块值详解：https://doc.metinfo.cn/muban/tag/mbfaq/43-cn.html
                <a href='{$val.url}' title='{$val.title}' {$g.urlnew}>
                    <if value="$relation['relation_module'] neq 4">
                    <img src="{$val.imgurl}" alt="{$val.title}" width="100%">
                    </if>
                    <h4>{$val._title}</h4>
                </a>
            </li>
            </list>
        </ul>
    </div>
    </relations>
</div>
```
###$relation数组中包含的字段：
|字段名称|含义|
|:----    |:-------    |:---|
|relation_class_name|关联栏目名称|
|relation_module|关联栏目的模块值，模块值详解：https://doc.metinfo.cn/muban/tag/mbfaq/43-cn.html|
|classnow|关联栏目的id|
|list|关联栏目包含的关联内容列表|

**$relation[‘list’]数组循环通过list标签循环输出的变量$val中包含的字段：与该栏目对应模块的内容列表包含的字段一致，具体可查看（$v数组中包含的字段）https://doc.metinfo.cn/mb/mbtag/65.html**
##示例：
###产品模块详情页要显示关联内容及其所属关联栏目
产品模块详情页的模板文件为showproduct.php，在该文件中编写以下代码。
####模板代码：
```html
<div>
    <relations>
    <div>
<h3>{$relation.relation_class_name}</h3>//{$relation.relation_class_name}：关联内容所属栏目名称；可根据需求自行调用显示
<ul>
            <list data="$relation['list']">//$relation['list']：关联栏目中的关联内容列表，是一个数据集合，通过list标签循环输出数据；list标签用法请参考list标签文档https://doc.metinfo.cn/mb/mbtag/84.html
<li>
   //{$val.url}：关联内容链接；{$val._title}：关联内容标题(带标题自定义样式span标签)；{$val.title}：关联内容标题；{$val.imgurl}：关联内容封面图片；
//$relation['relation_module']：关联内容所属栏目的模块值,模块值详解：https://doc.metinfo.cn/muban/tag/mbfaq/43-cn.html
                <a href='{$val.url}' title='{$val.title}' {$g.urlnew}>
                    <if value="$relation['relation_module'] neq 4">//判断关联内容所属栏目不是下载模块时，显示该内容的封面图片
                    <img src="{$val.imgurl}" alt="{$val.title}" width="100%">
                    </if>
                    <h4>{$val._title}</h4>
                </a>
            </li>
            </list>
        </ul>
    </div>
    </relations>
</div>
```
【注意】
实际编写时请去掉注释文字。
####前台页面输出HTML：
```html
<div>
	<div>
		<h3>智能音箱</h3>
		<ul>
			<li>
				<a href='../product/showproduct.php?id=108' title='智能蓝牙音箱Ⅰ' target=_self>
					<img src="../upload/202109/1631529441.jpg" alt="智能蓝牙音箱Ⅰ" width="100%" title="图片关键词">
					<h4><span style=''>智能蓝牙音箱Ⅰ</span></h4>
				</a>
			</li>
			<li>
				<a href='../product/showproduct.php?id=106' title='智能蓝牙音箱Ⅲ' target=_self>
					<img src="../upload/202109/1631529072.jpg" alt="智能蓝牙音箱Ⅲ" width="100%" title="图片关键词">
					<h4><span style=''>智能蓝牙音箱Ⅲ</span></h4>
				</a>
			</li>
			<li>
				<a href='../product/showproduct.php?id=109' title='智能蓝牙音箱Ⅳ' target=_self>
					<img src="../upload/202109/1631529212.jpg" alt="智能蓝牙音箱Ⅳ" width="100%" title="图片关键词">
					<h4><span style=''>智能蓝牙音箱Ⅳ</span></h4>
				</a>
			</li>
			<li>
				<a href='../product/showproduct.php?id=107' title='智能蓝牙音箱Ⅱ' target=_self>
					<img src="../upload/202109/1631528927.jpg" alt="智能蓝牙音箱Ⅱ" width="100%" title="图片关键词">
					<h4><span style=''>智能蓝牙音箱Ⅱ</span></h4>
				</a>
			</li>
		</ul>
	</div>
	<div>
		<h3>资料下载</h3>
		<ul>
			<li>
				<a href='../download/showdownload.php?id=24' title='产品使用说明书' target=_self>
					<h4><span style=''>产品使用说明书</span></h4>
				</a>
			</li>
		</ul>
	</div>
</div>
```
###首页某内容列表要显示关联内容及其所属关联栏目
产品模块详情页的模板文件为index.php，在该文件中编写以下代码。
####模板代码：
```html
<ul>// 内容列表用ul、li标签的格式，可根据自己需求修改
	<tag action="category" type="son" cid="4">//调用栏目id为4的子栏目列表
	<tag action="list" cid="$m['id']" num="20" type="com">// 调用指定栏目的子栏目的内容列表，具体请参考 tag 指定栏目内容列表https://doc.metinfo.cn/mb/mbtag/65.html
	<li>
		<img src="{$v.imgurl}" title="{$v.title}" alt="图片关键词">
		<a href="{$v.url}" title="{$v.title}">{$v._title}</a>
		<div>
			<relations module="$m['module']" id="$v['id']">//在内容列表中调用该内容的关联内容时，需要传参数module：该内容所属栏目的模块值（$m来自于前一个<tag action="category" type="son" cid="4">标签循环输出的$m变量），id：该内容的id
			<div>
				<h3>{$relation.relation_class_name}</h3>//{$relation.relation_class_name}：关联内容所属栏目名称；可根据需求自行调用显示
				<ul class="relation-list">
					<list data="$relation['list']">//$relation['list']：关联栏目中的关联内容列表，是一个数据集合，通过list标签循环输出数据；list标签用法请参考list标签文档https://doc.metinfo.cn/mb/mbtag/84.html
					<li>
					   //{$val.url}：关联内容链接；{$val._title}：关联内容标题(带标题自定义样式span标签)；{$val.title}：关联内容标题；{$val.imgurl}：关联内容封面图片；
					//$relation['relation_module']：关联内容所属栏目的模块值,模块值详解：https://doc.metinfo.cn/muban/tag/mbfaq/43-cn.html
						<a href='{$val.url}' title='{$val.title}' {$g.urlnew}>
							<if value="$relation['relation_module'] neq 4">//判断关联内容所属栏目不是下载模块时，显示该内容的封面图片
							<img src="{$val.imgurl}" alt="{$val.title}" width="100%">
							</if>
							<h4>{$val._title}</h4>
						</a>
					</li>
					</list>
				</ul>
			</div>
			</relations>
		</div>
	</li>
	</tag>
	</tag>
</ul>
```
【注意】
实际编写时请去掉注释文字。
####前台页面输出HTML：
```html
<ul>
	<li>
		<img src="../upload/202109/1631529441.jpg" alt="智能蓝牙音箱Ⅰ" width="100%" title="图片关键词">
		<a href='../product/showproduct.php?id=108' title='智能蓝牙音箱Ⅰ' target=_self><span style=''>智能蓝牙音箱Ⅰ</span></a>
		<div>
			<div>
				<h3>智能音箱</h3>
				<ul class="relation-list">
					<li>
						<a href='../product/showproduct.php?id=108' title='智能蓝牙音箱Ⅰ' target=_self>
							<img src="../upload/202109/1631529441.jpg" alt="智能蓝牙音箱Ⅰ" width="100%" title="图片关键词">
							<h4><span style=''>智能蓝牙音箱Ⅰ</span></h4>
						</a>
					</li>
					<li>
						<a href='../product/showproduct.php?id=106' title='智能蓝牙音箱Ⅲ' target=_self>
							<img src="../upload/202109/1631529072.jpg" alt="智能蓝牙音箱Ⅲ" width="100%" title="图片关键词">
							<h4><span style=''>智能蓝牙音箱Ⅲ</span></h4>
						</a>
					</li>
					<li>
						<a href='../product/showproduct.php?id=109' title='智能蓝牙音箱Ⅳ' target=_self>
							<img src="../upload/202109/1631529212.jpg" alt="智能蓝牙音箱Ⅳ" width="100%" title="图片关键词">
							<h4><span style=''>智能蓝牙音箱Ⅳ</span></h4>
						</a>
					</li>
					<li>
						<a href='../product/showproduct.php?id=107' title='智能蓝牙音箱Ⅱ' target=_self>
							<img src="../upload/202109/1631528927.jpg" alt="智能蓝牙音箱Ⅱ" width="100%" title="图片关键词">
							<h4><span style=''>智能蓝牙音箱Ⅱ</span></h4>
						</a>
					</li>
				</ul>
			</div>
			<div>
				<h3>资料下载</h3>
				<ul>
					<li>
						<a href='../download/showdownload.php?id=24' title='产品使用说明书' target=_self>
							<h4><span style=''>产品使用说明书</span></h4>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</li>
	<li>
		<img src="../upload/202109/1631529441.jpg" alt="智能蓝牙音箱Ⅰ" width="100%" title="图片关键词">
		<a href='../product/showproduct.php?id=108' title='智能蓝牙音箱Ⅰ' target=_self><span style=''>智能蓝牙音箱Ⅰ</span></a>
		<div>
			<div>
				<h3>智能音箱</h3>
				<ul class="relation-list">
					<li>
						<a href='../product/showproduct.php?id=108' title='智能蓝牙音箱Ⅰ' target=_self>
							<img src="../upload/202109/1631529441.jpg" alt="智能蓝牙音箱Ⅰ" width="100%" title="图片关键词">
							<h4><span style=''>智能蓝牙音箱Ⅰ</span></h4>
						</a>
					</li>
					<li>
						<a href='../product/showproduct.php?id=106' title='智能蓝牙音箱Ⅲ' target=_self>
							<img src="../upload/202109/1631529072.jpg" alt="智能蓝牙音箱Ⅲ" width="100%" title="图片关键词">
							<h4><span style=''>智能蓝牙音箱Ⅲ</span></h4>
						</a>
					</li>
					<li>
						<a href='../product/showproduct.php?id=109' title='智能蓝牙音箱Ⅳ' target=_self>
							<img src="../upload/202109/1631529212.jpg" alt="智能蓝牙音箱Ⅳ" width="100%" title="图片关键词">
							<h4><span style=''>智能蓝牙音箱Ⅳ</span></h4>
						</a>
					</li>
					<li>
						<a href='../product/showproduct.php?id=107' title='智能蓝牙音箱Ⅱ' target=_self>
							<img src="../upload/202109/1631528927.jpg" alt="智能蓝牙音箱Ⅱ" width="100%" title="图片关键词">
							<h4><span style=''>智能蓝牙音箱Ⅱ</span></h4>
						</a>
					</li>
				</ul>
			</div>
			<div>
				<h3>资料下载</h3>
				<ul>
					<li>
						<a href='../download/showdownload.php?id=24' title='产品使用说明书' target=_self>
							<h4><span style=''>产品使用说明书</span></h4>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>
```