2008年8月3日星期日

杀手级应用,把横向和侧边式ajax搜索结合起来放进你的博客(08-8-3update)

2008年8月3日更新,因为google jsapi的作用,去掉了原来臃肿的23kCSS脚本。

Google 搜索API升级了控制系统。现在可以任意把搜索结果和搜索本身分开放在其他地方了。
只是单纯把搜索框和搜索结果分开没有什么意思,所以干脆更进一步把搜索结果也分成两部分~~

像我博客目前这样,主要搜索本博客的结果出现在博客中间,搜索一些不相干的内容如全部博客,新闻,视频,图书,地图都放在了侧边栏。大家可以搜索看看,是不是比以前更直观了更方便?!o(∩_∩)o...哈哈!开心~~

当然,具体哪些搜索放在中间,哪些放在旁边都是大家自己可以设定的。而且这次变更会让你的博客打开速度更快,因为现在搜索会在整个博客加载完成以后再加载~~

安装方法:首先第一步在下面的网址申请一个google AJAX搜索API的key :http://code.google.com/apis/ajaxsearch/signup.html 很容易就能申请到,只需输入你要申请的网址,然后同意google条款,确定~~得到一个key的代码。如果你的博客地址寄存在blogspot的域名下,那么可以直接使用blogspot.com的通用key:ABQIAAAAWnca3cebCQY1AVQgCmo_BRRexG7zW5nSjltmIc1ZE-b8yotBWhT99ZWGANTblVeVm16pTdxk3-Ao4w

第二步:把下面的代码加入你的排头, 正好放在 ] ] ></b:skin> 后面, </head> 前面。

]]></b:skin>
<script src="http://www.google.com/jsapi?key=ABQIAAAAWnca3cebCQY1AVQgCmo_BRRexG7zW5nSjltmIc1ZE-b8yotBWhT99ZWGANTblVeVm16pTdxk3-Ao4w" type="text/javascript"/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("search", "1");
function initialize() {

// create a search control
var searchControl = new GSearchControl();

// web search, open, alternate root
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("somewhere_else"));
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("GG派");
blogSearch.setSiteRestriction("http://ggpi.blogspot.com");
searchControl.addSearcher(blogSearch, options);
siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("互联网");
siteSearch.setSiteRestriction("012783045486823201394:5kgglhdahug");
searchControl.addSearcher(siteSearch, options);

searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GlocalSearch());

// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("search_control"));

// execute an inital search
searchControl.execute(initSearch);
}
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
.gsc-control {
width: 95%;
}
</style>

</head>

注意你可以把上面深红色的KEY替换成你自己第一步申请到的key。

把后面深红色的我的GG派的名称和网址,替换成你的博客的名称和网址。

最后保存模板。

第三步,切换到页面元素(会出现弹出窗,英文意思是说你申请的key不对头,点确定忽略之!)。

新建两个页面元素,分别放进以下代码:
<div id="somewhere_else">读取中/Loading...</div>
上面代码放进的页面元素将显示分离出来的搜索结果。

<div id="search_control">读取中/Loading...</div>
上面代码放进的页面元素将显示搜索框和搜索框下面的搜索结果。

注意上面两个页面元素的代码“读取中/Loading...”是可以改成任何文字或图片的,例如我把其中一个改成了flash的读取中了:)具体如何显示flash或图片,请参考我的这篇文章

是的,这里就已经完工了,非常简单吧!

以上为最简单的傻瓜安装方法。下面讲高级定制方案:

如何具体定制你想要搜索内容出现在哪里呢?秘诀就在第二步代码这里:

siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("互联网");
siteSearch.setSiteRestriction("012783045486823201394:5kgglhdahug");
searchControl.addSearcher(siteSearch, options);

看到我上面引用的两处深色代码没有?
012783045486823201394:5kgglhdahug 是你的自定义搜索可以得到的key,由此你就可以把自己的自定义搜索也加到ajax搜索里来了。如果你不知道什么是自定义搜索,不要在意我说的话……

注意到这一行代码searchControl.addSearcher(siteSearch, options);的深色部分, options就表示这个搜索结果会显示在分离出来的搜索结果里。

例如第二步代码里的这一行代码searchControl.addSearcher(new GblogSearch());
就代表了在搜索框下面出现的博客搜索结果。如果想要博客搜索结果出现在分离出来的搜索结果里,就把, options加进去,代码变更为:

searchControl.addSearcher(new GblogSearch(), options);

即可。

21 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