👨?🎓博主簡介

??🏅CSDN博客專家
??🏅云計算領域優質創作者
??🏅華為云開發者社區專家博主
??🏅阿里云開發者社區專家博主
💊交流社區：運維交流社區 歡迎大家的加入！
🐋 希望大家多多支持，我們一起進步！😄
🎉如果文章對你有幫助的話，歡迎 點贊 👍🏻 評論 💬 收藏 ?? 加關注+💗

---

推薦我的網站此文章：https://liuchenyang.top/document/other/docsearch.html

簡述

文檔參考：

• VitePress官方
• VuePress 不用Algolia 全文搜索那就缺了靈魂

結合自己操作記錄來修改成vuepress-theme-hope主題的docsearch配置。

其實也有很多熱門的爬蟲搜索引擎，而Algolia的 Algolia DocSearch 是直接集成在VuePress中的，我們來看看有多么強大吧。

配置

這里配置的是vuepress主題的，最新版Hope主題自帶algolia插件，無需安裝，請在theme.ts里定位到plugins設置。

• 插件版本注意事項

如果不是最新版本，在安裝@vuepress/plugin-docsearch插件的時候需要適配當前版本，具體是如何適配自己的版本不確定，只能在package.json配置文件中去修改版本號來試，然后我安裝了個70版本的，但是配置好之后搜索有點問題，問題：搜索的結果無法點擊，然后我就一點一點往上升級到了rc74的版本，就可以了，指定升級插件版本命令為：pnpm add -D @vuepress/plugin-docsearch@2.0.0-rc.74，安裝的時候會自動刪除原版本更新成配置文件中指定的版本或指定下載的版本，如果安裝好訪問頁面空白的話，大概率就是版本的問題。

  plugins: {docsearch:({appId: "<APP_ID>",apiKey: "<API_KEY>",indexName: "<INDEX_NAME>",locales: {"/": {placeholder: "搜索文檔",translations: {button: {buttonText: "搜索文檔",buttonAriaLabel: "搜索文檔",},modal: {searchBox: {resetButtonTitle: "清除查詢條件",resetButtonAriaLabel: "清除查詢條件",cancelButtonText: "取消",cancelButtonAriaLabel: "取消",},startScreen: {recentSearchesTitle: "搜索歷史",noRecentSearchesText: "沒有搜索歷史",saveRecentSearchButtonTitle: "保存至搜索歷史",removeRecentSearchButtonTitle: "從搜索歷史中移除",favoriteSearchesTitle: "收藏",removeFavoriteSearchButtonTitle: "從收藏中移除",},errorScreen: {titleText: "無法獲取結果",helpText: "你可能需要檢查你的網絡連接",},footer: {selectText: "選擇",navigateText: "切換",closeText: "關閉",searchByText: "搜索提供者",},noResultsScreen: {noResultsText: "無法找到相關結果",suggestedQueryText: "你可以嘗試查詢",reportMissingResultsText: "你認為該查詢應該有結果？",reportMissingResultsLinkText: "點擊反饋",},},},},},}),},

注冊

由于配置還缺關鍵Key，所以還需要注冊賬號，也方便我們后期對數據進行管理

進入 Algolia官網 ，點擊 Login 注冊賬號

可以選擇 NO ACCOUNT YET? ，也可以直接用GitHub和谷歌賬號關聯注冊

注冊比較簡單，就不講了

網站打不開，掛一個梯子即可

使用

請按自己的需求，參照下面教程，選其一使用

使用方式	區別說明
官方申請	申請時需要提交鏈接、郵箱及倉庫(可選) ，等待周期較長，通過后會自動爬取，直接配置使用即可
Docker	需自備服務器且安裝好docker，有一定動手能力，需要每次手動爬取。步驟繁瑣本次不做演示
Github Actions	準備一個公開或者私密的倉庫，配置好爬蟲數據的格式，Actions自動爬取

---

官方申請

