前端實現 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功能