---
# System prepended metadata

title: Docusaurus v3 使用 Algolia
tags: [Docusaurus]

---

# Docusaurus v3 使用 Algolia

## Algolia API Keys (需先註冊與建立項目)

![image](https://hackmd.io/_uploads/ByX-b-q0yg.png)

![image](https://hackmd.io/_uploads/rJeQ-bqRkg.png)

### Application ID 與 Search API Key

![image](https://hackmd.io/_uploads/r1VtWWq0yx.png)

### indexName 即項目名稱：

![image](https://hackmd.io/_uploads/BJCIfZ5Ayg.png)

#### Reference: https://docusaurus.io/docs/search

```javascript
      algolia: {
        // The application ID provided by Algolia
        appId: 'YOUR_APP_ID',

        // Public API key: it is safe to commit it
        apiKey: 'YOUR_SEARCH_API_KEY',

        indexName: 'oxgframe-ouhiyo',

        // Optional: see doc section below
        contextualSearch: true,

        // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
        externalUrlRegex: 'external\\.com|domain\\.com',

        // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs
        // replaceSearchResultPathname: {
        //   from: '/docs/', // or as RegExp: /\/docs\//
        //   to: '/',
        // },

        // Optional: Algolia search parameters
        searchParameters: {},

        // Optional: path for search page that enabled by default (`false` to disable it)
        searchPagePath: 'search',

        //... other Algolia params
      },
```

### 將步驟 3 (Application ID) 跟 4 (Search API Key) 複製到 **docusaurus.config.js** 的 **themeConfig** 中：

![image](https://hackmd.io/_uploads/HkA6-Wq0ye.png)

## DOCSEARCH 申請

大約半天完成回信。

https://docsearch.algolia.com/apply/

## 配置 Algolia 爬蟲 (Crawler)

### 步驟 1.

前往 [Crawler Admin](https://crawler.algolia.com/)。

### 步驟 2.

點選 Project 項目。

![image](https://hackmd.io/_uploads/BkFNTxcA1x.png)

### 步驟 3.

點選 _Editor。

![image](https://hackmd.io/_uploads/rkb-6qTlR.png)

## 注意版本配置模板

https://docsearch.algolia.com/docs/templates

這邊使用 [Docusaurus v3](https://docsearch.algolia.com/docs/templates#docusaurus-v3-template)

以上都完成後，將開始執行爬蟲。

**注意爬蟲用的 key 為預設於 _Editor 中的 key (別丟失)**

![image](https://hackmd.io/_uploads/B1e9peq0Jx.png)

### 步驟 4.

點選右上角的 "Start Crawl" 開始爬蟲，等待爬蟲完畢即完成。

![image](https://hackmd.io/_uploads/r1TR6xc01l.png)

#### ※備註：只要有修改文檔，建議都要重新爬蟲一次，避免新增的文件信息沒辦法被查找。

---

## 另外可以透過 Docker 進行爬蟲

專案根目錄下使用 Git Bash，主要執行指令 (於 Windows 上)。

```bash
winpty docker run -it --env-file=.env -e "CONFIG=$(cat ./docsearch.json | jq -r tostring)" algolia/docsearch-scraper
```

[文章教學](https://medium.com/@weiyun0912/docusaurus-%E5%9C%A8-docusaurus-%E4%B8%AD%E4%BD%BF%E7%94%A8-algolia-%E5%AF%A6%E4%BD%9C%E6%90%9C%E5%B0%8B%E5%8A%9F%E8%83%BD-4953b6ed4c34)

[DOCSEARCH 官方文件](https://docsearch.algolia.com/docs/legacy/run-your-own)


