docusaurus中本地搜索如何支持中文搜索,不使用algolia的情况下
时间: 2024-02-03 07:14:03 浏览: 30
Docusaurus中本地搜索默认使用Lunr.js实现,Lunr.js支持中文搜索,但需要对其进行中文分词处理。可以使用一些第三方中文分词库,例如jieba.js、ictclas等,将内容分词后再进行索引和搜索。
以下是一些实现步骤:
1. 安装中文分词库,例如jieba.js:
```
npm install jieba
```
2. 在docusaurus.config.js中配置搜索插件:
```
module.exports = {
...
plugins: [
[
'@docusaurus/plugin-search-local',
{
// 配置搜索插件
indexDocs: true,
docsRouteBasePath: '/',
// 配置搜索库
language: ['en', 'zh'], // 支持的语言
highlightSearchTermsOnTargetPage: true,
searchResultLimits: 20,
lunr: {
tokenizerSeparator: /[\s\-/]+/, // 分词器
tokenizer: function (text) {
// 使用jieba.js分词
var Segment = require('jieba').cut;
var words = Segment(text, true);
return words;
},
},
},
],
],
...
};
```
3. 在页面中添加搜索框:
```
import React, { useState } from 'react';
import { useLocation } from '@docusaurus/router';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import SearchBar from '@theme/SearchBar';
function MySearchBar() {
const { siteConfig } = useDocusaurusContext();
const { pathname } = useLocation();
const [query, setQuery] = useState('');
return (
<SearchBar
handleSearchBarToggle={() => {}}
isSearchBarExpanded={false}
searchQuery={query}
setSearchQuery={setQuery}
searchBasePath={siteConfig.baseUrl + pathname}
placeholder={'Search'}
/>
);
}
export default MySearchBar;
```
4. 在页面中添加搜索结果展示:
```
import React, { useState } from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import SearchResults from '@theme/SearchResults';
function MySearchResults() {
const { siteConfig } = useDocusaurusContext();
const [query, setQuery] = useState('');
return (
<SearchResults
searchQuery={query}
handleSearchQueryChange={setQuery}
searchResults={[]} // 搜索结果,可以通过Lunr.js搜索得到
baseUrl={siteConfig.baseUrl}
/>
);
}
export default MySearchResults;
```
上述代码仅供参考,具体实现还需要根据自己的需求进行调整。