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

    1年前 (2017/04/13) 孤狼 技巧 922 浏览 0 条评论

    孤狼这此制作的主题 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;}

    版权属于:孤狼备忘录     本文作者:孤狼

    原文地址: https://www.glbwl.com/z-blog-php-theme-top-list.html

    版权声明:转载时必须以链接形式注明原始出处及本声明。

    « 上一篇:QQ新版本:TIM 轻聊QQ办公QQ » 下一篇:Z-Blog PHP主题模板制作九:侧栏设置/系统模块/CSS样式

    推荐阅读

  • 折腾Z-BlogPHP主题模板zbgl/GitHub下载(添加侧栏功能修改手机显示样式)
  • Z-Blog PHP主题模板制作十六:导出主题为.zba文件
  • Z-Blog PHP主题模板制作十五:响应式调整/手机平板自适应模式
  • Z-Blog PHP主题模板制作十四:错误页面404.php
  • Z-Blog PHP主题模板制作十三:自定义搜索页面search.php
  • 没有评论,留下你的印记,证明你来过。


    发表评论:

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