VuePress 部落格優化之開啟 Algolia 全文搜尋

冴羽發表於2022-03-02
Vue優化Go

前言

在 《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，最終的效果檢視：TypeScript 中文文件。

由於 VuePress 的內建搜尋只會為頁面的標題、h2 、 h3 以及 tags 構建搜尋索引。 如果你需要全文搜尋，可則以使用 Algolia 搜尋，本篇講講如何申請以及配置 Algolia 搜尋。

Algolia

Algolia 是一個資料庫實時搜尋服務，能夠提供毫秒級的資料庫搜尋服務，並且其服務能以 API 的形式方便地佈局到網頁、客戶端、APP 等多種場景。

像 VuePress 官方文件就是使用的 Algolia 搜尋，使用 Algolia 搜尋最大的好處就是方便，它會自動爬取網站的頁面內容並構建索引，你只用申請一個 Algolia 服務，在網站上新增一些程式碼，就像新增統計程式碼一樣，然後就可以實現一個全文搜尋功能：

申請

搜尋服務申請地址：https://docsearch.algolia.com/apply/

開啟後填寫地址、郵箱和倉庫地址等資訊，這裡注意，網站需要是公開可訪問的：

填寫完後，等待一段時間（我等了三天），如果申請通過，我們就會收到郵件：

此時需要回復郵件，告訴自己就是網站的維護者，並且可以修改程式碼：

然後第二天就會收到包含 AppId 等所需資訊的郵件：

預設主題

如果你用的是 VuePress 的預設主題，VuePress 直接提供了themeConfig.algolia選項來用 Algolia 搜尋替換內建的搜尋框：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
      // 如果 Algolia 沒有為你提供 `appId` ，使用 `BH4D9OD16A` 或者移除該配置項
      appId: '<APP_ID>',
    }
  }
}

你只用如此簡單的配置即可實現全文搜尋：

搜尋為空

如果你搜任何資料，都顯示搜尋不到資料，那很可能是爬取的資料有問題，我們登陸 https://www.algolia.com/ 開啟管理後臺，點選左側選項欄裡的 Search，檢視對應的 indexName 資料，如果 Browse 這裡沒有顯示資料，那說明爬取的資料可能有問題，導致沒有生成對應的 Records：

如果沒有資料，那我們就查下爬取的邏輯，開啟爬蟲後臺： https://crawler.algolia.com/admin/crawlers/?sort=status&order=ASC&limit=20，點選對應 indexName 進入後臺：

如果顯示成功爬取，也有 Monitoring Success 的資料，但 Records 為 0，那大概是爬蟲提取資料的邏輯有問題，點選左側選項欄中的 Editor，檢視具體的爬蟲邏輯：

像 pathsToMatch 這裡如果是https://ts.yayujs.com/docs/**，但你的網址都是 [https://ts.yayujs.com/learn-typescript/**](https://ts.yayujs.com/docs/**)開頭的，那這裡大概就是會提取錯誤，修改一下，然後點選右側的資料進行測試：

如果能像這樣提取到資料，就說明沒有什麼問題了，點選右上角的Save，然後切換回 Overview，點選右上角的 Restart crawling，我們重新爬取一下資料：

如果 Records 這裡有資料，那搜尋的時候基本也會有資料了。

其他主題

如果你用的不是 VuePress 的預設主題，就比如我用的是 vuepress-theme-reco，它的搜尋欄是自己實現的，所以新增上述的配置是不會有效果的，這個時候就需要遵照郵件中的方法，手動新增 CSS 和 JavaScript 檔案，然後在載入完畢的時候呼叫提供的 API。

我們需要先修改下config.js：

module.exports = {
    head: [
      [
        'link', { href: "https://cdn.jsdelivr.net/npm/@docsearch/css@alpha", rel: "stylesheet" }
      ],
      [
        'script', { src: "https://cdn.jsdelivr.net/npm/@docsearch/js@alpha" }
      ]
    ]
}

然後修改.vuepress/enhanceApp.js檔案：

export default ({ router, Vue, isServer }) => {
  Vue.mixin({
    mounted() {
      // 不加 setTimeout 會有報錯，但不影響效果
      setTimeout(() => {
        try {
          docsearch({
            appId: "43GX903BPS",
            apiKey: "feff649032d8034cf2a636ef55d96054",
            indexName: "ts-yayujs",
            container: '.search-box',
            debug: false
          });
        } catch(e) {
          console.log(e);
        }
      }, 100)
    },
  });
};

注意其中的 container，參考 docsearch 的官方倉庫，這裡提供的不是 input 輸入框的選擇器，而是一個掛載節點，比如 div 的選擇器。

此時展示效果如下：

樣式跟現有的主題有些不統一，不過沒關係，我們可以修改 .vuepress/styles/index.styl覆蓋目前的樣式，比如我的修改程式碼為：

.search-box .DocSearch.DocSearch-Button {
    cursor: text;
    width: 10rem;
    height: 2rem;
    color: #5b5b5b;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    padding: 0 0.5rem 0 0rem;
    outline: none;
    transition: all 0.2s ease;
    background: transparent;
    background-size: 1rem;
}

.search-box .DocSearch-Button-Container {
    margin-left: 0.4rem;
}

.search-box .DocSearch-Button .DocSearch-Search-Icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: 0.1rem;
}

.search-box .DocSearch-Button-Placeholder {
    font-size: 0.8rem;
}

.search-box .DocSearch-Button-Keys {
    position: absolute;
    right: 0.1rem;
}

.search-box .DocSearch-Button-Key {
    font-size: 12px;
    line-height: 20px;
}

最終使用的效果如下：

系列文章

部落格搭建系列是我至今寫的唯一一個偏實戰的系列教程，預計 20 篇左右，講解如何使用 VuePress 搭建、優化部落格，並部署到 GitHub、Gitee、私有伺服器等平臺。本篇為第 24 篇，全系列文章地址：https://github.com/mqyqingfen...

微信：「mqyqingfeng」，加我進冴羽唯一的讀者群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章