直接在 DocSearch官網，點 Apply 申請

打開后填寫網站地址、郵箱和倉庫地址（可選）等信息，然后勾選上下面三項，并提交即可。

等待跳轉成功就好，沒有跳轉，就掛個梯子

之后就靜待郵件，最快等待6-7小時，慢則半個多月，在郵件中會給我們一個邀請鏈接，復制并打開。
官方郵箱地址：support@algolia.com

申請成功發送郵件

申請成功之后，將郵件中的addId、apiKey、indexName值放到項目配置中。

就這么簡單么，so easy ！當你以為一切順利萬事大吉的時候，然而，很可能你的全文搜索還不可以用。可能一搜還都是找不到結果，那這是為何呢，文章還未結束，配置還在進行，且往下看！

調試爬取

然后我們登陸 https://dashboard.algolia.com/apps/DJTP2DCRA4/dashboard 打開管理后臺，點擊左側選項欄里的 Search，進去后會有個彈窗按鈕，點 Accept 接受即可

沒有彈窗的，去郵箱復制邀請鏈接打開應該就有了；

這樣就自動完成了Application創建；

然后查看對應的 index 數據，如果 Browse 這里沒有顯示數據，那需要點擊這里的刷新看看，有數據即可；
如果刷新之后如果還是沒有顯示數據，那說明爬取的數據可能有問題，導致沒有生成對應的 Records；

---

這個時候要使用官方工具進行調試，進入調試工具地址，打開調試臺，點擊進入爬蟲詳情；

進來之后在點擊 Overview 菜單，發現爬蟲數據是有的，但 Records 為 0，那大概是爬蟲提取數據的邏輯有問題；

點擊左側選項欄中的 Editor，查看具體的爬蟲邏輯，可以根據 vuepress 官方提供的模版參考查看問題：vuepress官方爬蟲配置，這里我是直接整個復制粘貼成官方的然后進行個別地方修改就可以了；

除了指定位置，其他不要亂改，特別是apikey不要改！和你申請的apikey不是同一個用途

如果你網址有別名解析或者重定向了，也只能用你申請時的網址

• 官方爬蟲設置

