Back to "Home"-回到"首页"
"Contact Me"-"与我联络"
Large Font Size-大字体
Original Font Size-原始字体
Small Font Size-小字体
太阳会常常被云彩遮挡而无法看见,尽管如此 ,只要仰望天空,肯定会有太阳从云彩的空隙中放出光芒的时候到来!

2007年4月5日星期四

利用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:

Related posts