• 给网站添加“开放搜索描述“以适配浏览器的“站点搜索“

    背景

    要在一个常用网站搜索，想必大部分人会这样：

    1. 访问这个网站的的主页或者任意一个带搜索框的页面
    2. 聚焦输入框，输入关键词并Enter

    而如果一个网站适配了浏览器的"站点搜索"（site search）特性，或者说添加了"开放搜索描述"(opensearch description)，那么用户可以也通过以下方式进行搜索：

    1. 新建标签页，在地址栏输入站点域名（输入站点的域名前缀即可，可以按Tab键自动补全）
    2. 输入要搜索的关键词，并回车
    3. 如果这个站点实现了"搜索建议"(search-suggestions)，地址栏下方还能显示出建议的关键词列表

    如果你需要频繁新打开页面在一个网站搜索，使用站点搜索方式来搜索通常可以节省时间。

    致Web开发者：让网站适配浏览器的"站点搜索"

    以下步骤将以站点www.example.com为例，介绍如何将一个现有查单词的搜索功能集成到浏览器地址栏。

    第一步：创建opensearch description文件。

    例如：search.osdx，放置在站点首页旁边

    <?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Word Search</ShortName>
<Image type="image/x-icon" width="16" height="16">https://example.com/favicon.ico</Image>
<Url rel="results" type="text/html" method="GET" template="https://www.example.com/search?q={searchTerms}"/>
<Url rel="suggestions" type="application/x-suggestions+json" method="GET" template="https://www.example.com/api/search-suggestions?q={searchTerms}"/>
<Url rel="self" type="application/opensearchdescription+xml" template="https://www.example.com/search.osdx" />
</OpenSearchDescription>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    服务器在提供search.osdx时最好使用标准的MIME “application/opensearchdescription+xml”，因此你需要修改服务端的配置文件设置扩展名.osdx的MIME type。实在不行使用MIME "application/xml"浏览器也认，这样的话把search.osdx扩展名换成为.xml即可。

    注：

    • <Url rel="suggestions" ... />可选，用于提供搜索建议
    • <Url rel="self" ... />可选，用于自动更新

    第二步：【可选】实现搜索建议

    在服务端实现一个REST API接口GET /api/search-suggestions，其响应的MIME type应是application/x-suggestions+json，响应体格式如下

    [
"ver",
[
 "verge",
 "vertical"
],
[
 "[vɜːdʒ] n. 边缘，边际 || be o...",
 "[ˈvɜːtɪkl] adj. 垂直的，直立的..."
],
[
 "https://www.example.com/search?q=verge&utm_source=search-suggestion",
 "https://www.example.com/search?q=vertical&utm_source=search-suggestion"
]
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    如果要给响应体的每部分命名/加标识符，那么使用JavaScript可以这样：

    let q = 'ver';
let completions = [
  "verge",
  "vertical"
];
let descriptions = [
  "[vɜːdʒ] n. 边缘，边际 || be o...",
  "[ˈvɜːtɪkl] adj. 垂直的，直立的..."
];
let queryURLs = [
  "https://www.example.com/search?q=verge&utm_source=search-suggestion",
  "https://www.example.com/search?q=vertical&utm_source=search-suggestion"
];
let content = JSON.stringify([
  q,
  completions,
  descriptions,
  queryURLs
], null, 2);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    第三步：在网站的首页添加opensearch description标记

    在<head>中添加<link rel="search" ...>元素，也建议给<head>添加属性profile="http://a9.com/-/spec/opensearch/1.1/"以便于浏览器自动发现。

    <head profile="http://a9.com/-/spec/opensearch/1.1/">

<link rel="search" type="application/opensearchdescription+xml" href="/search.osdx" title="Word Search" />

    • 1
    • 2
    • 3

    第四步：调试站点搜索

    调试准备：你可以通过修改本机hosts文件来模拟线上环境，以便调试站点搜索。例如：在hosts文件中添加

    127.0.0.1 www.example.com

    • 1

    待本地调试通过后，还原hosts文件。

    在Chrome浏览器调试站点搜索

    以Chrome 102为例，操作步骤如下：

    1. 访问站点首页https://www.example.com

    2. 激活https://www.example.com的站点搜索功能

      最近的Chrome浏览器对发现的站点搜索要求激活(Activate)才能用（之前则不必），在"设置"/“搜索引擎”/“管理搜索引擎和站点搜索”，在底部展开未激活的，找到www.example.com的那一行，并点击"激活"

    3. 新建标签页，输入example.com，或输入exam待自动补全提示为example.com时，按Tab键（此时地址栏左边会显示"搜索Word Search"）。

    4. 键入关键词

    5. 若实现了搜索建议，则接口/api/search-suggestions会收到HTTP请求；若响应MIME/内容格式正确，则地址栏下方会显示搜索补全建议。

    6. 回车
      Chrome Site Search

    在Firefox浏览器调试站点搜索

    以Firefox 102为例，操作步骤与Chrome 102大致相同，不同的是：

    1. Firefox自动发现的站点搜索条目默认可用，无须手动激活
    2. Firefox默认通过单独地搜索框进行站点搜索，你需要自定义Firefox工具栏显示"搜索"。若要用地址栏进行站点搜索，则需要在“设置”中更改搜索方式。
    3. Firefox最多能显示8条补全建议，而Chrome最多显示3条
    4. 可以配置启动站点搜索的快捷关键字，例如@word

    Firefox Site Search

  • 相关阅读:
    2022年全国大学生数学建模竞赛E题思路
    计算机网络原理 谢希仁（第8版）第四章习题答案
    架构实战文档全套集齐了
    大数据编程实验三：SparkSQL编程
    adobe国际认证证书有用吗？
    Mybatis-Plus之使用LocalDateTime等java8新日期时间类型报错
    Cholesterol-PEG-Acid,胆固醇-聚乙二醇-羧基保持在干燥、低温环境下
    labview 写入文本到word报表(标签方法)
    Vue的插槽&Vue的过渡动画
    Sparse Merkle Tree
  • 原文地址：https://blog.csdn.net/flashdelover/article/details/125419879