目录

主题制作技巧与诀窍

如何刷新和显示浏览计数

1.更新浏览计数

在打开单页日志后产生，每刷新一次，计数加1。

注意：只有在b_article-single.html有以下及第3步中介绍的代码，浏览计数才有效。

在b_article-single.html模板中，你认为合适的位置加入以下代码，<span>标签内显示的就是当前文章的浏览次数。 

<span id="spn<#article/id#>"></span>
<script  type="text/javascript">strBatchCount+="spn<#article/id#>=<#article/id#>,"</script>

2.显示浏览计数

只适用在列表页，如首页和分类页。动态加载，不随当前页刷新累加。

需要修改b_article-multi.html模板，在你认为合适的位置加入以下代码，span标签就是每个文章的浏览次数。 

<span id="spn<#article/id#>"></span>
<script  type="text/javascript">strBatchView+="spn<#article/id#>=<#article/id#>,"</script>

:!: 你也可以用<#article/viewnums#>标签，但它只能在索引重建后更新数值。

3.必需辅助代码

在 TEMPLATE\ default.html,single.html,catalog.html 等页面的头部和尾部（指<body ></ body>内）都要有如下代码计数器才能正常工作，默认模板已经包含这些代码。

TEMPLATE\default.html,single.html,catalog.html头部代码

<script  type="text/javascript">
        var strBatchView="";
        var strBatchInculde="";
        var strBatchCount="";
</script>

TEMPLATE\default.html,single.html,catalog.html尾部代码

<script   type="text/javascript">
$(document).ready(function(){
try{
    var elScript = document.createElement("script");
    elScript.setAttribute("language", "JavaScript");
    elScript.setAttribute("src", "<#ZC_BLOG_HOST#>function/c_html_js.asp?act=batch"+unescape("%26")+"view=" + escape(strBatchView)+unescape("%26")+"inculde=" + escape(strBatchInculde)+unescape("%26")+"count=" + escape(strBatchCount));
    document.getElementsByTagName("body")[0].appendChild(elScript);
    }
catch(e){};
});
</script>

注：TEMPLATE\default.html,single.html,catalog.html尾部有如下代码也可（1.7中所用）

<script   type="text/javascript">
try{
        var elScript = document.createElement("script");
        elScript.setAttribute("language", "JavaScript");
        elScript.setAttribute("src", "<#ZC_BLOG_HOST#>function/c_html_js.asp?act=batch"+"&view=" + escape(strBatchView)+"&inculde=" + escape(strBatchInculde)+"&count=" + escape(strBatchCount));
        document.getElementsByTagName("body")[0].appendChild(elScript);
        }
catch(e){};
</script>

模板中引用INCLUDE目录内文件

在Z-Blog中引用INCLUDE目录内文件共有两种方法

1.直接在模板内嵌入标签

由系统自动替换为文件内容。注意，这种方法只适合动态生成的页的模板如default.html,catalog.html，而用在静态页模板如singel.html则只能在文件重建后更新。

A.根目录下的INCLUDE内文件引用

<#CACHE_INCLUDE_文件名（不要后缀且全大写）#>

这样的标签，例如：“<#CACHE_INCLUDE_CATALOG#>”，系统会自动读取INCLUDE目录内的catalog.asp并替换标签。

B.主题目录下的INCLUDE内文件引用

1.8新特性：主题也可以有自己的INCLUDE目录，如THEMES\default\INCLUDE，使用 

<#TEMPLATE_INCLUDE_文件名（不要后缀且全大写）#>

系统会自动引用当前主题下的INCLUDE内相应文件内容。

2.动态插入文件内容

采用c_html_js.asp动态插入文件内容，这种方法适合所有的模板如single.html,catalog.html。动态插入也有两种方式：

A.一个一个单独插入到模板里来，效率较低。

例如以下代码就把INCLUDE目录内的calendar.asp的内容动态的插入当前页面。

在你想要插入的元素的HTML标签内写入

<script src="<#ZC_BLOG_HOST#>function/c_html_js.asp?include=calendar" type="text/javascript"></script>

将<#ZC_BLOG_HOST#>替换成你的博客地址，即可在外部引用你博客上的列表内容了。

