Skip to main content

検索機能をつける

インストール＋設定​

ローカルサーチというのであれば外部ライブラリから使用可能

bash
npm install --save @easyops-cn/docusaurus-search-local
docusaurus.config.ts
const config: Config = {
  ...
  themes: [
    ...
    // ----- ↓ 追加 --------
    [
      '@easyops-cn/docusaurus-search-local',
      {
        hashed: true,
        docsRouteBasePath: '/',
        language: ['en', 'ja'],
        highlightSearchTermsOnTargetPage: true,
        explicitSearchResultPath: true,
        indexPages: true,
        searchResultLimits: 10,
      }
    ],
  ],
};

→ これで、検索ボックスが出れば OK

日本語対応​

ts
tokenizer: 'full', // ← 日本語対応？
  • npm install @cmfcmf/docusaurus-search-local ← こっち用のオプションであって
  • npm uninstall @easyops-cn/docusaurus-search-local ← こっちではサポートしてないらしい

iOS での検索時に拡大されてしまう件の対策​

16px 未満だとにゅっと拡大されてしまうので、それを回避

css
input.navbar__search-input {
  font-size: 16px !important;
}

参考. 公式のドキュメントページで使われているのは？​

  • algolia という、有料で従量課金のサービスらしい