在自己的博客上启用 Tab 键搜索

Chrome 浏览器有一个功能, 在地址栏输入域名后按下 Tab 键, 就可进入搜索状态. 这让我们很方便地搜索一个网站的内容.

这个功能称作 Tab to Search. 当然不是每个网站都支持, 毕竟不同网站的搜索接口都不一样. 不过, 这个功能并不是 Chrome 专门为一些知名网站做的适配, 而是通过一个开放性标准 OpenSearch description format 实现的. 只要你的网站符合这个规范就能支持 Tab to Search.

实现起来非常简单. 首先在网站主页的 <head> 标签里加一个链接, 指向一个 OpenSearch description.

1
2
3

<head>
    <link rel="search" type="application/opensearchdescription+xml" title="Luyu's Blog" href="/opensearch.xml">
</head>

接着创建一个 OpenSearch description. 在这个例子中我们需要在网站根目录创建一个 opensearch.xml.

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>Luyu's Blog</ShortName>
    <Url type="text/html" template="https://luyuhuang.tech/?search={searchTerms}"/>
</OpenSearchDescription>

其中 <Url> 标签指定搜索链接的模版, {searchTerms} 表示搜索的关键词. OpenSearch description 还支持更多配置字段, 详细格式参考它的文档. 不过对于 Tab to Search, 这样就足够了.

我的博客是静态网站, 搜索也是纯前端行为. 所以我还要做一些处理, 读取 URL 的 search 字段.

if (window.location.pathname === '/' && window.location.search.startsWith('?search=')) {
    var val = decodeURIComponent(window.location.search.replace(/^\?search=/, ''));
    search.onInputNotEmpty(val);
}