B.使用c_html_js.asp的act=batch指令批量的读入文件。

推荐在静态日志页面模板（singel.html）使用该读入方式读取include文件（如日历calendar.asp，最近文章previous.asp等）。

:!:注：该方法也同样可用于读取主题目录下的include文件

Step 1.在模板顶部定义如下JS参数

<script  type="text/javascript">
        var strBatchView="";
        var strBatchInculde="";
        var strBatchCount="";
</script>

Step 2.在你想要插入的元素的HTML标签内写入

<ul id="ulComments">
<script type="text/javascript">strBatchInculde+="ulComments=comments,"</script>
</ul>

这段代码的用意是:把comments.asp(最新评论)的内容放入ID为”ulComments”的HTML元素内。你只要改”ulComments”和”comments”两个字符串为相应的HTML元素的ID和INCLUDE目录下的文件名（不要后缀）即可调用其中内容。

Step 3.在模板的最末端写入

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
try{
    var elScript = document.createElement("script");
    elScript.setAttribute("language", "JavaScript");
    elScript.setAttribute("src", "<#ZC_BLOG_HOST#>function/c_html_js.asp?act=batch"+unescape("%26")+"view=" + escape(strBatchView)+unescape("%26")+"inculde=" + escape(strBatchInculde)+unescape("%26")+"count=" + escape(strBatchCount));
    document.getElementsByTagName("body")[0].appendChild(elScript);
    }
catch(e){};
});
</script>

用CSS定义分类RSS订阅图标

分类小RSS图标是被<span class=“feed-icon”>包围的，可以在CSS定义 span.feed-cion{display:none;}将它隐藏 如何更换这个RSS图标呢？参考默认样式中的：

用CSS定义分类RSS订阅图标

li span.feed-icon a{
        background:url("default/feed.png") no-repeat 0 3px; /**自定义RSS图标**/
        margin:0 0 0 0;
        padding:0 0 0 0;
        font-size:14px;
        height:12px;            /**RSS图标 高**/
        width:12px;             /**RSS图标 宽**/
}
li span.feed-icon img{
        height:12px;
        width:9px;
        visibility:hidden;      /**隐藏默认RSS图标**/
        margin:0;
        padding:0;
}

分页条中的上下分页调用

上一页: <#template:pagebar_previous#> 下一页: <#template:pagebar_next#>

其文字分别对应语言包中(LANGUAGE\SimpChinese.asp) 

Const ZC_MSG156="之后的文章 »"
Const ZC_MSG155="« 更早的文章"

使用例子：把默认主题的列表模板即 THEMES\default\TEMPLATE\default.html catalog.html 中 

<#ZC_MSG042#>:<#template:pagebar#>替换成
<#template:pagebar_previous#> <#template:pagebar_next#>

其中“更早的文章”和“之后的文章”分别由span标签的pagebar-previous和pagebar-next类定义，你可以用CSS方式隐藏文字，或用图片代替。

评论留言的引用按钮写法详解

默认主题的模板b_article_comment.html中

<ul class="msg">
    <li class="msgname"><span class="comment-quote-icon"><a onclick="InsertQuote(this.parentNode.parentNode.parentNode.getElementsByTagName('a')[2].innerHTML,this.parentNode.parentNode.parentNode.getElementsByTagName('li')[2].innerHTML);return false;" href=""><img src="<#ZC_BLOG_HOST#>image/common/quote.gif" height="9" width="9" alt="quote" title="quote" /></a></span>&nbsp;<a name="cmt<#article/comment/id#>"><#article/comment/count#></a>.<a><#article/comment/name#></a></li>
    <li class="msgurl"><a href="<#article/comment/urlencoder#>" rel="nofollow" target="_blank"><#article/comment/url#></a></li>
    <li class="msgarticle"><#article/comment/content#></li>
    <li class="msgtime"><#article/comment/posttime#>&nbsp;<a href="#comment" onclick="RevertComment('<#article/comment/id#>')"><#ZC_MSG265#></a></li>
</ul>

要把其格式改成如下结构，引用评论的按钮要如何写呢？： 

<div class="msg">
<cite>评论者</cite>
<blockquote>评论内容</blockquote>
<p>网站</p>
<p>时间</p>
</div>

修改后的代码

<div class="msg">
<a onclick="InsertQuote(this.parentNode.getElementsByTagName('CITE')[0].innerHTML,this.parentNode.getElementsByTagName('BLOCKQUOTE')[0].innerHTML);return false;" href="#comment">引用</a>
<cite>评论者</cite>
<blockquote>评论内容</blockquote>
<p>网站</p>
<p>时间</p>
</div>

根据不同留言数显示不同文字

如还没人留言就显示“Add comments”，只有一条留言显示“1 comment” ，多条留言显示“n comments”；然后在CSS中定义.post-comment就可以了（当然你也可以改成其它）。可用于b_article-multi.html 摘要文章模板，b_article-istop.html 置顶文章模板，b_article-single.html 日志页文章模板这几个模板文件中。 

<span class="post-comment">
<a id="p_comments<#article/id#>" href="<#article/url#>#comments"><#article/commnums#> comments</a>
<script type="text/javascript">if(<#article/commnums#>==0){document.getElementById("p_comments<#article/id#>").innerHTML="Add comments"};if(<#article/commnums#>==1){document.getElementById("p_comments<#article/id#>").innerHTML="1 comment"}</script>
</span>
<span class="post-comment">
<a id="p_comments<#article/id#>" href="<#article/url#>#comments"><#article/commnums#> 条评论了</a>
<script type="text/javascript">if(<#article/commnums#>==0){document.getElementById("p_comments<#article/id#>").innerHTML="发表评论"}</script>
</span>

给评论加入Gravatar头像功能

Gravatar提供的服务概念上十分简单，就是把个人email地址与头像捆绑(登录 www.gravatar.com申请帐户，上传照片即可完成)，然后当你在支持Gravatar的网站留言并使用你的个人email时，头像就会出现在你的留言旁。以下代码加到b_article_comment.html中，即可让你的Z-Blog支持Gravatar头像服务。 

<img src="http://www.gravatar.com/avatar/<#article/comment/emailmd5#>" />
参数 描述【参考源】
<#article/comment/emailmd5#> 评论人的邮箱MD5编码
d 默认图片，如d=http%3A%2F%2Fexample.com%2Fimages%2Fexample.jpg(其中“%3A”代“:”，“%2F”代“/”)，也可以用三个特殊参数：identicons、monsterids、wavatars
s 图片大小，单位是px，默认是80，可以取1~512之间的整数值
r 限制等级，默认为g，(G 普通级、PG 辅导级、R 和 X 为限制级)

对照参数表，一个较完整的引用便为： 

<img alt="Gravatar Icon" src="http://www.gravatar.com/avatar/<#article/comment/emailmd5#>?d=identicon&s=80&r=g"/>

让导航突出显示当前页链接条目

我们的大致思路是这样的，首先用js给导航部分中当前链接项加个区分的ID,如<li id=“current”>首页</li>，然后再用CSS定义就完成了。

原先功能简单的代码

<script type="text/javascript">
$(document).ready(function(){
$("#menu ul>li").each(function() {  //我们假设导航部分的ID为menu，结构是<div id="menu"><ul><li>...
    if ($(this).find("a").attr("href")==document.URL){
    $(this).attr("id","current")  //给当前页的<li>加上id="current"，如<li id="current">首页</li>
    }
});
});
</script>
#menu ul li#current {
 background-color:#fff;
 color:#0B1316;
}

;-) haphic将这一代码做了完善，此代码只支持 Z-Blog 模板.

haphic 完善后的代码, 不区分大小写, 忽略地址栏中的锚标和参数.

<script type="text/javascript">
$("#pageNav>ul>li>a").each(function() {
    if ($(this).attr("href").toLowerCase().replace(/\/|[&#].*/g,"") == document.URL.toLowerCase().replace(/\/|[&#].*/g,"")){
        $(this).attr("class","current"); //给当前页的<a>加上class="current"，如<a class="current">首页</a>
    }
});
</script>

将上面的 JS 放到导航栏后面即可. 样式表中相应样式改为: 

#menu ul li a.current {
 background-color:#fff;
 color:#0B1316;
}