new Crawler({appId: "YOUR_APP_ID",apiKey: "YOUR_API_KEY",rateLimit: 8,startUrls: [// 這是 Algolia 開始抓取網站的初始地址// 如果你的網站被分為數個獨立部分，你可能需要在此設置多個入口鏈接"https://YOUR_WEBSITE_URL/",],sitemaps: [// 如果你在使用 Sitemap 插件 (如: @vuepress/plugin-sitemap)，你可以提供 Sitemap 鏈接"https://YOUR_WEBSITE_URL/sitemap.xml",],ignoreCanonicalTo: false,exclusionPatterns: [// 你可以通過它阻止 Algolia 抓取某些 URL],discoveryPatterns: [// 這是 Algolia 抓取 URL 的范圍"https://YOUR_WEBSITE_URL/**",],// 爬蟲執行的計劃時間，可根據文檔更新頻率設置schedule: "at 02:00 every 1 day",actions: [// 你可以擁有多個 action，特別是你在一個域名下部署多個文檔時{// 使用適當的名稱為索引命名indexName: "YOUR_INDEX_NAME",// 索引生效的路徑pathsToMatch: ["https://YOUR_WEBSITE_URL/**"],// 控制 Algolia 如何抓取你的站點recordExtractor: ({ $, helpers }) => {// 以下是適用于 vuepress-theme-hope 的默認選項選項return helpers.docsearch({recordProps: {lvl0: {selectors: [".vp-sidebar-link.active", "[vp-content] h1"],defaultValue: "Documentation",},lvl1: "[vp-content] h1",lvl2: "[vp-content] h2",lvl3: "[vp-content] h3",lvl4: "[vp-content] h4",lvl5: "[vp-content] h5",lvl6: "[vp-content] h6",content: "[vp-content] p, [vp-content] li",},recordVersion: "v3",});},},],initialIndexSettings: {// 控制索引如何被初始化，這僅當索引尚未生成時有效// 你可能需要在修改后手動刪除并重新生成新的索引YOUR_INDEX_NAME: {attributesForFaceting: ["type", "lang"],attributesToRetrieve: ["hierarchy", "content", "anchor", "url"],attributesToHighlight: ["hierarchy", "hierarchy_camel", "content"],attributesToSnippet: ["content:10"],camelCaseAttributes: ["hierarchy", "hierarchy_radio", "content"],searchableAttributes: ["unordered(hierarchy_radio_camel.lvl0)","unordered(hierarchy_radio.lvl0)","unordered(hierarchy_radio_camel.lvl1)","unordered(hierarchy_radio.lvl1)","unordered(hierarchy_radio_camel.lvl2)","unordered(hierarchy_radio.lvl2)","unordered(hierarchy_radio_camel.lvl3)","unordered(hierarchy_radio.lvl3)","unordered(hierarchy_radio_camel.lvl4)","unordered(hierarchy_radio.lvl4)","unordered(hierarchy_radio_camel.lvl5)","unordered(hierarchy_radio.lvl5)","unordered(hierarchy_radio_camel.lvl6)","unordered(hierarchy_radio.lvl6)","unordered(hierarchy_camel.lvl0)","unordered(hierarchy.lvl0)","unordered(hierarchy_camel.lvl1)","unordered(hierarchy.lvl1)","unordered(hierarchy_camel.lvl2)","unordered(hierarchy.lvl2)","unordered(hierarchy_camel.lvl3)","unordered(hierarchy.lvl3)","unordered(hierarchy_camel.lvl4)","unordered(hierarchy.lvl4)","unordered(hierarchy_camel.lvl5)","unordered(hierarchy.lvl5)","unordered(hierarchy_camel.lvl6)","unordered(hierarchy.lvl6)","content",],distinct: true,attributeForDistinct: "url",customRanking: ["desc(weight.pageRank)","desc(weight.level)","asc(weight.position)",],ranking: ["words","filters","typo","attribute","proximity","exact","custom",],highlightPreTag:'<span class="algolia-docsearch-suggestion--highlight">',highlightPostTag: "</span>",minWordSizefor1Typo: 3,minWordSizefor2Typos: 7,allowTyposOnNumericTokens: false,minProximity: 1,ignorePlurals: true,advancedSyntax: true,attributeCriteriaComputedByMinProximity: true,removeWordsIfNoResults: "allOptional",},},
});

配置完成后，點擊右上角的 save 進行保存在；然后找個自己的文檔的鏈接，粘貼到URL Tester里，點擊RUN Test測試下，看是否能成功，成功則進行下一步，否則繼續調整抓取規則，指導能抓取成功！如下圖，多測幾個鏈接，保證都可用。

鏈接測試完成后，可以在 Search Preview 里可以搜素看看，能搜索到自己的內容就可以了；

然后返回到 Overview 菜單, 點擊右上角的 Restart crawling 按鈕，重新進行抓取，爬取成功之后會發送郵件，文章少爬取的就快，成功后，下面的 Indices 欄會顯示 Records 數；

然后在返回點擊index回到algolia，看數據是否同步過來就可以了，前面做完沒問題這個同步正常也是會沒問題的；

---

網站測試搜索

此時再去自己的網站試試，應該就可以了，如果不行，就重復爬取一下數據，再等一等再試！

---

配置完成 - 總結回顧

對于 vuepress 來說，就是安裝個插件配置參數的事，可還是讓人耽誤了好些時間。官方文檔中并未對常見的一些問題予以說明，還需咱們自己踩坑，希望大家也能將自己日常踩的坑分享出來，避免更多的人，無休止的耗費精力。祝大家一切順利，所踩之坑，皆能被填平！
據說，點免費Star的人都被領導加雞腿了！😄 ToLiucyLinux私域源碼