Mar 13, 2007

Google AJAX Search 使用简介

无意中发现了Google提供了AJAX Search功能,可以适用于各大Blog(包括wordpress,blogspot,自制网页,等等),随即用Google大神搜索了一下。结果我发现网上有不少相关的文章,但是适合我的一个都没有,于是我自己动手把这个功能加到blog中,具体效果请试用左侧的搜索栏。本着共享的原则,将方法写在这儿,给大家一个 参考。

Google AJAX Search的功能非常强大,可以搜索网页、地图、新闻、书籍等等。但是我觉得对一个blog搜索来说,只要有本站搜索和网页搜索两项就足够了;另外,现在的blog多会采用两栏或者三栏的布局方式,因此,我也选择了将搜索栏和搜索结果分开显示的方法,合理的利用空间,如果你希望添加更多的内容,请参见Google AJAX Search documentation

首先你要做的是去Google的网站申请一个Google AJAX Search API,点击左下角的确认框,并且输入你的blog地址后,你会得到一个长长的Key。

随后,在需要添加AJAX搜索功能的网页之header部分(在<head>和</head>之间),嵌入如下的代码(如果你使用的是wordpress,请在header.php中的</head>之前添加):

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=请在此处填写你的key" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF); //可选项,如果删除此行,搜索结果将在新页中打开
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET); //可选项,如果删除此行,搜索结果将从10条变为4条
// create a draw options object so that we
// can position the search form root
var options = new GdrawOptions();
options.setSearchFormRoot(document.getElementById("searchForm"));
options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("填入你的网站标签");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("填入你的blog网址");
searchControl.addSearcher(siteSearch);

// standard, unrestricted web search
searchControl.addSearcher(new GwebSearch());

searchControl.draw(document.getElementById("searchResults"), options);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>

几个地方需要修改的我已经在代码中列明。

然后在你需要放置搜索结果的地方(一般放置在代码<body>之后,显示blog内容的部分)嵌入如下代码,(如果你使用wordpress,请在header.php中的代码<div id="content">之后添加):

<div id="searchResults"/></div>

现在,你需要添加的是搜索条部分,一般说来,我们会选择在侧栏添加如下代码(如果你使用wordpress,请在siderbar.php中添加):

<div id="searchform"></div>

好,现在你要做的是最后一件事情,将如下的代码嵌入到你的css文件中(wp用户的css文件为相应theme下的style.css),如果你的 网站没有css文件,那么请在<head>和</head>添加如下代码,注意,你可能要根据自己网站的实际情况修改下列代码:

/** Copyright 2005 Google Inc. All rights reserved. */
/* the GSearchControl CSS Classes
* .gsc-control :主显示框
*/
.gsc-control {
width: 98%;
}

.gsc-control div {
position: static;
}

/* control inputs
* .gsc-search-box : 搜索栏大小
* .gsc-input : the text input area
* .gsc-keeper : the save link below savable results
*/
form.gsc-search-box {
width: 96%;
}

/*
* This table contains the input element as well as the search button
* Note that the search button column is fixed width, designed to hold the
* button div's background image
*/
table.gsc-search-box {
width : 100%;
margin-bottom : 2px;
margin-top : 5px;
margin-left: -6px;
}

td.gsc-search-button {
width : 1%;
}

td.gsc-clear-button {
width : 14px;
}

/**
* undo common generic table rules
* that tend to impact branding
*/
table.gsc-branding td,
table.gsc-branding {
margin: 0 0 0 0;
padding: 0 0 0 0;
border : none;
}

table.gsc-branding {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
}

td.gsc-branding-text {
vertical-align : top;
}

td.gsc-branding-text div.gsc-branding-text {
padding-bottom : 2px;
text-align : right;
color : #676767;
font-size : 11px;
margin-right : 2px;
}

td.gsc-branding-img-noclear {
width : 51px;
vertical-align : bottom;
}

td.gsc-branding-img {
width : 60px;
vertical-align : bottom;
}

input.gsc-search-button {
margin-left : 4px;
}

div.gsc-clear-button {
display : inline;
text-align : right;
margin-left : 4px;
margin-right : 4px;
padding-left : 10px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://www.google.com/uds/css/clear.gif');
cursor : pointer;
}

/*
* Given that this is sitting in a variable width tabel cell, the idea is
* for it to consume the entire cell. The adjacent cell contains the search
* button and that is a fixed width cell.
*/
input.gsc-input {
padding-left : 2px;
border-style : solid;
border-width : 1px;
border-color : #BCCDF0;
width : 99%;
}

/* tabbed mode of search control
* .gsc-tabsArea : the box containing all of the tabs
* .gsc-tabsAreaInvisible : same as above, but this is the state when search has been cleared
* .gsc-tabHeader : an individual tab
* .gsc-tabHeader.gsc-tabhActive : the active tab
* .gsc-tabHeader.gsc-tabhInactive : an inactive tab
* .gsc-tabData : the data area/box containg results and header data for each tab
* .gsc-tabData.gsc-tabdActive : the data area for the active tab
* .gsc-tabData.gsc-tabdInactive : the data area for inactive tabs
*/
.gsc-tabsArea {
clear: both;
margin-top: 6px;
}

