使用Google Custom Search打造站内搜索

链接:

Google AJAX 搜索 API

 

 

参考:

http://www.google.com/cse/docs/cref.html?hl=zh-CN

http://www.google.com/cse/manage/all

http://sofree.cc/custom-search-element/

 

一般来说,每个网站或博客系统都有其自带的搜索,但是很多系统的搜索功能比较简单,搜索结果往往不尽人意。就拿WordPress来说,我用一个关 键词搜索时,会出来很多不相关的结果,而且这些搜索结果不是按相关性排列,而是按发表的时间次序排列的。当文章较多时,我们很难通过搜索找到某一篇文章。

 

一直想使用Google来实现站内搜索,昨天终于做好了,效果就是顶部导航栏右边的搜索框。使用Google站内搜索有几个好处:

 

  1. 优化搜索,提高搜索结果的相关性
  2. 个性化搜索,一定程度提高博客亲和力与权威性
  3. 使用外部搜索,降低博客系统的资源消耗
  4. 与Google Adsense结合,实现盈利


如何使用Google Custom Search打造博客站内搜索?

 

首先来到http://www.google.com/coop/cse/ ,点击右侧按钮“Creat a Custom Search Engine”,然后会要求使用Google帐号登录,登录后就来到第一步。第一步要求填写基本信息,包括:

 

  • Search engine name - 给搜索取个名
  • Search engine description - 简单描述
  • Search engine keywords - 搜索关键词,提高搜索相关性
  • Search engine language - 搜索结果语言 (简体中文 simplified chinese)
  • 搜索范围:only sites I select
  • 填写要搜索的网站或博客地址 例如:www.waterylife.com
  • AD display - 是否展示广告,如果想结合adsense赚钱,就选Show ads on results pages
  • 同意条款

 

提交后,进入下图所示的页面,finish 就可以了。

 

我们可以进入控制面板control panel做一些设置。control panel下有一下菜单:

 

我们主要设置Look and Feel,Code,Make Money

  • Look and Feel 里选择搜索框的样式
  • Make Money 里 设置是否与Adsense结合
  • Code 里设置搜索结果展示页面

 

这里选择搜索结果展示在博客页面,以及其下面的iframe 项。iframe 项下面的 New ! 是使用ajax输出搜索结果,但是只有8个,而且不能make money。注意填“搜索结果展示的页面 ”。使用wordpress的朋友可以很容易在后台新增一个页面,然后将 Search results code 加入到这个页面即可(代码模式)。也可以手动建立一个静态页面,然后将代码加入到这个页面中。

 

Search box code 就是搜索框代码,将代码放到想显示搜索框的地方即可。Search results code 是搜索结果的代码,将其放在建立的页面即可。

 

大概就是这样了,具体的页面优化,可以根据自己博客的页面设计来制作,做到将搜索结果融入到页面,和谐一点。大家可以搜索本站看搜索结果的页面,以作参考。

 

 

参考 http://drupal.org/node/274441

 

参考代码:(替换 Your search engine ID )

 

<div id="cse-search-form" style="display:none;">Loading</div>
<div id="SubGeRight"></div>
 
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function(){
    var customSearchControl = new google.search.CustomSearchControl('Your search engine ID');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    customSearchControl.draw('SubGeRight', options);
	customSearchControl.execute("<?php echo trim($_GET['keyword']) ?>");
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<style type="text/css">
  .gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  input.gsc-input {
    border-color: #BCCDF0;
  }
  input.gsc-search-button {
    border-color: #666666;
    background-color: #CECECE;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #E9E9E9;
    background-color: #E9E9E9;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-top-color: #FF9900;
    border-left-color: #E9E9E9;
    border-right-color: #E9E9E9;
    background-color: #FFFFFF;
  }
  .gsc-tabsArea {
    border-color: white;
  }
  .gsc-webResult.gsc-result {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-webResult.gsc-result:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b {
    color: #CC2826;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b {
    color: #CC2826;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b {
    color: #CC2826;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b {
    color: #CC2826;
  }
  .gsc-cursor-page {
    color: #CC2826;
  }
  a.gsc-trailing-more-results:link {
    color: #CC2826;
  }
  .gs-webResult.gs-result .gs-snippet {
    color: #000000;
  }
  .gs-webResult.gs-result .gs-visibleUrl {
    color: #858585;
  }
  .gs-webResult.gs-result .gs-visibleUrl-short {
    color: #858585;
  }
  .gsc-cursor-box {
    border-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-page {
    border-color: #E9E9E9;
    background-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-page.gsc-cursor-current-page {
    border-color: #FF9900;
    background-color: #FFFFFF;
  }
  .gs-promotion.gs-result {
    border-color: #336699;
    background-color: #FFFFFF;
  }
  .gs-promotion.gs-result a.gs-title:link {
    color: #0000CC;
  }
  .gs-promotion.gs-result a.gs-title:visited {
    color: #0000CC;
  }
  .gs-promotion.gs-result a.gs-title:hover {
    color: #0000CC;
  }
  .gs-promotion.gs-result a.gs-title:active {
    color: #0000CC;
  }
  .gs-promotion.gs-result .gs-snippet {
    color: #000000;
  }
  .gs-promotion.gs-result .gs-visibleUrl,
  .gs-promotion.gs-result .gs-visibleUrl-short {
    color: #008000;
  }
  /* by peikai*/
  .gsc-tabHeader.gsc-tabhActive{
	display:none;
  }
  .gs-webResult.gs-result .gs-snippet{
	  font-size:12px;
  }
  .gs-webResult.gs-result .gs-title {
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size:13pt;
	overflow:visible;
   }
   .gs-webResult.gs-result .gs-title a {
   }
   .gs-result .gs-title, .gs-result .gs-title * {
	   color: #CC2826;
	   text-decoration:underline;
	}
	.gsc-wrapper{
		width: 600px;
	}
</style>

 

 

 

你可能感兴趣的:(设计模式,html,Ajax,wordpress,Google)