乐趣区

关于javascript:VuePress-博客优化之开启-Algolia-全文搜索

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中,咱们应用 VuePress 搭建了一个博客,最终的成果查看:TypeScript 中文文档。

因为 VuePress 的内置搜寻只会为页面的题目、h2、h3 以及 tags 构建搜寻索引。如果你须要全文搜寻,可则以应用 Algolia 搜寻,本篇讲讲如何申请以及配置 Algolia 搜寻。

Algolia

Algolia 是一个数据库实时搜寻服务,可能提供毫秒级的数据库搜寻服务,并且其服务能以 API 的模式不便地布局到网页、客户端、APP 等多种场景。

像 VuePress 官网文档就是应用的 Algolia 搜寻,应用 Algolia 搜寻最大的益处就是不便,它会主动爬取网站的页面内容并构建索引,你只用申请一个 Algolia 服务,在网站上增加一些代码,就像增加统计代码一样,而后就能够实现一个全文搜寻性能:

申请

搜寻服务申请地址:https://docsearch.algolia.com/apply/

关上后填写地址、邮箱和仓库地址等信息,这里留神,网站须要是公开可拜访的:

填写完后,期待一段时间(我等了三天),如果申请通过,咱们就会收到邮件:

此时须要回复邮件,通知本人就是网站的维护者,并且能够批改代码:

而后第二天就会收到蕴含 AppId 等所需信息的邮件:

默认主题

如果你用的是 VuePress 的默认主题,VuePress 间接提供了 themeConfig.algolia 选项来用 Algolia 搜寻替换内置的搜寻框:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
      // 如果 Algolia 没有为你提供 `appId`,应用 `BH4D9OD16A` 或者移除该配置项
      appId: '<APP_ID>',
    }
  }
}

你只用如此简略的配置即可实现全文搜寻:

搜寻为空

如果你搜任何数据,都显示搜寻不到数据,那很可能是爬取的数据有问题,咱们登陆 https://www.algolia.com/ 关上治理后盾,点击左侧选项栏里的 Search,查看对应的 indexName 数据,如果 Browse 这里没有显示数据,那阐明爬取的数据可能有问题,导致没有生成对应的 Records:

如果没有数据,那咱们就查下爬取的逻辑,关上爬虫后盾:https://crawler.algolia.com/admin/crawlers/?sort=status&order=ASC&limit=20,点击对应 indexName 进入后盾:

如果显示胜利爬取,也有 Monitoring Success 的数据,但 Records 为 0,那大略是爬虫提取数据的逻辑有问题,点击左侧选项栏中的 Editor,查看具体的爬虫逻辑:

pathsToMatch 这里如果是 https://ts.yayujs.com/docs/**,但你的网址都是 [https://ts.yayujs.com/learn-typescript/**](https://ts.yayujs.com/docs/**) 结尾的,那这里大略就是会提取谬误,批改一下,而后点击右侧的数据进行测试:

如果能像这样提取到数据,就阐明没有什么问题了,点击右上角的Save,而后切换回 Overview,点击右上角的 Restart crawling,咱们从新爬取一下数据:

如果 Records 这里有数据,那搜寻的时候根本也会有数据了。

其余主题

如果你用的不是 VuePress 的默认主题,就比方我用的是 vuepress-theme-reco,它的搜寻栏是本人实现的,所以增加上述的配置是不会有成果的,这个时候就须要遵循邮件中的办法,手动增加 CSS 和 JavaScript 文件,而后在加载结束的时候调用提供的 API。

咱们须要先批改下config.js

module.exports = {
    head: [
      ['link', { href: "https://cdn.jsdelivr.net/npm/@docsearch/css@alpha", rel: "stylesheet"}
      ],
      ['script', { src: "https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"}
      ]
    ]
}

而后批改 .vuepress/enhanceApp.js 文件:

export default ({router, Vue, isServer}) => {
  Vue.mixin({mounted() {
      // 不加 setTimeout 会有报错,但不影响成果
      setTimeout(() => {
        try {
          docsearch({
            appId: "43GX903BPS",
            apiKey: "feff649032d8034cf2a636ef55d96054",
            indexName: "ts-yayujs",
            container: '.search-box',
            debug: false
          });
        } catch(e) {console.log(e);
        }
      }, 100)
    },
  });
};

留神其中的 container,参考 docsearch 的官网仓库,这里提供的不是 input 输入框的选择器,而是一个挂载节点,比方 div 的选择器。

此时展现成果如下:

款式跟现有的主题有些不对立,不过没关系,咱们能够批改 .vuepress/styles/index.styl笼罩目前的款式,比方我的批改代码为:

.search-box .DocSearch.DocSearch-Button {
    cursor: text;
    width: 10rem;
    height: 2rem;
    color: #5b5b5b;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    padding: 0 0.5rem 0 0rem;
    outline: none;
    transition: all 0.2s ease;
    background: transparent;
    background-size: 1rem;
}

.search-box .DocSearch-Button-Container {margin-left: 0.4rem;}

.search-box .DocSearch-Button .DocSearch-Search-Icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: 0.1rem;
}

.search-box .DocSearch-Button-Placeholder {font-size: 0.8rem;}

.search-box .DocSearch-Button-Keys {
    position: absolute;
    right: 0.1rem;
}

.search-box .DocSearch-Button-Key {
    font-size: 12px;
    line-height: 20px;
}

最终应用的成果如下:

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程,预计 20 篇左右,解说如何应用 VuePress 搭建、优化博客,并部署到 GitHub、Gitee、公有服务器等平台。本篇为第 24 篇,全系列文章地址:https://github.com/mqyqingfen…

微信:「mqyqingfeng」,加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央,请务必给予斧正,非常感激。如果喜爱或者有所启发,欢送 star,对作者也是一种激励。

退出移动版