前端实现 opensearch功能（umi项目中如何实现）

时间 2020-11-30

标签 html node react webpack web json app 函数 post 栏目 HTML 繁體版

原文原文链接

一什么是 opensearch ？

第一步：用百度举例：先输入百度的域名html

第二步：按Tab键node

第三步：输入值就能进行搜索了react

二通常项目使用opensearch 很简单

1.第一步，新建一个xml文件webpack

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>百度搜索</ShortName>
<Url type="text/html" template="https://www.baidu.com/s?wd={searchTerms}"/>
</OpenSearchDescription>

ShortName : 名称
Url：type = “text/html” - 以html的格式返回；template 写入搜索逻辑， searchTerms 为搜索的内容web

2.第二步，在html文件head标签中建立一个 link标签将前面的xml文件引入便可json

<link rel="search" type="application/opensearchdescription+xml" href="./opensearch.xml" title="云析搜索" />

3.第三步：项目上线以后，便可正常使用功能app

三 umi 建立的react项目如何开启 opensearch功能

难点一：umi没有暴露html文档，按照官方文档解决方案，在src/pages目录下建立一个名为document.ejs 的文件，本身书写模板html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云析-云样本分析平台</title>
    <link rel="search" type="application/opensearchdescription+xml" href="./opensearch.xml" title="云析" />
</head>
<body>
    <div id="root"></div>  //注意必定要写入一个根节点，id为root的div
</body>
</html>

难点二：发现 umi 并不能把document.djs 中的xml文件打包到dist目录下。 umi又隐藏了配置的，鬼知道它怎么处理 djs文件的。

方法：直接用nodejs 暴力将 xml 文件拷贝到打包后的 dist目录下，利用 postbuild钩子函数
第一步：根节点上建立 runToCopy.js 文件目的是用户文件拷贝，粘贴函数

const fs = require('fs');
let copy = (src, dst) => {
  fs.writeFileSync(dst, fs.readFileSync(src));
};
function main(argv) {
  copy(argv[0], argv[1]);
}
main(process.argv.slice(2));

第二步：配置package.json 脚本，让build以后执行改copy函数post

// package.json 配置 脚本 script
"postbuild": "node runToCopy.js ./public/opensearch.xml ./dist/opensearch.xml"

而后打包上线，文件完美解决。ui

ps ：这不是最好的办法，最好的方法仍是研究umi的webpack 如何将 xml文件直接打包到dist目录中。若有好的办法请相互交流。

前端 实现 opensearch功能 （umi项目中如何实现）

一 什么是 opensearch ？

二 通常项目使用opensearch 很简单

三 umi 建立的react项目 如何开启 opensearch功能