模板制作新手教程（五）-获取置顶文章，制作banner

这一篇我们来制作banenr和排行榜，数据源使用置顶的文章。也可以使用插件来完成。

本篇文章主要掌握：文章列表的调用，指定类别内容的调用。先看效果图：

一、首先我们写好辅助函数

同样，写入到common.php，辅助函数都是写到这里面的，后面就不再强调了。

/*置顶文章*/
function topLogs($limit=10){
	$LogsMod=new LogsMod();
	$logData=$LogsMod->limit($limit)->where(array('a.isTop'=>1))->select();
	return $logData['list'];
}
/*根据浏览量获取文章排行榜*/
function HotLogs($limit=10){
	$LogsMod=new LogsMod();
	$logData=$LogsMod->limit($limit)->order(array('a.views'=>'desc'))->select();
	return $logData['list'];
}
/*正文中匹配缩略图*/
function thumb($data,$len=1){
	preg_match_all("|<img[^>]+src="([^>"]+)"?[^>]*>|is", $data['content'], $img);
	$thumb=array();
	if(isset($img[1]) && !empty($img[1])){
		$max=min(count($img[1]),$len);
		for($i=0;$i<$max;$i++){
			$imgs=$img[1][$i];
			$newimg=dirname($imgs). '/thum-' .basename($imgs);
			$thumb[]='<img src="'.(file_exists(CMSPATH .'/'. $newimg) ? $newimg : $imgs).'" alt="'.$data['title'].'"/>';
		}
	}else{
		$thumb[]= '<img src="'. TEMPURL .'/image/random/'.rand(1,20).'.jpg" alt="'.$data['title'].'"/>';
	}
	return join('',$thumb);
}

这里使用了一个新的obj：LogsMod，这个是系统封装好的文章类，可以使用这个方便的获取需要的数据。

在common.php中使用logsMod和使用其他系统文件一样，需要use一下。如下，在文件最上方use需要用到的模块：

<?php

use rp\Cache;
use rp\index\LogsMod;

logsMod返回的数据这里就不说明了，有能力的同学可以print_r打印看一下。

二、模板调用数据

这里的banner我们就使用Swiper来完成了。模板中遍历文章使用{foreach}标签。列表的数据请参考《帮助文档-模板制作-列表变量》

<div class="section s1">
	<div class="swiper-container banner">
		<div class="swiper-wrapper">
			{foreach topLogs(5) as $k=>$v}
			<div class="swiper-slide">
				<a href="{$v['url']}">
					{:thumb($v)}
					<p>{$v['title']}</p>
				</a>
			</div>
			{/foreach}
		</div>
		<div class="swiper-pagination"></div>
	</div>
	<ul class="rankingBox">
		{foreach HotLogs(10) as $k=>$v}
		<li><i>{$k+1}</i><a href="{$v['url']}" title="{$v['title']}">{$v['title']}</a></li>
		{/foreach}
	</ul>
	<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
	<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
	<script>
	var swiper = new Swiper('.swiper-container', {
		pagination: {
			el: '.swiper-pagination',
		},
	});
	</script>
</div>

三、附css，可参考

.section{margin: 10px 0;}
.banner{width: 700px;height: 300px;float: left;overflow: hidden;}
.banner .swiper-wrapper a{display: block;width: 100%;height: 100%;position: relative;}
.banner .swiper-wrapper img{width: 100%;height: 100%;}
.banner .swiper-wrapper p{position: absolute;left: 0;right: 0;bottom: 0;background: rgb(0 0 0 / 60%);padding: 0 10px;line-height: 40px;color: #fff;}
.rankingBox{width: 290px;height: 300px;float: right;overflow: hidden;}
.rankingBox li{margin: 11px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rankingBox li:first-child{margin-top: 0;}
.rankingBox li i{width: 20px;height: 20px;line-height: 20px;display: block;float: left;background: #b1b1b1;color: #fff;font-style: normal;text-align: center;margin-right: 5px;}
.rankingBox li a{color: #333;}
.rankingBox li:nth-child(-n+3) i{background: #f40;}

知识点讲解：

1、文章缩略图使用的辅助函数thumb，可以说所有模板通用。

2、模板中运行函数{:函数名称}。

3、foreach标签可以使用变量名，也可以直接使用函数。

4、调用变量{$变量名}。

总结：熟练掌握LogsMod模块，制作的模板“妙不可言”。