Loading...利用Ajax Cloud做Blogger目录
大家知道Ajax Cloud吗？我想熟悉blogger的人应该知道的说。那么，什么是Ajax? Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括：XHTML和CSS；使用文档对象模型(Document Object Model)作动态显示和交互；使用XML和XSLT做数据交互和操作；使用XMLHttpRequest进行异步数据接收；使用JavaScript将它们绑定在一起。看了上面一段，懂行的人自然明白，不懂行的人是不知所云，我素后者，完全不知道上面在说什么。
今天不是来讨论Ajax，而是Ajax Cloud，类似于Tag Cloud或者是Label Cloud，但是运行和更新速度要快上许多。装Ajax Cloud非常容易，操作跟Label Cloud相似，但这里我是要用Ajax Cloud制作一个Blogger的目录，效果看我的页面“catalogue”就可以了。 因为做这个hack已有一段时间，本来早就想写的，但是正逢blogspot被GWF给block，所以就搁置下来了。现在写的步骤中可能会有所疏漏，我尽量仔细吧。
首先说一下Ajax Cloud的安装，这是基础，这个Hack出自于一位印度人（偶不喜欢印度人，虽然他们的确很聪明，但是他们对中国人相当不友好，现在还为边境和西藏问题跟中国纠缠，但他们在电脑上的天赋还是要承认的）。废话不多说，开始介绍。在这之前先要说明一个问题，这Ajax Cloud的hack在IE中只认英文的标签，Firefox则是中英文都认，所以记得给你的标签贴上英文，我就是在制作完毕后发现IE的问题无奈只能给每篇文章重新加上英文的TAG。
第一步：打开模版，在<head>...</head>之间放上，一般情况下最好放在</head>的前面，便于以后寻找。<script type="text/javascript" src="http://bloggerhacked.googlepages.com/prototype.js" />
<script src='http://argentozoma.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
保险起见还是建议大家把上面的js放到自己的空间里面去，googlepage只要你有帐号就会有100mb的免费空间。
第二步：点击以下的链接，把页面中的code放到<head>...</head>中间，我是放在Label Cloud的CSS样式之前的。其中的CSS样式可以根据自己的blogger款式修改，前提是你要懂一点点CSS的语言，另外作者对其中的功能有解释，有兴趣的可以看看，自己修改，像偶这种小白就copy完事。
http://bloggerhacked.googlepages.com/ajaxlabelsscript
第三步：在模版中找到以下片段，全都都要修改，否则就是徒劳无功，还是原来blogger自身提供的标签的效果。<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
將上面<a expr:href='data:label.url' rel='tag'>，取代成底下：<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>
第四步：如果你本身就装了Label Cloud，而你又不想要Label Cloud显示的功能，将它用Ajax Cloud取代的话，那么就把: <a expr:href='data:label.url'><data:label.name/></a>
修改成:<a expr:href='data:label.url'><data:label.name/></a>
<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'><data:label.name/></a>
我是没有把我的Label Cloud修改掉，所以跳过了这一步。
第五步：新增加一个页面元素，把以下的code复制到窗口，然后存档即可。<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>
其中http://bloggerhacked.googlepages.com/indicator.gif是loading的图片，可以自己修改，我是直接用了网上找来的企鹅图，很Cute的。
另外如果注意一下页面元素的安放位置，通常页面元素自动回放到侧边栏，这样使用Ajax Cloud的时候出现的效果是搜索结果出现在侧边栏，所以为了好看起见，记得把页面元素放在“文章”页面元素的上方，当然你可以根据自己的需要选择位置。记住，这个页面元素作用是显示搜索的结果的。还有一点要记住，不要命名这个页面元素。
是不很简单？下面说明一下怎么利用Ajax Cloud实现目录效果，这个我研究了很久，就像解算术题一样，当找到答案还是小小兴奋下的。
修改的关键是上面的第二步，就是要修改里面的ajaxlabelsscript，因为我很小白，所以只能从别人的源代码中找原因，经过本人的修正，代码如下：<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5;
var navFlag = 1; //ON by default
var feedLabel = "Subscribe to";
var catLabel = "Sorted into:";
var closeLabel = "Click to close";
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var gCat;
function getCat(cat) {
var url= '/feeds/posts/summary/-/' + cat + '?max-results=30&alt=json';
var pars = '';
gCat = cat;
new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onLoading: function(){Element.show('indicator')},
onSuccess: showCat,
onFailure: showFail
});
}
function showCat(output){
Element.hide('indicator');
Element.hide('Blog1');
Element.show('search-result');
$('search-result').innerHTML="";
var main = string2JSON(output.responseText);
var xtitle, xcat, xcontent;
var meta = document.createElement('div');
meta.className="search-result-meta";
var link = document.createElement('a');
link.href="/feeds/posts/summary/-/"+gCat;
link.innerHTML = "<img src=\"http://argentozoma.googlepages.com/feed.png\" title=\"Subscribe to this category\" /> Subscribe To " + gCat;
meta.appendChild(link);
$('search-result').appendChild(meta);
for (i=0; main.feed.entry[i]; i++) {
xentry = main.feed.entry[i];
catdisplay = "<div class=\"search-cat\"><span style=\"color:silver;\"> Sorted into:<\/span>";
for (var j=0;xentry.category[j];j++) {
catdisplay = catdisplay + xentry.category[j].term;
if(j<xentry.category.length-1)
catdisplay = catdisplay + " , ";
}
xtitle=xentry.title.$t;
xcontent=xentry.summary.$t;
xlink=xentry.link[0].href;
$('search-result').innerHTML = $('search-result').innerHTML + "<h3 class=\"search-title\"><a href=" + xlink + ">" + xtitle + "<\/a><\/h3>";
$('search-result').innerHTML = $('search-result').innerHTML + xcontent + "...";
$('search-result').innerHTML = $('search-result').innerHTML + catdisplay + "<\/div>";
}
$('search-result').innerHTML = $('search-result').innerHTML + "<div class=\"search-close\" onclick=\"javascript:Element.hide('search-result')\">Click to close<\/div>";
$('search-result').style.display="block";
new Effect.Highlight('search-result',{startcolor:'#F0F8FF', duration: 2.0, endcolor:'#fafafa'});
}
function string2JSON(str){
var n;
//We have to do exception handling here because eval might not work in all cases
try {
eval("n="+str);
}
catch (e) {
n= null;
}
return n;
}
function showFail(){
alert("gan Fail");
Element.hide('indicator');
$('search-result').innerHTML="Sorry! The page cannot be loaded.";
$('search-result').style.display="block"
Element.show('search-result');
}
//]]>
</script>
把以上代码代替第二步中的code，全部代替。回到页面元素，点击“添加页面元素”，选择“列表”，输入以下：<a href='javascript:getCat("MM")'>XXX^&^</a>
其中的MM就是你文章的标签，而XXX^&^则是你想定义的目录名称，一个个目录添加，要注意的是这个MM如我上述强调一定要是英文，否则目录功能只能在firefox中实现，IE不行。这就要求你在编写blogger文章的时候注意文章的分类和定性了，也就素取决于你的分类和整理能力，这个偶就教不了了。
加上一句，这个目录功能在用代理和二级域名的时候也用不了，所以在Blogspot被封的时候我只能不写这个hack，当然用host的话不受影响。
另外还有一个问题，就是在操作第三步的时候，记得一定要先在你的blogger页面元素里面加上“标签”元素（blogger的“标签”元素可以无数次添加哦），否则是找不到那个语言片断的。
而针对想保留Label Cloud的用户，又不希望自己的页面出现其他的标签云或者标签分类，方法是勾选“扩展窗口小部件模板”，找到你希望不显示的标签云或者标签分类的widget，找到这个widget的id，例如：<b:widget id='Label1' locked='false' title='标签' type='Label'>
在以下code：<b:widget id='Label1' locked='false' title='标签' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
之后加上：<style type='text/css'>#Label1{display:none}</style>
Label1这个就是widget的id。
完毕~~~，比较复杂，有心想try的人可以玩玩。刚刚写完hack，没有想到blogspot又上不去了，什么世道
0 comments:
发表评论