.gsc-tabsAreaInvisible {
display : none;
}

.gsc-tabHeader {
display: inline;
cursor: pointer;
display: inline;
padding: 2px 10px !important;
border: 1px solid #999; /*可修改搜索结果标题栏的边框颜色*/
border-bottom: none;
margin-bottom: 0;
margin-right: -6px; /*不要修改*/
margin-left: 10px; /*不要修改*/
}

.gsc-tabHeader.gsc-tabhActive {
background: #484848; /*正在显示的搜索结果标题栏的背景*/
color: #FFFF99; /*正在显示的搜索结果标题栏的字体颜色*/

}

.gsc-tabHeader.gsc-tabhInactive {

}

.gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
}

/*此代码只对IE6适用*/
* html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改,保证tab显示效果和firefox一致*/
}

/*此代码只对IE7适用*/
*+ html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改,保证tab显示效果和firefox一致*/
}

.gsc-tabData.gsc-tabdInactive {
display: none;
}

/* tab specific results header supression
* - no twiddle, tabbed mode runs in full expand mode
* - no title
* - no stats
*/
.gsc-tabData .gsc-resultsHeader .gsc-title {
display: none;
}

.gsc-tabData .gsc-resultsHeader .gsc-stats {
display: none;
}

.gsc-tabData .gsc-resultsHeader .gsc-results-selector {
display : none;
}

/* the results for each section
* .gsc-resultsbox-{visible,invisible} : a complete-collection of results including headers
* .gsc-results : the collection of results for a given searcher
* .gsc-result : a generic result within the control. each result has this class, as well as .gsc-xxxResult where xxx is web, image, local, blog, etc.
*/

.gsc-resultsbox-visible {
display : block;
}

.gsc-resultsbox-invisible {
display : none;
}

.gsc-results {
clear: both;
padding-bottom: 2px;
}

.gsc-result {
margin-bottom: 10px;
}

.gsc-result .gs-title {
height: 1.4em;
overflow: hidden;
}

/* specialized, result type specific, fine grained controls */
.gsc-result div.gs-watermark {
display: none;
}

/* Ads
*/
.gsc-results .gsc-result img.gs-ad-marker {
display: none;
}

/*** End of Control, Begin Results ***/

/* generic, cross cutting result style
* - in the form of .gs-result .gs-xxx where xxx is the generic style
* .gs-title : typically the first line of a result, typically a link, image results over ride this, since for image results, the image is the link
* .gs-divider : typically seperates results from ads
* .gs-visibleUrl : typically the last line of a result, displayed in green. sometimes a link (like in blog search)
* .gs-clusterUrl : for news, and other similar services, this is a cluster of additional results
* img.gs-image : an actial image in a result
* .gs-phone : a phone number
* .gs-address : an address (includes street, city, region, country)
* .gs-streetAddress : a street (including #)
* .gs-city : a city
* .gs-region : a region (zip code, area, etc.)
* .gs-country : a country
* .gs-snippet : snippetized content
* .gs-watermark : indicator that user selected this result
* .gs-metadata : generic metadata, e.g.,
* .gs-image-box : generic container for a result's image (within a table)
* .gs-text-box : generic container for a result's text content (within a table). Note that this class, and image-box are only used in video
*/
.gs-result .gs-title,
.gs-result .gs-title * {
color: #6FF; /*搜索结果内容标题栏颜色 */
text-decoration: underline;
padding-bottom:5px;
}

.gs-divider {
padding-bottom: 8px;
text-align: center;
color: #676767;
}

.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
color: #FAC; /*搜索结果来源网站的颜色 */
text-decoration: none;
}

.gs-webResult div.gs-visibleUrl-long {
width : 100%;
overflow : hidden;
display : none;
}

可能需要修改的地方,我已经用汉字注解标注。

好了,在完成上述工作以后,将你所修改好的文件上传,就大功告成了。现在,别人如果要搜索你的网页,可以非常快速的用Google在你的网页上立即完成,一个字-酷!

Technorati Tags: , , , ,

Post by SUN @ 12:23 am | 与时俱进 | Comment (1) | Add to del.icio.us | Digg This!
  • At 2007.07.31 17:39, 在Wordpress中加入Google AJAX Search at 许许如生 said:

    [...] 在使用过程中参考了徘徊在玻璃之城的文章Google AJAX Search 使用简介,成功地将 Google AJAX Search加入到了我的 blog 中,具体效果请试用右侧栏的搜索栏。下面给大家共享一下具体怎样做: [...]

    [Reply]      

(Required)
(Required, will not be published)