emlog添加好看的分区板块,这个也就是之前鱼的博客中一个模块。

效果图:

首页代码:

<!--列表榜单-->  
<div class="new-tag">
<div class="right-list">
<ul class="nav-tabs tab-btns d-flex justify-content-between" role="tablist">
<li class="active"><a href="#newlog" class="btn btn-sm" role="tab" data-toggle="tab"aria-expanded="true"><span> 随机主题</span></a></li>
<li><a href="#comlog" class="btn btn-sm" role="tab" data-toggle="tab" aria-expanded="false"><span> 最新回复</span></a></li>
<li><a href="#hotlog" class="btn btn-sm" role="tab" data-toggle="tab" aria-expanded="false"><span> 热门主题</span></a></li>
<li><a href="#toplog" class="btn btn-sm" role="tab" data-toggle="tab" aria-expanded="false"><span> 30天热门</span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" role="tabpanel" id="newlog">
<ul class="list-block">
<?php metarandom(11);?>
</ul>
</div>
<div class="tab-pane fade" role="tabpanel" id="comlog">
<ul class="list-block">
<?php metacommet(11);?>
</ul>
</div>
<div class="tab-pane fade" role="tabpanel" id="hotlog">
<ul class="list-block">
<?php metahot(11);?> 
</ul>
</div>
<div class="tab-pane fade" role="tabpanel" id="toplog">
<ul class="list-block">
<?php metamonthlylist(11);?>
</ul>
</div>
</div>
</div> 
</div>
</div>


放入Emlog,module.php:

<?php
//列表表单热门文章
function metahot($log_num) {
$db = MySql::getInstance();
$sql = "SELECT a.*,b.photo FROM ".DB_PREFIX."blog a INNER JOIN ".DB_PREFIX."user b ON a.author = b.uid WHERE a.type='blog' and a.hide='n' order by comnum desc LIMIT 0,".$log_num."";
$list = $db->query($sql);
while($row = $db->fetch_array($list)){ 
$thum_src = getThumbnail($row['gid']);
if($thum_src) {
$img = $thum_src;
}elseif($imgsrc){
$img = $imgsrc;
}else{
$img = TEMPLATE_URL.'Static/images/zanwu.jpg'.substr($row['gid'],-1).'.jpg';
}
?>
<li class="d-flex align-items-center justify-content-between no-gutters col"><a href="<?php echo Url::log($row['gid']); ?>" class="col d-flex align-items-center over-hidden"><span class="order flex-shrink"><?php echo ++$i;?></span><div class="ellipsis"><?php echo $row['title']; ?></div></a><a href="<?php echo BLOG_URL.'author/'.$row['author'] ?>" class="d-flex align-items-center"><img src="<?php if($row['photo']){echo $row['photo'];}else{echo TEMPLATE_URL.'Static/images/avatar.png';}?>" class="small-avatar deg360" /></a><time class="fs-12 fc-cd"><?php echo $time = date('Y-m-d',$row['date']);?></time></li>
<?php } ?>
<?php } ?>
<?php
//列表表单30天按点击率排行文章
function metamonthlylist($log_num) {
$db = MySql::getInstance();
$time = time();
$sql = "SELECT a.gid,a.title,a.comnum,a.author,b.photo,a.date  FROM ".DB_PREFIX."blog a INNER JOIN ".DB_PREFIX."user b ON a.author = b.uid WHERE a.type='blog' and date > $time - 30*24*60*60 ORDER BY `views` DESC LIMIT 0,$log_num";
$list = $db->query($sql);
while($row = $db->fetch_array($list)){ 
$thum_src = getThumbnail($row['gid']);
if($thum_src) {
$img = $thum_src;
}elseif($imgsrc){
$img = $imgsrc;
}else{
$img = TEMPLATE_URL.'Static/images/zanwu.jpg'.substr($row['gid'],-1).'.jpg';
}
?>
<li class="d-flex align-items-center justify-content-between no-gutters col"><a href="<?php echo Url::log($row['gid']); ?>" class="col d-flex align-items-center over-hidden"><span class="order flex-shrink"><?php echo ++$i;?></span><div class="ellipsis"><?php echo $row['title']; ?></div></a><a href="<?php echo BLOG_URL.'author/'.$row['author'] ?>" class="d-flex align-items-center"><img src="<?php if($row['photo']){echo $row['photo'];}else{echo TEMPLATE_URL.'Static/images/avatar.png';}?>" class="small-avatar deg360" /></a><time class="fs-12 fc-cd"><?php echo $time = date('Y-m-d',$row['date']);?></time></li>
<?php } ?>
<?php } ?> 
<?php //30天按点击率排行文章
function popular() {
$db = MySql::getInstance();
$log_num = 16;
$time = time();
$i=0;
$sql = "SELECT gid,title FROM ".DB_PREFIX."blog WHERE type='blog' AND date > $time - 1000*24*60*60 ORDER BY `views` DESC LIMIT 0,$log_num";
$list = $db->query($sql);
while($row = $db->fetch_array($list)){$i++; ?>
<li><a href="<?php echo Url::log($row['gid']); ?>" class="meta-tips" title="<?php echo $row['title']; ?>"><i><?php echo $i;?></i><?php echo $row['title']; ?></a></li>
<?php } ?>
<?php } ?>



