跳到主要内容

添加lunr本地搜索支持

本文介绍如何向docusaurus中添加搜索支持,搜索支持插件使用docusaurus-lunr-search。并介绍如何增加中文语言支持,以及配置过程中出现的一些问题及问题的处理方案。

安装lunr

npm i docusaurus-lunr-search  --save

添加配置

docusaurus.config.ts
{
plugins: [
[
'docusaurus-lunr-search',
{
languages: ['en']
}
]
]
}
js

中文支持

中文支持依赖:@node-rs/jieba,如果不添加此包,直接添加中文支持,会报包确实的错误。

Error: Cannot find module '@node-rs/jieba'
Require stack:
- H:\WebstormProjects\jaune162-blog-docusaurus\node_modules\lunr-languages\lunr.zh.js
- H:\WebstormProjects\jaune162-blog-docusaurus\node_modules\docusaurus-lunr-search\src\utils.js
- H:\WebstormProjects\jaune162-blog-docusaurus\node_modules\docusaurus-lunr-search\src\index.js
- H:\WebstormProjects\jaune162-blog-docusaurus\node_modules\@docusaurus\utils\lib\moduleUtils.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:121:18)
at H:\WebstormProjects\jaune162-blog-docusaurus\node_modules\lunr-languages\lunr.zh.js:33:30
at Object.<anonymous> (H:\WebstormProjects\jaune162-blog-docusaurus\node_modules\lunr-languages\lunr.zh.js:38:2)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'H:\\WebstormProjects\\jaune162-blog-docusaurus\\node_modules\\lunr-languages\\lunr.zh.js',
'H:\\WebstormProjects\\jaune162-blog-docusaurus\\node_modules\\docusaurus-lunr-search\\src\\utils.js',
'H:\\WebstormProjects\\jaune162-blog-docusaurus\\node_modules\\docusaurus-lunr-search\\src\\index.js',
'H:\\WebstormProjects\\jaune162-blog-docusaurus\\node_modules\\@docusaurus\\utils\\lib\\moduleUtils.js'
]
}

[INFO] Docusaurus version: 3.1.1
Node version: v18.17.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

首先安装 @node-rs/jieba

npm i @node-rs/jieba --save

lunr中中文支持的语言名称为:cn,然后修改配置为:

docusaurus.config.ts
{
plugins: [
[
'docusaurus-lunr-search',
{
languages: ['en', 'cn']
}
]
]
}
js

搜索框一直处于Loading状态的问题

注意

此插件开发环境不能使用,只能在生产环境使用。开发环境搜索框会一直处于 Loading 状态。

如果想要在开发环境测试,可以按照以下步骤进行

npm run build
npm run serve