跳至主要内容

站內搜尋

Algolia DocSearch (官方推薦)​

申請條件​

網站添加搜索功能方案，Algolia DocSearch是Docusaurus官方推薦方式，免費，但申請有一些條件：

  • 必須是網站的所有者，或至少有權更新內容，因為需要置入一段 Javascript啟動DocSearch。

  • 網站必須是公開的，不提供服務給需要身份驗證或是私有網路環境。

  • 網站必須是開源項目的技術文檔或技術部落格，商業內容不提供索引。

  • 網站必須已準備就緒，具有一些內容，不提供服務給空網站或充滿假內容的網站。

手動爬取​

如果不符合免費托管的要求，也可以自己建立爬蟲運行，以下是相關文章分享如何在Docusaurus中建立Algolia搜尋功能：

設置​

我在2022年12月25日申請Algolia DocSearch，之後就沒有下文，加上也自覺沒有符合要求的申請條件，所以後來是用Google程式化搜尋引擎。

沒有想到在2023年2月1日收到回信說可以開始使用，老實說，有嚇到，因為其中一個條件必須是技術文檔或技術部落格，唯一比較有關的就是寫怎麼設置這個網站的一系列文章，但怎麼看都覺得技術含量很低。

所以一直以為我的網站是美食部落格...這裡真的不是美食部落格嗎...

設置方法很簡單，就把appId、apiKey、indexName寫到docusaurus.config.js就好了，如果哪天Algolia DocSearch覺得這裡是美食部落格，再改回Google程式化搜尋引擎。

docusaurus.config.js
themeConfig:
  /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
  ({
    algolia: {
      appId: 'YOUR_APP_ID',
      apiKey: 'YOUR_SEARCH_API_KEY',
      indexName: 'YOUR_INDEX_NAME',
    },
  }),

Google Programmable Search Engine​

因為最初申請Algolia DocSearch沒有回應，再加上不會使用Docker運行爬蟲，所以一開始是用Google程式化搜尋引擎。

缺點​

Google Programmable Search Engine(Google程式化搜尋引擎)的前身是Google Custom Search(Google自訂搜尋)，免費，但最大的缺點就是搜尋時會顯示Google廣告，但你可以添加自己的Google廣告。

優點​

使用Google程式化搜尋引擎，撇除廣告，優點是無搜尋次數限制，且搜尋結果除了文字結果外，也能夠呈現圖片結果。

網站很大一部分是食記，雖然沒有很準確，但能夠用圖片呈現搜尋結果滿方便的。

備註

我看了留言才知道，原來還有其他的搜索工具，後來發現其實官網在社區精選有寫：

因為Google程式化搜尋引擎用的還算習慣，加上後來Algolia DocSearch通過申請，就沒有再花時間研究怎麼使用上面這些資源。

設置​

如何把Google程式化搜尋引擎提供的代碼添加到指定的位置是參考這幾篇：

以下是我的方法，可以實現站內搜尋，但老話一句，如果觀念或代碼有錯誤就只能將錯就錯。

  1. 建立站內搜尋的頁面，cx=XXXXXXXXXXXXXXXXX，要填自己的Google程式化搜尋引擎ID。
src/pages/search.js
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';

export default function Search() {
    return (
      <Layout title="搜尋" description="站內搜尋">
          <Head>
            <script src="https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXXX" async>
            </script>
          </Head>
            <main>
              <div class="gcse-search"></div>
          </main>
      </Layout>
    );
  }
  1. 在docusaurus.config.js的navbar添加搜尋功能，因為我要用放大鏡圖片代替文字搜尋，所以不使用label屬性。
docusaurus.config.js
themeConfig:
  /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
  ({
    navbar: {
      items: [
        {
        href: '/search',
        position: 'right',
        className:'searchIcon',
        'aria-label': '站內搜尋',
        }
      ],
    },
  }),
  1. 下載一個免費的放大鏡Icon，用::before讓圖片顯示。
src/css/custom.css
.searchIcon::before{
  background: url(@site/static/img/search.svg) center no-repeat;
  content:"";
  display: flex;
  height: 20px;
  width: 20px;
}
[data-theme='dark'] .searchIcon::before{
  background: url(@site/static/img/search_dark.svg) center no-repeat;
}
@media (max-width:996px){
  div.navbar__items.navbar__items--right>*{
    display: block;
    position: inherit;
  }
}