这是Css

/*列表表单*/
.justify-content-between {-webkit-box-pack: justify!important;-ms-flex-pack: justify!important;justify-content: space-between!important;}
.right-list .btn-sm{padding-top:3px;padding-bottom:3px;color:#fff}
.right-list .nav-tabs{border-bottom:none}
.right-list .nav-tabs>li{float:none;margin-bottom:0}
.right-list .nav-tabs>li>a{border-radius:0;line-height:initial;margin-right:0}
.right-list .nav-tabs>li>a.btn{background-color:#f66}
.right-list .nav-tabs>li>a.btn:hover{background:#f99;color:#fff}
.right-list .nav-tabs>li.active>a{color:#fff}
.right-list .nav-tabs>li.active:nth-child(1) .btn{background-color:#61cab8}
.right-list .nav-tabs>li.active:nth-child(2) .btn{background-color:#81d385}
.right-list .nav-tabs>li.active:nth-child(3) .btn{background-color:#febe47}
.right-list .nav-tabs>li.active:nth-child(4) .btn{background-color:#9d9dff}
.right-list .list-block{margin-top:10px}
.list-block .order{margin-right:10px;width:16px;height:16px;line-height:16px;text-align:center;font-size:12px;color:#fff;background:#ccc;text-shadow:0 -1px 1px rgba(0,0,0,.25);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.list-block li{border-bottom:1px dashed #e8e8e8;line-height:32px;font-size:13px;padding-left:0;padding-right:0}
.list-block li:hover .order{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.list-block li:nth-child(1) .order{background-color:#f66}
.list-block li:nth-child(2) .order{background-color:#febe47}
.list-block li:nth-child(3) .order{background-color:#61cab8}
.img-list-block .swiper-container{width:100%;height:300px}
.img-list-block .swiper-slide a{position:relative;display:block;height:100%;border-radius:3px;background-size:cover;background-position:center}
.img-list-block .swiper-slide a p{position:absolute;left:0;right:0;bottom:0;color:#fff;line-height:20px;padding-left:15px;padding-right:15px}
.img-list-block .swiper-container-horizontal>.swiper-pagination-bullets{top:0;left:0;right:0;bottom:initial;display:flex;opacity:0;transition:all .2s ease-in-out}
.img-list-block .swiper-container-horizontal:hover>.swiper-pagination-bullets{opacity:1}
.img-list-block .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-radius:0;height:10px;background:#1a1a1a;font-size:0;transition:all .2s ease-in-out;margin:0 0 0 1px}
.img-list-block .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:first-child{margin-left:0}
.img-list-block .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover{background:rgba(87,189,246,.8);height:20px;font-size:12px;opacity:1;color:#fff}
.img-list-block .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background:rgba(255,255,255,.7);color:#333;height:20px;line-height:20px;font-size:12px}
.img-list-block .swiper-button-next,.img-list-block .swiper-button-prev{position:absolute;top:50%;margin-top:-27px;width:40px;height:50px;background:url(../img/slider-arrow.png) no-repeat;outline:0;opacity:.15;transition:all .2s ease-in-out}
.img-list-block .swiper-button-prev{left:15px;background-position:-130px 0}
.img-list-block .swiper-button-next{right:15px;background-position:-18px 0}
.img-list-block .swiper-button-next:hover,.img-list-block .swiper-button-prev:hover{opacity:.5}
.small-avatar{width:24px;height:24px;border-radius:50%;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.avatar__size-50{width:50px;height:50px;border-radius:50%}
.avatar__size-36{width:36px;height:36px;border-radius:50%}
.avatar__size-50__bdr-5{width:50px;height:50px;border-radius:5px}
.deg360{transition:all .4s ease-in-out;-webkit-transform:all .4s ease-in-out;-moz-transform:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out}
.deg360:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}
.over-hidden {overflow: hidden;}
.fs-12 {font-size: 12px;}
.fc-cd {color: #cdcdcd;}
头像
生活

本文标签:木有标签

文章标题:给emlog首页添加随机热门文章评论板块

文章链接:https://www.mjqzz.cn/emlog/36.html

版权声明:若无特殊注明,本文皆为 梦家 原创,转载请保留文章出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注