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


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

很多網站都有搜索功能,例如以博客園的搜索中心地址是:http://zzk.cnblogs.com/

image

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

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中注冊搜索引擎設置,可以參考這里的說明

http://www.chromium.org/tab-to-search

image

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

<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">
image
希望博客園的搜索中心也加上這樣的功能,也希望更多的瀏覽器也提供這樣的設計。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM