Docusaurus 本地搜索插件使用教程

Docusaurus 本地搜索插件使用教程

docusaurus-search-localOffline / Local Search for Docusaurus v2. Try it live at:项目地址:https://gitcode.com/gh_mirrors/do/docusaurus-search-local

项目介绍

Docusaurus 本地搜索插件(docusaurus-search-local)是一个为 Docusaurus 网站提供本地搜索功能的插件。它允许用户在不需要外部服务的情况下,直接在网站上进行搜索,从而提高用户体验和搜索效率。该插件支持中文和其他多种语言,适用于各种基于 Docusaurus 构建的文档站点。

项目快速启动

安装插件

首先,你需要在你的 Docusaurus 项目中安装该插件。你可以通过 npm 或 yarn 进行安装:

npm install @cmfcmf/docusaurus-search-local

或者

yarn add @cmfcmf/docusaurus-search-local

配置插件

安装完成后,你需要在 docusaurus.config.js 文件中添加插件配置:

module.exports = {
  // ... 其他配置
  plugins: [
    [
      '@cmfcmf/docusaurus-search-local',
      {
        // 可选配置项
        language: 'zh', // 支持中文搜索
        indexDocs: true,
        indexBlog: true,
        indexPages: false,
      },
    ],
  ],
};

启动项目

配置完成后,你可以启动你的 Docusaurus 项目,查看本地搜索功能是否正常工作:

npm run start

或者

yarn start

应用案例和最佳实践

应用案例

  • 技术文档网站:许多技术文档网站使用 Docusaurus 构建,通过集成本地搜索插件,用户可以快速找到所需信息,提高阅读效率。
  • 开源项目文档:开源项目通常需要详细的文档支持,本地搜索插件可以帮助开发者快速定位到相关文档内容。

最佳实践

  • 多语言支持:确保配置中设置了正确的语言选项,以便支持多语言搜索。
  • 定期更新:随着项目的发展,定期更新插件版本,以确保搜索功能的稳定性和性能。

典型生态项目

Docusaurus 本地搜索插件是 Docusaurus 生态系统中的一个重要组成部分。以下是一些与该插件相关的典型生态项目:

  • Docusaurus:一个现代的静态网站生成器,用于构建文档网站。
  • Algolia DocSearch:一个流行的文档搜索服务,但需要外部服务支持,而本地搜索插件提供了无需外部依赖的解决方案。

通过集成这些生态项目,你可以构建一个功能丰富、用户体验良好的文档网站。

docusaurus-search-localOffline / Local Search for Docusaurus v2. Try it live at:项目地址:https://gitcode.com/gh_mirrors/do/docusaurus-search-local

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
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; ``` 上述代码仅供参考,具体实现还需要根据自己的需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柯璋旺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值