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

时间:2年前 (2017-04-22) › 阅读:1302

其实主题早就做完了,而且博客已经就用,这一段时间都没有心思来弄,今天抽点时间把第十章分享出来。第十章是文章内容页面,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;}

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

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 回复该评论
      什么情况,你是直接按制作过程,做的。还是下载的安装包。

发表评论:

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