以前一直用的是老版本google自定义搜索,可自定义的功能很少。最近趁blog用twitter bootstrap重写时顺便将google自定义搜索功能也更新一把,网上的教程比较繁琐,自己折腾了一晚上,找到一个超简单集成的方法。
简单2步即可完成基本整合功能:
1. 通过Google Custom Search element网页自动生成基本的搜索代码。
2. 添加到网页中,做一些自定义修改,上传收工。
俺的整合代码(效果见右侧搜索功能):
<!-- Google Custom Search Element -->
<!-- 注意两个id:cse-search-form 和 cse-search-result -->
<!-- cse-search-form: 搜索框显示的地方 -->
<!-- cse-search-result: 搜索结果显示的地方 -->
<div id="cse-search-form" style="row-fluid"></div>
<div id="cse-search-result" style="row-fluid"></div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {
style: google.loader.themes.MINIMALIST
});
google.setOnLoadCallback(function () {
var cse = new google.search.CustomSearchControl();
var drawOpts = new google.search.DrawOptions();
drawOpts.setSearchFormRoot("cse-search-form");
cse.draw('cse-search-result', drawOpts);
}, true);
</script>
更多高级设置可以参考Custom Search Reference