Z-Blog纯净主题列表页二次开发
闲着没事干，把Z-Blog纯净主题的列表页魔改了一下，不喜勿喷！源码附在下面了
修改：post-multi.php （全部覆盖，记得备份源文件哦）
{* Template Name:列表页普通文章 *}
<div class="blog-slider">
<div class="blog-slider__wrp swiper-wrapper">
<div class="blog-slider__item swiper-slide">
<a href="{$article.Url}" {if $zbp->Config('tpure')->PostBLANKSTYLE == 2} target="_blank"{/if}>
<div class="blog-slider__img">
<img src="{tpure_Thumb($article)}" alt="{$article.Title}">
</div>
</a>
<div class="blog-slider__content">
<span class="blog-slider__code">
{php}
$post_info = array(
'user'=>'<a href="'.$article->Author->Url.'" rel="nofollow">'.$article->Author->StaticName.'</a>',
'date'=>tpure_TimeAgo($article->Time()),
'cate'=>'<a href="'.$article->Category->Url.'">'.$article->Category->Name.'</a>',
'view'=>$article->ViewNums,
'cmt'=>$article->CommNums,
'edit'=>'<a href="'.$host.'zb_system/cmd.php?act=ArticleEdt&id='.$article->ID.'" target="_blank">'.$lang['tpure']['edit'].'</a>',
'del'=>'<a href="'.$host.'zb_system/cmd.php?act=ArticleDel&id='.$article->ID.'&csrfToken='.$zbp->GetToken().'" data-confirm="'.$lang['tpure']['delconfirm'].'">'.$lang['tpure']['del'].'</a>',
);
$list_info = json_decode($zbp->Config('tpure')->PostLISTINFO,true);
if(count((array)$list_info)){
foreach($list_info as $key => $info){
if($info == '1'){
if($user->Level == '1'){
echo '<span class="'.$key.'">'.$post_info[$key].'</span>';
}else{
if($key == 'edit' || $key == 'del'){
echo '';
}else{
echo '<span class="'.$key.'">'.$post_info[$key].'</span>';
}
}
}
}
}else{
echo '<span class="user"><a href="'.$article->Author->Url.'" rel="nofollow">'.$article->Author->StaticName.'</a></span>
<span class="date">'.tpure_TimeAgo($article->Time()).'</span>
<span class="view">'.$article->ViewNums.'</span>';
}
{/php}
</span>
<a href="{$article.Url}" {if $zbp->Config('tpure')->PostBLANKSTYLE == 2} target="_blank"{/if} >
<div class="blog-slider__title">
{if $zbp->Config('tpure')->PostMEDIAICONSTYLE == '0'}{if $article.Metas.audio}<span class="zbaudio"></span>{/if}{if $article.Metas.video}
<span class="video"></span>{/if}{/if}{$article.Title}{if $zbp->Config('tpure')->PostMEDIAICONSTYLE == '1'}{if $article.Metas.audio}<span class="zbaudio"></span>{/if}{if $article.Metas.video}<span class="video"></span>{/if}{/if}
</div>
</a>
<a href="{$article.Url}" {if $zbp->Config('tpure')->PostBLANKSTYLE == 2} target="_blank"{/if} >
<div class="blog-slider__text">
{if $zbp->Config('tpure')->PostINTRONUM}
{php}$intro = preg_replace('/[\r\n\s]+/', ' ', trim(SubStrUTF8(TransferHTML($article->Intro,'[nohtml]'),$zbp->Config('tpure')->PostINTRONUM)).'...');{/php}
{if $type==='search'}
{$intro=preg_replace('/' . preg_quote(GetVars('q'),'/') . '/i',"<mark>$0</mark>",$intro)}
{/if}
{$intro}{else}{$article.Intro}{/if}
</div>
</a>
</div>
</div>
</div>
</div>修改：post-istop.php（全部覆盖，记得备份源文件哦）
{* Template Name:列表页单条置顶文章 *}
<div class="blog-slider">
<span title="[{$lang['msg']['top']}]" class="istop"></span>
<div class="blog-slider__wrp swiper-wrapper">
<div class="blog-slider__item swiper-slide">
<a href="{$article.Url}" {if $zbp->Config('tpure')->PostBLANKSTYLE == 2} target="_blank"{/if}>
<div class="blog-slider__img">
<img src="{tpure_Thumb($article)}" alt="{$article.Title}">
</div>
</a>
<div class="blog-slider__content">
<span class="blog-slider__code">
{php}
$post_info = array(
'user'=>'<a href="'.$article->Author->Url.'" rel="nofollow">'.$article->Author->StaticName.'</a>',
'date'=>tpure_TimeAgo($article->Time()),
'cate'=>'<a href="'.$article->Category->Url.'">'.$article->Category->Name.'</a>',
'view'=>$article->ViewNums,
'cmt'=>$article->CommNums,
'edit'=>'<a href="'.$host.'zb_system/cmd.php?act=ArticleEdt&id='.$article->ID.'" target="_blank">'.$lang['tpure']['edit'].'</a>',
'del'=>'<a href="'.$host.'zb_system/cmd.php?act=ArticleDel&id='.$article->ID.'&csrfToken='.$zbp->GetToken().'" data-confirm="'.$lang['tpure']['delconfirm'].'">'.$lang['tpure']['del'].'</a>',
);
$list_info = json_decode($zbp->Config('tpure')->PostLISTINFO,true);
if(count((array)$list_info)){
foreach($list_info as $key => $info){
if($info == '1'){
if($user->Level == '1'){
echo '<span class="'.$key.'">'.$post_info[$key].'</span>';
}else{
if($key == 'edit' || $key == 'del'){
echo '';
}else{
echo '<span class="'.$key.'">'.$post_info[$key].'</span>';
}
}
}
}
}else{
echo '<span class="user"><a href="'.$article->Author->Url.'" rel="nofollow">'.$article->Author->StaticName.'</a></span>
<span class="date">'.tpure_TimeAgo($article->Time()).'</span>
<span class="view">'.$article->ViewNums.'</span>';
}
{/php}
</span>
<a href="{$article.Url}" {if $zbp->Config('tpure')->PostBLANKSTYLE == 2} target="_blank"{/if} >
<div class="blog-slider__title">
{if $zbp->Config('tpure')->PostMEDIAICONSTYLE == '0'}{if $article.Metas.audio}<span class="zbaudio"></span>{/if}{if $article.Metas.video}
<span class="video"></span>{/if}{/if}{$article.Title}{if $zbp->Config('tpure')->PostMEDIAICONSTYLE == '1'}{if $article.Metas.audio}<span class="zbaudio"></span>{/if}{if $article.Metas.video}<span class="video"></span>{/if}{/if}
</div>
</a>
<a href="{$article.Url}" {if $zbp->Config('tpure')->PostBLANKSTYLE == 2} target="_blank"{/if} >
<div class="blog-slider__text">
{if $zbp->Config('tpure')->PostINTRONUM}
{php}$intro = preg_replace('/[\r\n\s]+/', ' ', trim(SubStrUTF8(TransferHTML($article->Intro,'[nohtml]'),$zbp->Config('tpure')->PostINTRONUM)).'...');{/php}
{if $type==='search'}
{$intro=preg_replace('/' . preg_quote(GetVars('q'),'/') . '/i',"<mark>$0</mark>",$intro)}
{/if}
{$intro}{else}{$article.Intro}{/if}
</div>
</a>
</div>
</div>
</div>
</div>在 主题设置-SEO设置-页头通用代码-添加下面的CSS代码：
<link href="//at.alicdn.com/t/font_2674631_9y036x8muxo.css" rel="stylesheet">
<style>
.blog-slider .istop{
position: absolute;
top: -2px;
}
.blog-slider .istop::before{
content: "\e67a";
font-size: 42px;
font-family: iconfont;
font-weight: normal;
vertical-align: top;
color: #4fb053;
}
.sidecmtcon{
border-radius: 10px;
}
.teles{
background: linear-gradient(to bottom, rgba(255,255,255,0), #f2f6ff 50%);
}
.sideuserhead{
border-radius: 15px 15px 0 0;
}
.sidebox, .pagebar, .friendlink{
border-radius: 15px;
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 0.2);
}
.sitemap{
margin-bottom: 15px;
}
.sideimg{
border-radius: 10px;
}
.post{
background: #f2f6ff;
padding: 20px 10px;
border-radius: 15px;
}
.footer{
background: #fff;
}
span.blog-slider__code span{
margin-right: 15px;
}
span.blog-slider__code a{
color: #7b7992;
}
span.blog-slider__code span:before {
margin-right: 5px;
font-size:20px;
font-family: iconfont;
vertical-align: top;
}
span.blog-slider__code .user:before {
content: "\e6a9";
}
span.blog-slider__code .date:before {
content: "\e69c";
}
span.blog-slider__code .cate:before {
content: "\e6e2";
}
span.blog-slider__code .view:before {
content: "\e6a7";
}
span.blog-slider__code .edit:before {
content: "\e69a";
}
span.blog-slider__code .del:before {
content: "\e6ac";
}
.blog-slider__title .zbaudio{
margin-right: 5px;
display: inline;
vertical-align: middle;
}
.blog-slider__title .zbaudio:before {
font-family: iconfont;
font-weight: normal;
vertical-align: top;
content: "\e642" !important;
font-size: 24px !important;
}
.blog-slider__title .video:before {
font-family: iconfont;
font-weight: normal;
vertical-align: top;
content: "\e7a8" !important;
font-size: 24px !important;
}
.block.large{
padding-left: 40px;
}
.block {
margin-bottom: 20px;
padding:0;
word-break: break-all;
border-radius: 3px;
box-shadow: none;
box-sizing: border-box;
background: none;
}
.blog-slider {
width: 100%;
max-width: 800px;
position: relative;
margin: auto;
box-shadow: 0px 0px 10px rgba(34, 35, 58, 0.2);
padding: 20px 0 20px 0;
border-radius: 15px;
transition: all .3s;
margin-bottom: 15px;
}
@media screen and (max-width: 992px) {
.blog-slider {
max-width: 680px;
height: 400px;
}
}
.blog-slider__item {
display: flex;
align-items: center;
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
transition-delay: .3s;
}
.blog-slider__img {
width: 250px;
height: 150px;
flex-shrink: 0;
box-shadow: 4px 13px 30px 1px rgb(158 158 158 / 56%);
border-radius: 15px;
transform: translateX(-40px);
overflow: hidden;
background-image: url('/zb_users/theme/tpure/style/images/lazyloading.gif');
background-repeat: no-repeat;
background-size: contain;
}
.blog-slider__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: all .3s;
}
.blog-slider__img:hover img {
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider__img {
height: 270px;
}
.blog-slider {
height: 350px;
}
}
.blog-slider__content {
padding-right: 25px;
}
.blog-slider__content * {
transform: translateY(25px);
transition: all .4s;
}
.blog-slider__code {
color: #7b7992;
margin-bottom: 15px;
display: block;
font-weight: 500;
}
.blog-slider__title {
font-size: 22px;
font-weight: 700;
color: #0d0925;
margin-bottom: 20px;
}
.blog-slider__text {
color: #888;
margin-bottom: 30px;
line-height: 1.5em;
}
.blog-slider__button {
display: inline-flex;
background-image: linear-gradient(147deg, #99d19b 0%, #65ba68 74%);
padding: 5px 29px;
border-radius: 50px;
color: #fff;
box-shadow: 0px 14px 80px rgb(145 180 255);
text-decoration: none;
font-weight: 500;
justify-content: center;
text-align: center;
letter-spacing: 1px;
}
@media screen and (max-width: 576px) {
.blog-slider__button {
width: 100%;
}
.blog-slider__content {
padding: 0;
}
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%;
}
.blog-slider__pagination {
position: absolute;
z-index: 21;
right: 20px;
width: 11px !important;
text-align: center;
left: auto !important;
top: 50%;
bottom: auto !important;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
span.blog-slider__code span{
margin-right: 10px;
font-size: 14px;
}
.blog-slider__title, .blog-slider__title .zbaudio, .blog-slider__title .zbaudio:before, .blog-slider__title .video:before{
font-size: 20px !important;
background: none !important;
vertical-align:inherit;
}
.blog-slider .istop{
z-index: 9;
}
.blog-slider__text{
font-size: 14px;
}
.blog-slider__img {
transform: translateY(-50%);
width: 90%;
margin-left: 5%;
}
.blog-slider__content {
margin-top: -80px;
text-align: center;
padding: 0 30px;
}
.blog-slider__pagination {
transform: translateX(-50%);
left: 50% !important;
top: 205px;
width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
.block{
padding: 0 10px;
}
.block.large{
padding-left: 10px;
}
.blog-slider {
height: auto;
padding: 0;
margin-top: 100px;
}
.blog-slider__code{
margin-top: 20px;
}
.blog-slider__item {
flex-direction: column;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
height: 11px;
width: 30px;
}
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 8px 0;
}
.blog-slider__pagination .swiper-pagination-bullet {
width: 11px;
height: 11px;
display: block;
border-radius: 10px;
background: #062744;
opacity: 0.2;
transition: all .3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
opacity: 1;
background: #fd3838;
height: 30px;
box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
.zbaudio, .copynotice{
border: none !important;
background: #fff !important;
border-radius: 15px !important;
}
.zbaudio_play em{
background: #f2f6ff !important;
}
.night .blog-slider{
box-shadow: 0px 0px 10px rgb(187 187 187);
}
.night .block{
background: #191919;
}
.night .blog-slider__title{
color: #a8a8a8;
}
.night .post{
background: #262626;
}
.night .teles{
background: linear-gradient(to bottom, rgba(255,255,255,0), #f2f6ff 50%);
}
.night .zbaudio, .night .copynotice{
border: none !important;
background: #191919 !important;
}
</style>写在最后
1、如果感觉背景不协调，可能需要在设置里面把网页背景改成纯白色（#FFFFFF）
2、2021-10-07：代码重新优化
版权声明：本文由 LzxBlog 发布，如需转载请注明出处。
赞助云储存