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

频道:技巧 日期: 浏览:1511

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



——打开 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}是调用分页代码。



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

有问题需要 远程 的,可以联系孤狼,远程 20元 一次。(注:不精调,有时间才能远程)

孤狼QQ:642062966

孤狼备忘录-收费群(2元):633458183

孤狼备忘录-VIP群:906740730 验证信息请输入(铂金、钻石用户名)