Z-Blog Wiki Z-Blog Wiki

Z-Blog官方文库

用户工具

站点工具


zblogasp:theme:tips

主题制作技巧与诀窍

如何刷新和显示浏览计数

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>&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> </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”代“/”),也可以用三个特殊参数:identiconsmonsteridswavatars | | 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>

zblogasp/theme/tips.txt · 最后更改: 2016/06/21 14:47 (外部编辑)