Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

为网站添加 OpenSearch 功能 #51

Open
YIXUNFE opened this issue Jan 18, 2016 · 0 comments
Open

为网站添加 OpenSearch 功能 #51

YIXUNFE opened this issue Jan 18, 2016 · 0 comments

Comments

@YIXUNFE
Copy link
Owner

YIXUNFE commented Jan 18, 2016

为网站添加 OpenSearch 功能

最近得知微博添加了 OpenSearch 功能,出于好奇,了解了一下如何为网站添加 OpenSearch 功能。


## OpenSearch 是什么

OpenSearch 是一种用于共享搜索结果的协议,它可以让我们更加快速的搜索到我们需要的内容。一般浏览器在地址栏的右侧会有一个搜索栏,类似下图:

1

Firefox 的搜索栏

点击该搜索栏中的搜索图标,会出现一些候选的搜索方案,点击某一个方案,浏览器就会自动跳转到改方案对应的 URL。

=========2016/4/15 更新=========

Chrome 地址栏

突然发现 Chrome 对 OpenSearch 的支持加强了,直接在地址栏提示用户可直接搜索了。

12

=========2016/4/15 更新结束=========

实现 OpenSearch

实现 OpenSearch 十分的简单。只需要三步:

  • 获取网站的搜索地址,比如 http://zdm.yixun.com/search/?keyword=xxxx
  • 编写 OpenSearch 配置文件;
  • 页面中添加对配置文件的引用。

OpenSearch 配置文件的一般格式如下:

<!-- opensearch.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <InputEncoding>utf-8</InputEncoding>
    <ShortName>易启玩</ShortName>
    <Description>易启玩搜索</Description>
    <Url type="text/html" template="http://zdm.yixun.com/search/?keyword={searchTerms}"/>
  </OpenSearchDescription>

其中的 Url 标签的 template 属性就是第一步中获取的网站搜索地址。

如果需要加上图标,可以添加如下语句:

<Image height="64" width="64" type="image/png">http://example.com/websearch.png</Image>
<Image height="16" width="16" type="image/vnd.microsoft.icon">http://example.com/websearch.ico</Image>

完整的配置文件可以参考这里


页面中引用配置文档可以使用 link 元素或者是 JS 的方式进行引用。

<!-- link 元素方案 -->
<link rel="search" type="application/opensearchdescription+xml" href="http://zdm.yixun.com/opensearch.xml" title="易启玩" />

因为需要处理兼容性,JS 的引用方案比较繁琐:

// JS 方案
function installSearchEngine() {
 if (window.external && ("AddSearchProvider" in window.external)) {
   // Firefox 2 and IE 7, OpenSearch
   window.external.AddSearchProvider("http://example.com/search-plugin.xml");
 } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) {
   // Firefox <= 1.5, Sherlock
   window.sidebar.addSearchEngine("http://example.com/search-plugin.src",
                                  "http://example.com/search-icon.png",
                                  "Search Plugin", "");
 } else {
   // No search engine support (IE 6, Opera, etc).
   alert("No search engine support");
 }
}
MDN 示例

## 添加 OpenSearch 的意义

通过浏览器的搜索栏可以让我们无需登录网站就搜索到相应资源,更加高效地将互联网资源整合在一起。对于内容为主的网站更加需要添加 OpenSearch 功能。

我们的易启玩栏目可以把这个施工需求提上日程了。


## 参考文献

百度百科
http://www.opensearch.org/Home
MDN


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant