zoukankan      html  css  js  c++  java
  • 前端 实现 opensearch功能 (umi项目中如何实现)

    一 什么是 opensearch ?

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

    第二步: 按Tab键

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

    二 一般项目使用opensearch 很简单

    1.第一步,新建一个xml文件

    <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 为搜索的内容

    2.第二步,在html文件head标签中创建一个 link标签将 前面的xml文件引入即可

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

    3.第三步:项目上线之后,即可正常使用功能

    三 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函数

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

    然后打包上线,文件完美解决。

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

  • 相关阅读:
    beeframework开发笔记1
    CentOS 6.0最小化编译安装Nginx+MySQL+PHP+Zend
    (转)Android-Mac电脑如何进行APK反编译-使用apktool、jd-gui
    (转)【Android测试工具】03. ApkTool在Mac上的安装和使用(2.0版本)
    淘宝PHPSDK2.0 剔除 lotusphp框架---兄弟连教程
    (转载)postgresql navicat 客户端连接验证失败解决方法:password authentication failed for user
    (转载)CentOS6下 源代码方式安装openERP7.0
    在阿里云 centos 6.3上面安装php5.2(转)
    php自动转换pfx到pem和cer(dem格式)到pem
    WebSocket获取httpSession空指针异常的解决办法
  • 原文地址:https://www.cnblogs.com/honkerzh/p/14062561.html
Copyright © 2011-2022 走看看