MT(Movable Type) 中加入Google Ajax Search

| No Comments | No TrackBacks 分享

 由於不想用原本MT附的搜尋,因為會浪費我的資源,所以最近一直在找尋方案。最後終於被我找到了Google Search。並且可以整個融入MT裡面。不需再跳出視窗。
 就讓我來告訴大家,如何把Google Ajax Search加入你的MT中。
 如果想試用,可以直接在我的首頁右邊,直接試試效果。

 1.首先你必須先到Sign up for the Google AJAX Search API去申請一個針對你網站的APi Key。將I have read and agree with the terms and conditions 打勾,並將你要搜尋的網站位置填寫在My web site URL的欄位裡。
 PS.*按下Generate API Key的按鈕時,會請你先登入Google的帳號。如果你還沒有帳號,可以直接在他的提示下做申請。
  *申請的Key只能在你申請的網站下使用,否則會出現Key不正確的訊息。
google_ajax_search_api_signup_20061109.jpg


 2.申請完後會出現一個Key值,將這Key先複製下來,等會會用到。他也會附範例給你參考,但我們似乎用不到^^。
google_ajax_search_api_key_20061109.png


 3.接下來登入你的MT後台,到"範本"區選"模組",新增兩個新的模組
 ajaxsearch-keys:這是存放Key的(記的把key值換成你自己的)。

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAN4UsFIrghsFg5sq7gXOn_RTFdIlBPHcbe0XARQF4p6wDvY17rxR2pDOmhC4BjXuKgU4gDMboJbgvhA" type="text/javascript">

 ajaxsearch-sidebar:是Google Ajax Search 的一些功能模組。

<!-- raw solution files and styles -->
<!-- Keyed Apis are in ajaxsearch-keys -->
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/>
<link href="http://www.google.com/uds/css/gsearch_darkgrey.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
/* center column search stuff */
#searchform { width : 100%; margin-bottom : 8px;}
#alpha .gs-result .gs-title,
#alpha .gs-result .gs-title * {
color : rgb(255, 153, 51);
}

#alpha .gsc-resultsHeader {
border-bottom-color : rgb(99,99,99);
}

#alpha .gsc-control {
width : 100%;
}

#alpha .gsc-tabHeader.gsc-tabhActive {
border-left: 1px solid #636363;
border-right: 1px solid #636363;
border-top: 2px solid rgb(255, 153, 51);
background: #e9e9e9;
}

#alpha .gsc-tabHeader.gsc-tabhInactive {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 2px solid #636363;
background: black;
}

</style>

<script type="text/javascript">
var coreSearch;

function SolutionLoad() {

var alphaRoot = document.getElementById("alpha");
var controlRoot = document.createElement("div");
alphaRoot.insertBefore(controlRoot, alphaRoot.firstChild);

// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

// prep for decoupled search form
var searchFormElement = document.getElementById("searchform");
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

// populate - web, this blog, all blogs
searcher = new GblogSearch();
searcher.setSiteRestriction("/fun/");
searcher.setUserDefinedLabel("土不拉多");
coreSearch.addSearcher(searcher);

coreSearch.draw(controlRoot, drawOptions);
}

function doCoreSearch(q) {
coreSearch.execute(q);
}

registerLoadHandler(SolutionLoad);

function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
return true;
}

</script>

<!-- google search -->
<h2 class="module-header">搜尋</h2>
<div id="searchform">讀取中...</div>

 新增完後就會看到如下圖:
google_ajax_search_api_template_20061109.png


 4.接下來就是要把它加入我們的首頁(你也可以加到你想要放置的地方),到"範本"區選擇"索引",編輯"主索引"。在適當的位置上加上
      <div class="module-archives module">
      <$MTInclude module="ajaxsearch-keys"$>
      <$MTInclude module="ajaxsearch-sidebar"$>
      </div>
  PS.編輯完後記的儲存並重建索引。這樣就大功告成了。

google_ajax_search_api_template_20061109.png


 PS:
  *此範例只適用於兩欄式的MT 樣式,其他可能會不適用。
  *在用Google Search 之前,請先確定你的網站有被Google收錄,免的加上去後,你可能找不到任何東西。
  *使用Google Ajax Search的壞處是,你的一些新文章可能會搜尋不到,這就要看Google的更新速度了。還有就是當Google壞了,你的搜尋也會失效。
  *相關的資訊也可以參考
   Google AJAX Search API Playground
   Google AJAX Search API Class Reference

相關文章:

No TrackBacks

TrackBack URL: http://fun.idv.tw/cgi-bin/mt/mt-tb.cgi/23

Leave a comment

September 2011

Sun Mon Tue Wed Thu Fri Sat
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Archives

Powered by Movable Type 4.25