Z-Blog PHP主题模板制作八:置顶/列表 调用命令和CSS样式

时间:1年前 (2017-04-13) › 阅读:1014

孤狼这此制作的主题 zbgl 基本上是完成了,并且孤狼备忘录已经用上了,但是制作 zbgl 模板过程还没来得及分享出来。在这章中孤狼主要分享博客首页置顶文章和列表 / 栏目列表制作过程,多说无用,详细请往下看。


Z-Blog PHP主题模板制作八:置顶/列表 调用命令和CSS样式

——打开 index.php 首页,在 <div class="center">标签内加入以下 Z-Blog PHP 置顶/列表调用命令。

{foreach $articles as $article}
{if $article.IsTop}
{template:post-istop}
{else}
{template:post-multi}
{/if}
{/foreach}
<div class="pagebar">{template:pagebar}</div>

——然后 新建两个.php文件 ,1、post-istop.php ; 2、post-multi.php ;

——这就是index.php 里面调用命令 {template:post-istop}调用 post-istop.php 文件 ,{template:post-multi}调用 post-multi.php 文件,{template:pagebar}是调用分页代码。


Z-Blog PHP主题模板制作八:置顶/列表 调用命令和CSS样式

——这是 post-istop.php 置顶文章,输入以下代码。

{* Template Name:列表页单条置顶文章 *}
<div class="istop">
<div class="istop-img">
</div>
<h2 class="istop-title">
<a href="{$article.Url}" title="{$article.Title}">{$article.Title}</a>
</h2>
</div>


Z-Blog PHP主题模板制作八:置顶/列表 调用命令和CSS样式

——这是 post-multi.php 列表文章,输入以下代码。

{* Template Name:列表页普通文章 *}
{php}
$temp=mt_rand(1,8);
$pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/";
$content = $article->Content;
preg_match_all($pattern,$content,$matchContent);
if(isset($matchContent[1][0])) 
$temp=$matchContent[1][0];
else
$temp=$zbp->host."zb_users/theme/$theme/style/images/random/$temp.jpg";
{/php}
<div class="list">
<div class="list-img">
<a href="{$article.Url}" title="{$article.Title}"><img src="{$temp}"/></a>
<div class="list-l">
<div class="list-meta">
时间:{$article.Time()} / 阅读:{$article.ViewNums} / 评论:{$article.CommNums}
</div>
<h3 class="list-title">
<a href="{$article.Url}" title="{$article.Title}">{$article.Title}</a></h3>
</div>
</div>
<div class="list-content">
<a href="{$article.Url}">{SubStrUTF8(TransferHTML($article.Intro,"[nohtml]"),150)}</a>
</div>
</div>


Z-Blog PHP主题模板制作八:置顶/列表 调用命令和CSS样式

——这是CSS样式代码,

.istop{height:30px;padding:10px;background:#fff;margin-bottom:20px;position:relative;box-shadow:0px 0px 5px #ddd;border-radius:5px;}
.istop-img{background-image:url(images/istop-img.png);background-repeat:no-repeat;z-index:99;height:50px;width:50px;position:absolute;display:inline-block;left:0px;top:0px;border-radius:5px;}
.istop-title a{color:#444;line-height:30px;padding-left:40px;display:block;word-break:break-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:30px;}
.istop-title a:hover{text-shadow:0 0 1px #000;}
.list{background-color:#FFF;margin-bottom:20px;box-shadow:0px 0px 5px #ddd;border-radius:5px;}
.list img{width:100%;border-top-left-radius:5px;border-top-right-radius:5px;}
.list-img{height:250px;position:relative;overflow:hidden;}
.list-l{background:rgba(0,0,0,.45);padding:8px 20px 8px 20px;position:absolute;left:0px;right:0px;bottom:0px;}
.list-meta{font-size:14px;color:#fff;}
.list-title a{font-size:22px;line-height:30px;color:#fff;word-break:break-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-shadow:0 0 3px #444;}
.list-title a:hover,.list-title a:active{text-shadow:0 0 3px #000;color:#fff;}
.list-content{height:auto;padding:20px;}
.list-content a{font-size:16px;line-height:25px;color:#444;margin:0px;padding:0px;display:block;}
.list-content a:hover{color:#444;text-shadow:0 0 0px #444;}

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。