本博客的相册列表页代码,emlog程序


从玩emlog博客开始就想弄个相册,可以记录一些生活照,但是emlog博客没有什么太好的相册插件,官网只有一个并不是自适应的,而且emlog官网的相册插件好像只支持上传照片,如果说图片连接没办法放上去,所以说我就自己想办法改一改emlog博客程序,我现在是把列表页改了一下,改成了一个类似相册的界面,然后当点击之后进入文章页面就可以看到很多照片了,有伙伴挺喜欢,所以我把我所改的列表页代码发出来
我的博客跟你们的博客使用的模板不同,所以我这个代码仅供参考,CSS可以根据文章的修改
先说明几点:

1.相册分类的模板是怎么设置的?

关于这个我也写了篇文章:http://www.su1018.cn/jqjc/492.html

2.我博客的相册效果是怎么实现的?

可以看这篇文章,我使用的就是这个CSS效果:http://www.su1018.cn/jqjc/480.html

3.图片的数量是怎么显示的?

可以看这篇文章:http://www.su1018.cn/jqjc/420.html
<?php 
/**
 * 站点首页模板
 */
if(!defined('EMLOG_ROOT')) {exit('error!');} 
if($pageurl == Url::logPage()){include View::getView('index');exit;}
?>
<style>.spinner-grow{display:inline-block;width:2rem;height:2rem;vertical-align:text-bottom;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:spinner-grow .75s linear infinite;animation:spinner-grow .75s linear infinite}.border-top{border-top:1px solid #dee2e6!important;}.d-flex{display:-ms-flexbox!important;margin-bottom:15px;display:flex!important}.flex-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.text-sm{font-size:0.875rem !important;}.text-xl{font-size:1.375rem !important;}.font-height-xs{line-height:1 !important;}.media:after{content:'';display:block;padding-top:100%;}.media-content{position:absolute;top:0;bottom:0;left:0;right:0;border:0;border-radius:inherit;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;background-color:rgba(120,120,120,0.1);}.list-item{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;}.list-overlay-content{color:#fff;}.list-overlay-content .list-content{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:.75rem;background:#222831;background:-webkit-linear-gradient(to bottom,rgba(6,6,8,0),rgba(6,6,8,0.7));background:linear-gradient(to bottom,rgba(6,6,8,0),rgba(6,6,8,0.7));}</style>
<?php if(sywap()){?>
<style>.media-21x9:after{padding-top:30%;}</style>
<?php }else{?>
<style>.media-21x9:after{padding-top:10%;}</style>
<?php }?>
<main class="container">
<section class="wrapper">
<?php
	if (!empty($logs)){
		if(blog_tool_ishome() && empty($keyword)) {
			;
		}
		if(!empty($sort)) {
			$des = $sort['description']?$sort['description']:'这家伙很懒,还没填写该栏目的介绍呢~';
			echo '<section style="margin-bottom:1px;background:rgba(255,255,255,0.7);width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px;">
<section style="display:flex;justify-content:flex-start;align-items:center;flex-direction:row;">
<section style="border: 1px solid #D9DADA;border-radius:50%;width:50px;height:50px;overflow:hidden">
<img src="https://img.su1018.cn/1/f11.png" style="width: 100%;"/>
</section><section style="display:flex;align-items:flex-start;justify-content:center;flex-direction:column;margin-left:10px">
<section style="font-size:18px;letter-spacing:1px;color:#3EAF34">'.$sortName.'</section>
<section style="font-size: 12px;letter-spacing:1px;margin-top:3px;color:#BEBFBD">'.$des.'</section></section></section>
<section style="display:flex;justify-content:center;align-items:center;flex-direction:row;padding:8px 14px;box-sizing: border-box;border-radius:2px;font-size:14px;line-height:1;color:#3EAF34;flex-shrink:0;border:1px solid #3EAF34">'.$lognum.'册</section></section>';
		}
		if(!empty($record)) {
			$year    = substr($record,0,4);
			$month   = ltrim(substr($record,4,2),'0');
			$day     = substr($record,6,2);
			$archive = $day?$year.'年'.$month.'月'.ltrim($day,'0').'日':$year.'年'.$month.'月';
			echo '<div class="banner-bg-header style="padding-top:20px;""><h1 class="banner-title">日志归档</h1> <h4 class="banner-sub-title">'.$archive.'</h4> </div>';
		}
		if(!empty($author_name)) {
			echo '<div class="banner-bg-header" style="padding-top:20px;"><h1 class="banner-title">作者:'.$author_name.'</h1> <h4 class="banner-sub-title">共计发布文章'.$lognum.'篇</h4> </div>';
		}
		if(!empty($keyword)) {
			echo '<div class="banner-bg-header" style="padding-top:20px;"><h1 class="banner-title">'.$keyword.'</h1> <h4 class="banner-sub-title">本次搜索帮您找到有关  <a style="color:#fff;" href="'.BLOG_URL.'?keyword='.urlencode($keyword).'" title="'.htmlspecialchars($keyword).'">'.addslashes($keyword).'</a>  的结果'.$lognum.'条</h4> </div>';
		}
		if(!empty($tag)) {
			echo '<div class="banner-bg-header" style="padding-top:20px;"><h1 class="banner-title">'.$tag.'</h1> <h4 class="banner-sub-title">关于  <a style="color:#fff;" href="'.BLOG_URL.'tag/'.urlencode($tag).'" title="'.$tag.'">'.$tag.'</a>  的文章共有'.$lognum.'条</h4> </div>';
		}
	}
?>
<link href="https://img.su1018.cn/boke/baozi/bootstrap-grid.min.css" rel="stylesheet" />
<link href="https://img.su1018.cn/boke/baozi/style.css" rel="stylesheet" />
<div class="row">
  <?php 
  if (!empty($logs)):
  foreach($logs as $value):
  $flag = pic_num($value['content']);?>
<?php if(img_zw($value['content'])){$imgurl = img_zw($value['content']);
}elseif(img_fj($value['logid'])){$imgurl = img_fj($value['logid']);
}else{$imgurl = TEMPLATE_URL.'images/'.rand(1,5).'.jpg';}
?>
<?php $logImgCount = img_count($value['content']); ?>
			<div class="col-md-4 col-sm-6">
				<div class="box">
					<img style="width:100%;height:250px;object-fit:cover" src="<?php echo $imgurl;?>">
					<div class="box-content">
						<h3 class="title"><?php echo $value['log_title']; ?></h3>
<p style="margin-top:15px;border-top:1px solid #D8D8D8;padding:3px;">
</p>
						<span class="post">博客相册</span>&nbsp;&nbsp;&nbsp;<?php if ($logImgCount > 0): ?><i style="color:#FFFFFF;" class="fa fa-picture-o"></i>&nbsp;<?php echo $logImgCount ?><?php endif; ?>
					</div>
					<ul class="icon">
					<li><a class="ja_praise" data-ja_praise="<?php echo $value['logid'];?>"><i class="fa fa-thumbs-o-up"></i></a></li>
						<li><a title="相册模式" href="<?php echo $value['log_url']; ?>#lg=1&slide=0"><i class="fa fa-search"></i></a></li>
						<li><a title="文章模式" href="<?php echo $value['log_url']; ?>"><i class="fa fa-link"></i></a></li>
					</ul>
				</div>
			</div>
        <?php 
			endforeach;
			else:
		?>
		</div>
<section class="content" id="scroll">														
<section class="content_left">
			<!-- 预留给系统搜索 -->
			<div style="margin-top: 20px;text-align: center;">
				<h1>Not Found</h1>
				<p>抱歉,没有找到你想找的内容</p>
				<img src="<?php echo TEMPLATE_URL?>images/404.jpg">
			</div>
		<?php endif;?>
    <!-- 分页 -->
  </section>
    <div id="pagenavi">
    	<div class="lists-navigator clearfix">
    		<ol class="page-navigator">
    			<?php echo sheli_fy($lognum,$index_lognum,$page,$pageurl);?>
    		</ol>
    	</div>
	</div>  
<!-- 边栏 -->
</section>
</section>
</main>
<?php
 include View::getView('footer');
?>
小控心
希望未来会越来越好!


    小白学习一下

    蓝溪 2020-05-19 21:10   

登陆 注册

小控心

希望未来会越来越好!

  • 400运行天数
  • 755评论数量
  • 389文章数量

微信
APP

专属相册,记录属于我和你的每一个瞬间

小控心满眼都是小包子

查看相册