ZBlogPHP主题模板制作教程_置顶/列表调用命令和CSS样式

在这章中小V博客主要分享博客首页置顶文章和列表 / 栏目列表制作过程，详细看下面图文教程。

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

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

{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 ;

——这是 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>

——这是 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>

——这是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;}