設計對瀏覽器友好的網站,是一個很大的話題。本篇文章想討論一下的是,如何在Google Chrome中直接整合網站所帶的搜索功能。
很多網站都有搜索功能,例如以博客園的搜索中心地址是:http://zzk.cnblogs.com/
我們可以進入這個網頁,然后輸入關鍵字進行搜索,例如
這沒有任何問題,但有時候可能你會想,為什么每次都要輸入地址,然后進入到搜索頁面,然后再輸入關鍵字才能搜索呢?有沒有更加簡單的方法?
Google的Chrome瀏覽器在這方面有一些不錯的創新,首先,它支持直接在地址欄輸入內容,進行搜索,例如
此時他會調用默認的搜索引擎(我的本機設置為Bing)進行搜索
默認的搜索引擎肯定只有一個,那么我們是否有辦法添加更多的搜索引擎,並且用某種方式在地址欄直接搜索呢?
在Google Chrome的設置頁面中,你可以看到可以管理搜索引擎
點擊“管理搜索引擎”按鈕可以看到如下的界面
如果我們希望能快速地訪問博客園的搜索功能,可以在“其他搜索引擎”中添加一個定義
第一個參數是一個描述名稱,第二個參數是你可能會在地址欄中輸入的地址,第三個字符串是將要訪問的搜索頁面的地址,用%s表示你的搜索關鍵字。
那么,這樣定義好之后,如何使用它呢?
你可以在地址欄輸入zzk.cnblogs.com(通常會自動補齊的),然后注意看右側會有一個提示“按Tab可通過博客園進行搜索”
我按下Tab鍵,然后輸入要找的關鍵字,例如CLR
回車之后就可以直接看到搜素結果了。
這樣看起來就好了很多,節省了我們一些時間,這是一個聰明的設計。
再往深入里面想一下,這個做法是很好,但是如果要求所有人都去手工地添加這個搜索設置,可能也不是很方便。有沒有更加智能的做法呢
其實Google Chrome在設計上已經考慮了這個問題,如果我們的網站想自動地在Google Chrome中注冊搜索引擎設置,可以參考這里的說明
http://www.chromium.org/tab-to-search
我們需要在搜索中心的頁面的頭部中,添加一個鏈接定義
<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="/opensearch.xml">
希望博客園的搜索中心也加上這樣的功能,也希望更多的瀏覽器也提供這樣的設計。