Warning: Undefined array key "wordpress_logged_in_86e15fc9095b54426ca1c1eb00258960" in /www/wwwroot/vpsite.net/wp-content/plugins/cos-html-cache/cos-html-cache.php on line 103
z-blog的主题制作技巧与诀窍 – VPS Site-VPS信息站

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.getElementsB
yTagName(‘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>讲解引用所用的JS函数：
引用的函数: InsertQuote(参数1[评论者],参数2[评论内容])
this.parentNode 表示该节点的上一节点
getElementsByTagName(‘a’)[2].innerHTML 表示获取第二个<a>元素的内容,即<#article/comment/name#>
同上,getElementsByTagName(‘li’)[2].innerHTML 为<#article/comment/content#>
修改后的代码

<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 日志页文章模板这几个模板文件中。

1. 英文显示版
<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>2. 中文显示版
<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="upload/2008/12/200812241733496172.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定义就完成了。

setp1 :加入js(jQuery代码)，如下
原先功能简单的代码

<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> haphic将这一代码做了完善，此代码只支持 Z-Blog 模板.

haphic 完善后的代码

<script type="text/javascript">
$("#menu ul>li").each(function() {
if ($(this).find("a").attr("href").toLowerCase() !== str00.toLowerCase()){
if (document.URL.toLowerCase().indexOf($(this).find("a").attr("href").toLowerCase()) !== -1){
$(this).attr("id","current")
}
}else{
if ($(this).find("a").attr("href").toLowerCase() == document.URL.toLowerCase()){
$(this).attr("id","current")
}
}
});
</script>setp2 :定义CSS样式
#menu ul li#current {
background-color:#fff;
color:#0B1316;
}

2 对 “z-blog的主题制作技巧与诀窍”的想法；

发表评论

您的电子邮箱地址不会被公开。