模板制作新手教程（六）-文章内容页制作，并获取相关文章

这一篇我们来制作内容页面，可能有同学会有疑惑，为什么没有列表页，直接到内容页面呢？

上一篇我们学会了调用文章列表，列表页和它没什么区别，所以不就多写了。如果有同学不会的，可以留言或者到“rpcms论坛”上发布帖子。

还是先来看效果图：

一、添加相关文章的辅助函数

/*相关文章*/
function related($data,$type='cate',$limit=10){
	$LogsMod=new LogsMod();
	//随机获取order传参rand()
	$res=$LogsMod->related($data,$type,$limit);
	return $res;
}

LogsMod模块封装好了相关函数，可以直接使用。rpcms的相关文章支持：分类相关（cate）和标签相关（tages），根据需求传入不同的type即可。

获取相关文章使用的函数是：related(文章的data变量, 相关类型, 获取数量)。

获取上下文使用的函数是：neighbor(文章的ID)。

二、创建detail.php模板文件，码代码

内容页用的模板默认是detail.php，如果你有指定模板，请创建对应名称的模板文件。

内容页的数据全部封装在$data变量中，详细请参考《帮助文档-模板开发-单页/内容页变量》。

代码如下，可参考：

<?php if (!defined('CMSPATH')){exit('error!');}?>
{include:header}
<div class="container">
	<div class="detailBox">
		<h1>{$data['title']}</h1>
		<div class="detailLeft">
			<p class="detail_year"><span>{$data['upateTime']|strtotime|date='Y',###}</span></p>
			<p class="detail_md">{$data['upateTime']|strtotime|date='m-d',###}</p>
			<p class="detail_time">{$data['upateTime']|strtotime|date='H:i',###}</p>
			<div class="detail_author">{$data['author']}</div>
			<div class="totalBox">
				<div class="totalCount">
					<span>围观</span>
				</div>
				<p class="num">{$data['views']}</p>
			</div>
			<div class="totalBox">
				<div class="totalCount">
					<span>评论</span>
				</div>
				<p class="num">{$data['comnum']}</p>
			</div>
		</div>
		<div class="detailContent">{$data['content']|raw}</div>
	</div>
	<div class="sidebarBox">
		<div class="sidebarMod">
			<div class="title">相关推荐</div>
			<ul class="list">
				{foreach related($data,'cate',10) as $k=>$v}
				<li><a href="{$v['url']}" title="{$v['title']}">{:thumb($v)}<h3>{$v['title']}</h3></a></li>
				{/foreach}
			</ul>
		</div>
	</div>
</div>

在这里我们使用到一个新的技巧，变量使用函数。rpcms模板参数可以使用指定函数进行业务处理，使用方法也很简单。

{$变量名|函数1|函数2}

更多使用技巧请查看《模板制作-模板标签的使用》

三、附css，可参考

.detailBox{width: 700px;float: left;}
.detailBox h1{font-size: 30px;margin: 20px 0;}
.detailLeft{width: 110px;float: left;border-right: 1px solid #ccc;text-align: center;padding: 0 10px;}
.detail_year:after,.totalCount:after{content: "";display: block;width: 100%;height: 1px;background: #e8e8e8;position: absolute;top: 50%;left: 0;z-index: -1;}
.detail_year{font-size: 16px;color: #999;position: relative;}
.detail_year span,.totalCount span{background: #fff;padding: 0 10px;}
.detail_md{font-size: 20px;margin: 5px 0;}
.detail_time{font-size: 16px;color: #999;}
.detail_author{color: #19afdc;margin: 20px 0 100px 0;}
.totalCount{position: relative;}
.totalCount span{color: #565656;}
.totalBox{margin-bottom: 20px;}
.totalBox .num{font-size: 16px;margin: 10px 0;}
.detailContent{width: 590px;float: right;padding: 0 20px;}
.detailContent p,.detailContent img{max-width:100% !important;}
.detailContent p,.detailContent span{font-size: 17px !important;}
.sidebarBox{width: 300px;float: right;padding: 0 10px;margin: 20px 0;}
.sidebarMod{margin-bottom: 50px;}
.sidebarMod .title{font-size: 16px;font-weight: 600;margin-bottom: 10px;}
.sidebarMod .list li{margin-bottom: 10px;}
.sidebarMod .list li:after{content:"";display:block;height:0;clear:both;}
.sidebarMod .list li a{color: #111;}
.sidebarMod .list li img{width: 110px;height: 70px;float: left;margin-right: 10px;border-radius: 3px;}
.sidebarMod .list li h3{font-weight: normal;}

总结：内容页是用户提取信息的重要页面，提高用户的黏度也是模板制作者需要考虑到的。