为Micolog添加Google自定义搜索

分类:Tech | 作者:Shoopman | 发表于2009/07/14 没有评论  

    由于Google App Engine数据存储与关系数据库不一样,Micolog也无法像传统应用那样提供基于数据库某些字段的搜索。作为搜索引擎老大,Google对自家的App Engine里的内容收录还是相当及时的,比如我这博客发布的文章,一般两天内就收录了。因此我们可以利用Google搜索引擎收录索引来解决Blog站内搜索这个问题。Micolog默认主题里就提供的站内搜索,即加上site:blog.shoopman.org,比如这个搜索。有个不爽的地方,就是搜索结果页完全跳出了自己的博客。于是,我利用了Google自定义搜索来为Micolog博客加入站内搜索。

    先看一下最后的效果:
http://blog.shoopman.org/google-search?q=java&cx=004316150475193113567%3Ah9vz95zkor4&cof=FORID%3A11&ie=UTF-8
还不错吧,页面的顶部、底部以及右边都是Micolog原本的风格和内容,只有页面主体是搜索结果。下面开始动手了。

1. 创建Google自定义搜索引擎
用你的Google帐号登陆到 http://www.google.com/coop/cse/,按照提示创建一个自定义搜索()。

2. 获取代码
转到自定义搜索的控制面板–获取代码,选择”使用 iframe 使搜索结果位于我的网站上”,并指定搜索结果页地址,如/google-search),这时可得到搜索框和搜索结果页的代码,先保存一下。

3. 修改Micolog主题
转到你正使用的主题,如我是用默认主题,即到themes\default\templates下,编辑base.html,把搜索框处理的代码修改如下:

<form method="get" id="cse-search-box" action="/google-search">
        <input type="text" value="Search…" onfocus="if (this.value == ‘Search…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘Search…’;}" name="q" id="s" />
        <input type="image" src="/themes/{{ blog.theme_name }}/images/transparent.gif" id="go" alt="Search" title="Search" />
        <input type="hidden" name="cx" value="004316150475193113567:h9vz95zkor4" />
        <input type="hidden" name="cof" value="FORID:11" />
        <input type="hidden" name="ie" value="UTF-8" />
</form>

注意,form中action处的google-search后面再说,名为cx的隐藏域应该是自己自定义搜索的标识。在第二步里的搜索框代码里,还有一行<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>,不要加进去,这会改变原来搜索框的样式。

4. 创建搜索结果Javascript
由于无法在Micolog的编辑器添加有效的Javascript代码,我们将Google自定义搜索结果页的Javascript代码放到一个独立的js文件里,内容如下:

var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";

把此文件命名为google_search.js,并放在/static/js目录下。(你可以修改js文件名及路径,但建议放在static目录下)

5. 创建搜索结果显示页
登陆到Micolog后台管理,创建页面,内容如下:

<div id="cse-search-results"> </div>
<script src="http://blog.shoopman.org/static/js/google_search.js" type="text/javascript"></script><script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript"></script>

其中前面的js就是上一步创建的那个js文件。
在此页面里,还要指定名称(slug)为google-search,即第2步、第3步中搜索框Form中的action;把页面级别设置为1,那么在博客顶部的菜单就不会出现此页面的连接()。

6. 上传文件
把修改过的base.html和新建的google_search.js上传到Google App Engine中,就大功告成了!

 

Update1:这文章在发布后几分钟就被Google收录了,很快!

Update2:这里有个更方便的办法:http://www.houkai.com/2009/07/7/google-search.html

Tag:

日志信息 »

该日志于2009-07-14 07:35由 Shoopman 发表在Tech分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下引用到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。
目前盖楼 (0)层:

发表评论 »

« »