【Docusaurus】在 Docusaurus 新增搜尋功能

在前面一篇 【Docusaurus】在 Docusaurus 導入 Algolia 搜尋 有提到可以使用 Algolia 來實作搜尋效果，雖然是官方推薦的，但如果只是個人部落格，很難審核通過。

最近來發現，除了 Algolia 外，官方也有推薦幾個開發者做好的搜尋套件，其中 @easyops-cn/docusaurus-search-local 為最多人使用的套件。

這邊推薦的原因還有因為這個套件是中國開發者開發的，所以有支援中文搜尋，而且畫面跟 Algolia 也很像，所以如果不想設定 Alogolia，可以考慮這個套件～

安裝

npm i @easyops-cn/docusaurus-search-local

設定

在 docusaurus.config.js 中新增 plugins 設定：

const config = {
  themes: [
    [
      "@easyops-cn/docusaurus-search-local",
      {
        hashed: true,
        language: ["en", "zh"],
        highlightSearchTermsOnTargetPage: true,
        explicitSearchResultPath: true,
      },
    ],
  ],
};

官方有提供很多客製化的設定，可以參考 官方說明。

比起 Algolia，它有一個 Highlight 的功能，可以在搜尋結果中，將關鍵字標示出來，這個功能我還蠻喜歡的！