docusaurus如何添加一個搜索功能

更新時間：2024年04月19日 09:16:05 作者：flydean程序那些事

這篇文章主要介紹了docusaurus如何添加一個搜索功能,本文通過實例圖文相結(jié)合給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧

正常情況的申請

按照docusaurus官方文檔上說的，當(dāng)我們需要搜索的時候，打開https://docsearch.algolia.com/apply/填一下申請，提交就行了。

但是可惜的是，我填好資料，點這個join the program很多次了，就是沒有反應(yīng)。

怎么辦呢？我仔細(xì)檢查了它的官方文檔，看他的描述說是需要等待2個星期。但是2個星期實在太久了，在我們只爭朝夕的今天，怎么行。

還好，我看到它還有一種手動上傳的辦法，笨是笨了點，總比沒有的好。那就開始吧。

手動上傳

首先我們得去Algolia上注冊一個賬號，然后在這里需要創(chuàng)建一個應(yīng)用：

應(yīng)用的旁邊，需要創(chuàng)建一個index用來存儲搜索數(shù)據(jù)：

這樣，前期的準(zhǔn)備工作就做好了。

再在api設(shè)置中找到APPLICATION_ID和API_KEY。把他們保存到.env文件中：

APPLICATION_ID=YOUR_APP_ID
API_KEY=YOUR_API_KEY

注意，這里的API_KEY最好是Admin API Key,因為會有一些權(quán)限需要。

如果是Admin API Key的話，記得不要分享給別人，這個key的權(quán)限比較大，可以刪除和更新你的index數(shù)據(jù)。

設(shè)置配置文件

接下來，我們還需要一個配置文件。用來配置爬蟲信息。下面是一個最基本的配置信息。

{
  "index_name": "example",
  "start_urls": ["https://www.example.com/docs"],
  "selectors": {
    "lvl0": "#content header h1",
    "lvl1": "#content article h1",
    "lvl2": "#content section h3",
    "lvl3": "#content section h4",
    "lvl4": "#content section h5",
    "lvl5": "#content section h6",
    "text": "#content header p,#content section p,#content section ol"
  }
}

其中index_name就是我們剛剛在網(wǎng)站上創(chuàng)建的index_name。當(dāng)DocSearch scraper程序跑起來的時候，你會發(fā)現(xiàn)有一個臨時的index_name + _tmp 索引被創(chuàng)建。

別擔(dān)心，在程序執(zhí)行完畢之后，會把這個tmp index會替換最終的index。

start_urls包含的是要開始爬取的鏈接地址。爬蟲會循環(huán)爬取鏈接里面的a標(biāo)簽，除非是遇到了stop_urls。另外爬蟲不會爬取其他域名的鏈接。

selectors是用于創(chuàng)建記錄層次結(jié)構(gòu)的所有 CSS 選擇器。其中text是強(qiáng)制，必須要有的。

如果你對不同的url有不同的selector方案，那么可以給不同的url配置不同的selectors_key,如下所示：

{
  "start_urls": [
    {
      "url": "http://www.example.com/docs/faq/",
      "selectors_key": "faq"
    },
    {
      "url": "http://www.example.com/docs/"
    }
  ],
  […],
  "selectors": {
    "default": {
      "lvl0": ".docs h1",
      "lvl1": ".docs h2",
      "lvl2": ".docs h3",
      "lvl3": ".docs h4",
      "lvl4": ".docs h5",
      "text": ".docs p, .docs li"
    },
    "faq": {
      "lvl0": ".faq h1",
      "lvl1": ".faq h2",
      "lvl2": ".faq h3",
      "lvl3": ".faq h4",
      "lvl4": ".faq h5",
      "text": ".faq p, .faq li"
    }
  }
}

好了，基本的配置就這些了。

運(yùn)行爬蟲腳本

現(xiàn)在可以運(yùn)行爬蟲腳本了，這里有兩個選擇，一是跑docker，方便快捷。二是從源代碼運(yùn)行，這個就比較麻煩了。

這里我只是希望博客可以有搜索功能，所以源碼什么的就算了吧，我們直接跑docker命令：

run -it --env-file=.env -e "CONFIG=$(cat flydean.conf | jq -r tostring)" algolia/docsearch-scraper

過一會就運(yùn)行起來了。但是我們看看日志：

DocSearch: http://www.flydean.com/07-python-module/ 0 records)
DocSearch: http://www.flydean.com/08-python-io/ 0 records)
DocSearch: http://www.flydean.com/09-python-error-exception/ 0 records)
DocSearch: http://www.flydean.com/06-python-data-structure/ 0 records)

Crawling issue: nbHits 0 for myblog

nb_hits表示的是DocSearch 提取和索引的記錄數(shù)。

怎么是0 records?難道什么都沒有爬到？

直覺是我的start_urls不太對，我們把它換成sitemap.xml再試一次：

{
  "sitemap_urls": ["http://www.example.com/docs/sitemap.xml"]
}

還是同樣的錯誤。

沒辦法，再去仔細(xì)讀一下配置文件的說明。

終于發(fā)現(xiàn)了問題，原來這里的selectors寫的有問題，#content header h1表示的是在ID為content的元素內(nèi)部，尋找所有屬于header類的元素，并在這些元素內(nèi)部尋找所有的<h1>元素。但是在docusaurus V3版本中已經(jīng)發(fā)生了變化。

我們把它改寫成這樣：

  "selectors": {
    "lvl0": {
      "selector": ".menu__link--sublist.menu__link--active",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": "header h1",
    "lvl2": "article h2",
    "lvl3": "article h3",
    "lvl4": "article h4",
    "lvl5": "article h5",
    "lvl6": "article h6",
    "text": "article p, article li"
  },

再運(yùn)行一次，這次終于有數(shù)據(jù)了。

回到網(wǎng)站上看看，已經(jīng)有數(shù)據(jù)上傳上來了：

好了，我們在docusaurus.config.ts中配置一下，看看效果：

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: 'YOUR_INDEX_NAME',
        // Optional: see doc section below
        contextualSearch: true,
        // Optional: Algolia search parameters
        searchParameters: {},
        // Optional: path for search page that enabled by default (`false` to disable it)
        searchPagePath: 'search',
        //... other Algolia params
      },

我們在網(wǎng)站上試試效果：