首页 > 模板开发 > 正文

模板制作新手教程(五)-获取置顶文章,制作banner

  • 更新时间:2021-01-18 22:17:10
  • 106阅读
  • 0评论

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

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

微信截图_20210107202724.png


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

同样,写入到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模块,制作的模板“妙不可言”。


0 位网友评论:

欢迎 来评论

请填写验证码
Top