• Z-Blog PHP主题模板制作十:文章内容页面/独立内容页面/CSS样式

    1年前 (2017/04/22) 孤狼 技巧 989 浏览 2 条评论

    其实主题早就做完了,而且博客已经就用,这一段时间都没有心思来弄,今天抽点时间把第十章分享出来。第十章是文章内容页面,Z-Blog PHP主题模板中文章内容页面post-single.php文件,独立内容页面是post-page.php文件。在之前我们还要新建一个single.php文件,在single.php文件中加入调用post-single.php文件和post-page.php文件代码,以及在style.css文件中加入控制CSS样式代码,具体操作如下。


    新建三个文件:single.php ; post-page.php ;post-single.php ;


    Z-Blog PHP主题模板制作十:文章内容页面/独立内容页面/CSS样式

    ——这是single.php文件 ,加入以下代码。

    {* Template Name:文章页单页 *}
    {template:header}
    
    <body>
    <div class="wrapper">
    <div class="header">
      <div class="logo"><h1><a href="{$host}">{$name}</a></h1><samp>{$subname}</samp></div>
      <div class="search"><form name="search" method="post" action="{$host}zb_system/cmd.php?act=search"><span><input type="text" name="q" size="11"  class="search-text" placeholder="输入搜索内容"/></span><input type="submit" class="search-submit" value=""/></form></div>
      <div class="nav"><ul>{module:navbar}</ul></div>
      <div class="social-links"><a href="http://wpa.qq.com/msgrd?v=3&uin=642062966&site=qq&menu=yes" class="qq" target="_blank"></a></div>
    </div><!--header .End-->
      <div class="main">
      <div class="center">
    {if $article.Type==ZC_POST_TYPE_ARTICLE}
    {template:post-single}
    {else}
    {template:post-page}
    {/if}
    </div><!--center .End-->
      </div><!--main .End-->
      <div class="sidebar">{template:sidebar2}</div><!--sidebar .End-->
    </div><!--wrapper .End-->
    </body>
    </html>

    ——这个代码就与index.php差不多,就修改两处,如上图。


    Z-Blog PHP主题模板制作十:文章内容页面/独立内容页面/CSS样式

    ——这是独立内容页面是post-page.php文件,加入以下代码。

    {* Template Name:页面页页面内容 *}
    <div class="center-c">
    <h2>{$article.Title}</h2>
    <div class="center-m">作者:{$article.Author.StaticName} / 时间:{$article.Time()} /  分类:{$article.Category.Name} / 阅读:{$article.ViewNums} / 评论:{$article.CommNums}{if $user.ID>0} / <a href="{$host}zb_system/admin/edit.php?act=ArticleEdt&id={$article.ID}"> 编辑</a>{/if}</div>
    <div class="center-b"></div>
    <div class="content">{$article.Content}</div>
    </div>
    <div class="comments">{if !$article.IsLock}{template:comments}{/if}</div>


    Z-Blog PHP主题模板制作十:文章内容页面/独立内容页面/CSS样式

    ——这是文章内容页面post-single.php文件,加入以下代码。

    {* Template Name:文章页文章内容 *}
    <div class="center-c">
    <h2>{$article.Title}</h2>
    <div class="center-m">
    作者:{$article.Author.StaticName} / 时间:{TimeAgo($article.Time())} /  分类:{$article.Category.Name} / 阅读:{$article.ViewNums} / 评论:{$article.CommNums}{if $user.ID>0} / <a href="{$host}zb_system/admin/edit.php?act=ArticleEdt&id={$article.ID}"> 编辑</a>{/if}
    </div>
    <div class="center-b"></div>
    <div class="content">{$article.Content}</div>
    <div class="copyRight"><img src="http://qr.liantu.com/api.php?&bg=ffffff&w=100&m=6&fg=000000&text={$article.Url}" alt="二维码加载中..." title="请用手机扫一扫此二维码分享给你的朋友!"><p>版权属于:<a href="{$host}">{$name}</a> &nbsp;&nbsp;&nbsp;&nbsp;本文作者:{$article.Author.StaticName}</p><p>	原文地址: <a href="{$article.Url}">{$article.Url}</a></p><p><b>版权声明:</b>转载时必须以链接形式注明原始出处及本声明。</p>
    </div>
    {if $article.Tags}
    <div class="tags">
    {foreach $article.Tags as $tag}<a href="{$tag.Url}">{$tag.Name}</a>
    {/foreach}
    </div>
    {/if}
    <div class="navigation">
    {if $article.Prev}
    <a href="{$article.Prev.Url}" title="{$article.Prev.Title}">? 上一篇</a>
    {/if}
    {if !$article.Next}
    <a href="{$article.Next.Url}" title="{$article.Next.Title}"> 下一篇 ?</a>
    {/if}
    </div>
    </div>
    <div class="comments">{if !$article.IsLock}{template:comments}{/if}</div>


    最后是文章内容页面post-single.php文件,独立内容页面是post-page.php文件使用的CSS样式控制代码。

    .pagebar,.center-c,.comments {background:#FFF;padding:20px;margin-bottom:20px;box-shadow:0px 0px 5px #ddd;border-radius:5px;}
    .now-page {font-size:20px;color:#fff;background:#26A6F2;border:1px solid #26A6F2;line-height:25px;padding:5px 10px;display:inline-block;border-radius:5px;}
    .center-c{position:relative;}
    .center-c h2{font-size:25px;color:#444;margin-bottom:10px;}
    .center-m{font-size:12px;color:#444;}
    .center-b{border-bottom:solid 1px #ddd;position:absolute;left:0px;right:0px;height:3px;}
    .content{font-size:18px;line-height:32px;padding-top:5px;}
    .content ul,.content ol{margin-left:3em;list-style-position:outside;}
    .content li{list-style-type:inherit;}
    .content li p{padding:5px 0;line-height:32px;text-indent:0;color:#333;margin:0px;word-wrap:break-word;}
    .content p{padding:5px 0;line-height:32px;text-indent:2em;color:#333;margin:0px;word-wrap:break-word;}
    .content img{max-width:100%;height:auto;box-shadow:3px 3px 5px #888;margin:10px auto;display:block;border-radius:5px;}
    .content a{color:#222;text-decoration:underline;}
    .content h3{border-bottom:2px solid #298FCC;border-left:4px solid #298FCC;font-size:20px;color:#298FCC;padding:5px 0 2px 5px;background:#CEE5FF;}
    .content h4{border:1px solid #D9D9D9;color:#000;font:15px'Century Gothic','Microsoft YaHei',Verdana;margin:5px 0;padding:8px;overflow:auto;word-wrap:break-word;}
    .copyRight,.tags,.navigation {border:solid 1px #ddd;border-radius:5px;margin-top:20px;padding:2px;}
    .copyRight img{height:100px;width:100px;float:left;}
    .copyRight p{margin:0px;padding:0px;line-height:33px;height:33px;overflow:hidden;}
    .tags a{margin:3px 10px 3px 0px;padding:5px;color:#FFF;line-height:20px;display:inline-block;border-radius:5px;}
    .tags a:nth-child(6n){background:#298FCC;}
    .tags a:nth-child(6n+1){background:#C3371C;}
    .tags a:nth-child(6n+2){background:#5DBB73;}
    .tags a:nth-child(6n+3){background:#777777;}
    .tags a:nth-child(6n+4){background:#FF9900;}
    .tags a:nth-child(6n+5){background:#F6C911;}
    .navigation{text-align:center;display:inline-block;width:100%;padding:10px 0px 10px 0px;}
    .comments{position:relative;}
    .clear{padding-top:35px;}
    .comments h3{height:25px;border-bottom:solid 1px #ddd;position:absolute;left:0px;right:0px;padding-left:20px;font-size:18px;color:#444;display:block;line-height:25px;}
    .commentpost{padding-top:10px;}
    .comments ul{border:1px solid #ddd;padding:5px;margin-top:10px;border-radius:5px;}.comments ul li{overflow:hidden;width:100%;}
    #cancel-reply{float:right;margin-right:20px;}
    .avatar img{float:left;width:50px;height:auto;margin-right:10px;border-radius:5px;}
    .commentname a{color:#444;line-height:30px;padding:5px;}
    .commentname span{color:#444;}
    .comment_text{color:#444;line-height:25px;display:block;word-wrap:break-word;}
    .input-t{width:100%;display:inline-block;}
    .input-t input[type="text"]{font-size:14px;color:#444;line-height:25px;float:left;width:31%;height:25px;padding:3px;margin:10px 3px 0px 3px;border:1px solid #ddd;border-radius:5px;}
    #txaArticle{font-size:16px;width:99%;height:150px;border:1px solid #ddd;border-radius:5px;}
    input.button{color:#FFFFFF;font-size:14px;width:100%;height:32px;background:#26A6F2;border:1px solid #ddd;cursor:pointer;border-radius:5px;}
    .postbottom{font-size:14px;color:#444;}
    .commentpagebar {padding-top:10px;}
    .pagebar,.commentpagebar {text-align:center;}
    .pagebar a,.commentpagebar a {color:#444;font-size:20px;line-height:25px;padding:5px 10px;display:inline-block;border:1px solid #ddd;border-radius:5px;}
    .pagebar a:hover,.commentpagebar a:hover {background:#f1f1f1;color:#444;}

    ——完成,你试试,如有问题请留言。

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

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

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

    « 上一篇:微信向商家付款无需密码安全吗? » 下一篇:Z-Blog PHP主题模板制作十一:评论

    推荐阅读

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

    • dipper  2017-05-18 11:44:45 回复该评论
      错误信息
      (0)UNKNOWN : Call to undefined function TimeAgo() (set_exception_handler) (1.5.1.1740 (Zero)) (WINNT; nginx1.11.5; PHP 7.0.12; mysqli; curl)
      • 孤狼  2017-05-18 18:36:13 回复该评论
        什么情况,你是直接按制作过程,做的。还是下载的安装包。

    发表评论:

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