设计对浏览器更加友好的网站——整合搜索功能(针对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

希望更多的浏览器也提供这样的设计。