主题制作技巧与诀窍
如何刷新和显示浏览计数
1.更新浏览计数
在打开单页日志后产生，每刷新一次，计数加1。
注意：只有在b_article-single.html有以下及第3步中介绍的代码，浏览计数才有效。
在b_article-single.html模板中，你认为合适的位置加入以下代码，标签内显示的就是当前文章的浏览次数。
<code html>
“>
<script type=“text/javascript”>strBatchCount+=“spn<#article/id#>=<#article/id#>,”</script>
</code>
=== Z-Blog 2.0方式：===
<code html>
<#article/addviewcount#>
</code>
==== 2.显示浏览计数 ====
只适用在列表页，如首页和分类页。动态加载，不随当前页刷新累加。
需要修改b_article-multi.html模板，在你认为合适的位置加入以下代码，span标签就是每个文章的浏览次数。
<code html>
”>
<script type=“text/javascript”>strBatchView+=“spn<#article/id#>=<#article/id#>,”</script>
</code>
你也可以用<#article/viewnums#>标签，但它只能在索引重建后更新数值。
=== Z-Blog 2.0方式：===
<code html>
<#article/loadviewcount#>
</code>
==== 3.必需辅助代码 ====
Z-Blog 2.0方式无需添加该代码
在 TEMPLATE\ default.html,single.html,catalog.html 等页面的头部和尾部（指<body ></ body>内）都要有如下代码计数器才能正常工作，默认模板已经包含这些代码。
<code html|h TEMPLATE\default.html,single.html,catalog.html头部代码 |h>
<script type=“text/javascript”>
var strBatchView=“”;
var strBatchInculde=“”;
var strBatchCount=“”;
</script>
</code>
<code javascript|h TEMPLATE\default.html,single.html,catalog.html尾部代码 |h>
<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>
</code>
<code javascript|h 注：TEMPLATE\default.html,single.html,catalog.html尾部有如下代码也可（1.7中所用）|h>
<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>
</code>
===== 模板中引用INCLUDE目录内文件 =====
在Z-Blog中引用INCLUDE目录内文件共有两种方法
==== 1.直接在模板内嵌入标签 ====
由系统自动替换为文件内容。注意，这种方法只适合动态生成的页的模板如default.html,catalog.html，而用在静态页模板如singel.html则只能在文件重建后更新。
=== A.根目录下的INCLUDE内文件引用 ===
<code html><#CACHE_INCLUDE_文件名（不要后缀且全大写）#></code>
这样的标签，例如：“<#CACHE_INCLUDE_CATALOG#>”，系统会自动读取INCLUDE目录内的catalog.asp并替换标签。
=== B.主题目录下的INCLUDE内文件引用 ===
1.8新特性：主题也可以有自己的INCLUDE目录，如THEMES\default\INCLUDE，使用
<code html><#TEMPLATE_INCLUDE_文件名（不要后缀且全大写）#></code>
系统会自动引用当前主题下的INCLUDE内相应文件内容。
==== 2.动态插入文件内容 ====
采用动态插入文件内容，这种方法适合所有的模板如single.html,catalog.html。
=== A.Z-Blog 2.0方式 ===
例如以下代码就把INCLUDE目录内的calendar.asp的内容动态的插入当前页面。
<code html|h 在你想要插入的元素的HTML标签内写入>
<script type=“text/javascript”>LoadFunction('calendar');</script>
</code> 将<#ZC_BLOG_HOST#>替换成你的博客地址，即可在外部引用你博客上的列表内容了。 === B.Z-Blog 1.8方式 === <code javascript|h Step 1.在模板顶部定义如下JS参数 |h> <script type=“text/javascript”> var strBatchView=“”; var strBatchInculde=“”; var strBatchCount=“”; </script> </code> <code html|h Step 2.在你想要插入的元素的HTML标签内写入> <ul id=“ulComments”> <script type=“text/javascript”>strBatchInculde+=“ulComments=comments,”</script> </ul> </code> 这段代码的用意是:把comments.asp(最新评论)的内容放入ID为“ulComments”的HTML元素内。你只要改“ulComments”和“comments”两个字符串为相应的HTML元素的ID和INCLUDE目录下的文件名（不要后缀）即可调用其中内容。 <code javascript|h Step 3.在模板的最末端写入（1.8最新版及之后版本无需手工添加）|h> <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> </code> ===== 用CSS定义分类RSS订阅图标 ===== 分类小RSS图标是被包围的，可以在CSS定义 span.feed-cion{display:none;}将它隐藏 如何更换这个RSS图标呢？参考默认样式中的： <code css|h 用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; } </code> ===== 分页条中的上下分页调用 ===== 上一页: <#template:pagebar_previous#> 下一页: <#template:pagebar_next#> 其文字分别对应语言包中(LANGUAGE\SimpChinese.asp) <code html> Const ZC_MSG156=“之后的文章 »” Const ZC_MSG155=“« 更早的文章” </code> 使用例子：把默认主题的列表模板即 THEMES\default\TEMPLATE\default.html catalog.html 中 <code html> <#ZC_MSG042#>:<#template:pagebar#>替换成 <#template:pagebar_previous#> <#template:pagebar_next#> </code> 其中“更早的文章”和“之后的文章”分别由span标签的pagebar-previous和pagebar-next类定义，你可以用CSS方式隐藏文字，或用图片代替。 ===== 评论留言的引用按钮写法详解 ===== :!:Z-Blog 2.0已弃用所有的评论UBB代码，该条目不再适用于2.0 <code html|h 默认主题的模板b_article_comment.html中> <ul class=“msg”> <li class=“msgname”><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> <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#> <a href=“#comment” onclick=“RevertComment('<#article/comment/id#>')”><#ZC_MSG265#></a></li> </ul> </code> 要把其格式改成如下结构，引用评论的按钮要如何写呢？： <code html>
<cite>评论者</cite> <blockquote>评论内容</blockquote> <p>网站</p> <p>时间</p>
</code> * 讲解引用所用的JS函数： - 引用的函数: InsertQuote(参数1[评论者],参数2[评论内容]) - this.parentNode 表示该节点的上一节点 - getElementsByTagName('a')[2].innerHTML 表示获取第二个<a>元素的内容,即<#article/comment/name#> - 同上,getElementsByTagName('li')[2].innerHTML 为<#article/comment/content#> <code html|h 修改后的代码 |h>
<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>
</code>
===== 根据不同留言数显示不同文字 =====
如还没人留言就显示“Add comments”，只有一条留言显示“1 comment” ，多条留言显示“n comments”；然后在CSS中定义.post-comment就可以了（当然你也可以改成其它）。可用于b_article-multi.html 摘要文章模板，b_article-istop.html 置顶文章模板，b_article-single.html 日志页文章模板这几个模板文件中。
* 1. 英文显示版
<code html>
<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>
</code>
* 2. 中文显示版
<code html>
<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>
</code>
===== 给评论加入Gravatar头像功能 =====
Gravatar提供的服务概念上十分简单，就是把个人email地址与头像捆绑(登录 www.gravatar.com申请帐户，上传照片即可完成)，然后当你在支持Gravatar的网站留言并使用你的个人email时，头像就会出现在你的留言旁。以下代码加到b_article_comment.html中，即可让你的Z-Blog支持Gravatar头像服务。
<code html>
<img src=“http://www.gravatar.com/avatar/<#article/comment/emailmd5#>” />
</code>
^ 参数 ^ 描述【参考源】 ^
| <#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 为限制级) |
对照参数表，一个较完整的引用便为：
<code html>
<img alt=“Gravatar Icon” src=“http://www.gravatar.com/avatar/<#article/comment/emailmd5#>?d=identicon&s=80&r=g”/>
</code>
==== Z-Blog 2.0方式====
直接安装Gravatar插件。
引用代码为：
<code html>
<img alt=“Gravatar Icon” class=“avatar” src=“<#article/comment/avatar#>” />
</code>
===== 让导航突出显示当前页链接条目 =====
我们的大致思路是这样的，首先用js给导航部分中当前链接项加个区分的ID,如<li id=“current”>首页</li>，然后再用CSS定义就完成了。
* setp1 :加入js(jQuery代码)，如下
<code javascript|h 原先功能简单的代码|h>
<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>
</code>
* setp2 :定义CSS样式
<code css>
#menu ul li#current {
background-color:#fff;
color:#0B1316;
}
</code>
haphic将这一代码做了完善，此代码只支持 Z-Blog 模板.
<code javascript|h 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>
</code>
将上面的 JS 放到导航栏后面即可. 样式表中相应样式改为:
<code css>
#menu ul li a.current {
background-color:#fff;
color:#0B1316;
}
</code>
