Dream Dynasty

我终于搞定了这个特棒的Hack，他不仅载入页面速度飞快，而且浏览标签更加方便。有了它，其实那个最新的“显示目录”Hack就没什么用了，要知道有的人的文章都几百篇了，要是从目录找你说要的文章实在太慢了。但从标签找就可缩小很大的范围，快捷方便。

以前就想用这个Hack，但觉得代码好多，有个脚本63K大小，怕影响载入速度，就一直没用。但昨天还是试了一下，安装起来没有想像的那么繁琐，代码也不是很多。那个63K的脚本我也找到了压缩方法，后面我会讲如何压缩。

这个Hack是从GG派那里学到了（首先感谢！），我在这做一个总结并结合我的使用心得。现在看具体步骤。
1.备份一下模板，以防后面出错。
2.加一个CSS，用于定制标签载入的动画和显示结果的样式。把下面代码放到CSS中的任意位置，这个是我改动过的，适用于我的版面，大家可以自行更改。
#indicator { position:fixed; text-align:center; margin:30px 260px; } #search-result { border:5px solid #9cc3de; font-size:85%; padding:0px 10px 40px; background:#fff; -moz-border-radius:15px; overflow: hidden; } .search-result-meta { background:#ddd; padding:2px; } .search-result-meta img { vertical-align:text-bottom; } .search-cat { border-bottom:1px solid #C0C0C0; display:block; color:#3fa4ff; padding:3px; } .search-close { color:#63a2d6; cursor:pointer; float:right; margin-top:10px; } .search-result-nav { font-weight:bold; padding:5px 0pt; text-align:center; }
3.接着加入三段脚本
<script src='http://bryant0315.googlepages.com/prototype.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ // User customisable parameters // ---------------------------- //maxresults - 设置一页标签做多显示的文章数 // navFlag - 是否打开标签翻页功能. // feedLabel - 描述你的标签RSS的文字. // catLabel - 描述你的标签的文字. // closeLabel - 描述关闭按钮的文字. var maxresults = 8; var navFlag = 1; var feedLabel = "订阅"; var catLabel = "标签："; var closeLabel = "点击关闭[X]"; //]]> </script> <script src='http://ggpi.googlecode.com/files/ajaxlabels.js' type='text/javascript'/>第二段代码的用法里面有很详细的注释，就不多说了。

4.找到下面的代码
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a>替换成：
<b:loop values='data:post.labels' var='label'> <a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>如果你希望每次点击文章下的标签能自动跳转到页首，要把代码替换成：
<b:loop values='data:post.labels' var='label'> <a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null),scroll(0,0)"' rel='tag'><data:label.name/></a>
如果你增加了标签页面元素，那么你还可以找到标签页面元素的类似下面的代码：
<b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a href='data:label.url'><data:label.name/></a> </b:if>替换成：
<b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a> </b:if>
如果你已经用了标签云，那么就要在标签云的代码里找到下面这段
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);把它替换为：
a.href = 'javascript:getCat("'+t+'")';这样你的标签云就可以使用Ajax标签了。

5.保存一下模板，增加一个新的页面元素用来显示使用本hack以后会瞬间出现的标签内容。这个页面元素一般情况下是没有任何显示的，只有当你点击标签以后才会出现。强烈建议放在你的博客正文项目上方。代码如下：
<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div> <div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"> <script type="text/javascript">document.write(closeLabel); </script></div></div>
如果你要想标签内容出现的同时隐藏正文，就把代码替换为如下代码：
<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"> <script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"> <script type="text/javascript">document.write(closeLabel);</script></div></div>
同时要把第三步的最后一个脚本替换为：
http://bryant0315.googlepages.com/ajaxlabels.js
OK，全部搞定了，现在试一试，是不是很酷，标签下的文章立刻显示，这就是Ajax的魅力。

最后要讲一下开头说的那个超大的脚本prototype.js的压缩问题。我从GG派的评论中看到有人说用JSA这个软件可以压缩脚本，于是我就在网上下了这个软件回来。软件全名叫“JSI脚本分析工具”，是个JAVA软件，所以使用时需要安装JAVA，没安装的朋友可从这里访问官网下载安装。
这个JSA软件我已经上传到我的网络硬盘里了，想要的可以从这里下载。
软件的使用很简单，打开后，选择“文件”下的“打开”，选择你要压缩的脚本，然后在“操作”里选“压缩”，软件就自动帮你压缩好了，那个63K的脚本压好后只有23K，少了一大半。
软件的详细用法还在研究中，我想试一试能不能再压小的，如果大家有成功的，也分享出来。我压好的脚本在这里，大家可自由下载。

现在再看看载入速度如何，快了不少吧，GG派也说快了4倍呢！
总结就这么多了，有什么遗漏之处，望请指出。