設計對瀏覽器更加友好的網站——整合搜索功能(針對Google chrome)

作者: 來源: 更新時間:2013-03-26 11:53:30 點擊:

設計對瀏覽器友好的網站,是一個很大的話題。本篇文章想討論一下的是,如何在Google Chrome中直接整合網站所帶的搜索功能。

我們可以進入這個網頁,然后輸入關鍵字進行搜索,例如

image

這沒有任何問題,但有時候可能你會想,為什么每次都要輸入地址,然后進入到搜索頁面,然后再輸入關鍵字才能搜索呢?有沒有更加簡單的方法?

Google的Chrome瀏覽器在這方面有一些不錯的創新,首先,它支持直接在地址欄輸入內容,進行搜索,例如

image

此時他會調用默認的搜索引擎(我的本機設置為Bing)進行搜索

image

默認的搜索引擎肯定只有一個,那么我們是否有辦法添加更多的搜索引擎,并且用某種方式在地址欄直接搜索呢?

在Google Chrome的設置頁面中,你可以看到可以管理搜索引擎

image

點擊“管理搜索引擎”按鈕可以看到如下的界面

image

如果我們希望能快速地訪問博客園的搜索功能,可以在“其他搜索引擎”中添加一個定義

image

第一個參數是一個描述名稱,第二個參數是你可能會在地址欄中輸入的地址,第三個字符串是將要訪問的搜索頁面的地址,用%s表示你的搜索關鍵字。

那么,這樣定義好之后,如何使用它呢?

你可以在地址欄輸入zzk.cnblogs.com(通常會自動補齊的),然后注意看右側會有一個提示“按Tab可通過博客園進行搜索”

image

我按下Tab鍵,然后輸入要找的關鍵字,例如CLR

image

回車之后就可以直接看到搜素結果了。

image

這樣看起來就好了很多,節省了我們一些時間,這是一個聰明的設計。

再往深入里面想一下,這個做法是很好,但是如果要求所有人都去手工地添加這個搜索設置,可能也不是很方便。有沒有更加智能的做法呢

其實Google Chrome在設計上已經考慮了這個問題,如果我們的網站想自動地在Google Chrome中注冊搜索引擎設置,可以參考這里的說明

/upload/201303/2013326115328vmm.png" width="244" height="220">

我們需要在搜索中心的頁面的頭部中,添加一個鏈接定義

<link type="application/opensearchdescription+xml" rel="search"        href="url_of_osdd_file"/>

然后設置一個文件內容

<?xml version="1.0"?><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>Search My Site</ShortName> <Description>Search My Site</Description> <Url type="text/html" method="get" template="http://my_site/{searchTerms}"/></OpenSearchDescription>

 

這里使用{searchTerms}代表要搜索的關鍵字。

這方面,很多網站都已經做到了,例如國外知名的問答社區stackoverflow.com 的定義是下面這樣的:

<link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="http://www.cnblogs.com/opensearch.xml">

image

希望更多的瀏覽器也提供這樣的設計。

大乐透走势图2