VuePress使用Algolia實現(xiàn)全文搜索
引言
Algolia 為構(gòu)建者提供構(gòu)建世界級體驗所需的搜索和推薦服務(wù)。Algolia 是一個數(shù)據(jù)庫實時搜索服務(wù)，能夠提供毫秒級的數(shù)據(jù)庫搜索服務(wù)，并且其服務(wù)能以 API 的形式方便地布局到網(wǎng)頁、客戶端、APP 等多種場景。
VuePress 官方文檔就有 Algolia 搜索插件，可以直接安裝使用，使用 Algolia 搜索最大的好處就是方便，它會自動爬取網(wǎng)站的頁面內(nèi)容并構(gòu)建索引，你只用申請一個 Algolia 授權(quán)服務(wù)，在網(wǎng)站上添加一些代碼，就可以像添加統(tǒng)計代碼一樣，實現(xiàn)一個全文搜索功能了。
為了給網(wǎng)站再加點靈魂實現(xiàn)一個這樣的全文搜索功能，剛好今天有空且申請的Algolia也已通過，官網(wǎng)已經(jīng)將 AppID 等信息發(fā)郵件通知了，那說干就干吧，還得是擼起袖子加油干！
確認眼神
好不好用，那得上圖，有圖有真相，實實在在的效果出來了，坑還是有的但是幫大家走一下，避免了好些冤枉路，具體我也會在文中加以說明的。
先看導(dǎo)航圖
再看搜索圖
申請授權(quán)
已經(jīng)確認過眼神??了，那么這就是你要用的，那怎么用呢，不可能直接網(wǎng)上一搜代碼一找就能用的，但凡商業(yè)的東西，多少還是會有些限制的。
第一步先申請授權(quán)，申請地址：docsearch
打開后填寫網(wǎng)站地址、郵箱和倉庫地址等信息，然后勾選上下面三項，并提交。之后就靜待郵件，一般兩三天就都會有回復(fù)的。
注意： 如果你沒有注冊過賬號，這里官網(wǎng)會用這個郵箱幫你注冊賬號，且網(wǎng)站需要是公開可訪問的 如果你網(wǎng)站不是他們要求的類型的，可以先搭建個文檔類型的再進行申請。
如果申請通過，我們就會收到郵件，內(nèi)容如下：
官方郵箱地址：support@algolia.com
根據(jù)文中內(nèi)容，回復(fù)確認你是站長網(wǎng)站的維護者并可以更改代碼并簡單說明要用 DocSearch 產(chǎn)品即可，之后就會得到官方發(fā)送的 AppID 等信息，內(nèi)容如下：
通過 文中的邀請鏈接，就可以設(shè)置密碼，然后用你的郵箱登錄就可以了。algolia 登錄頁
實施部署
vuepress 官方有 docsearch 插件相關(guān)的文檔，? 文檔傳送門，有文檔不見得就能不踩坑的一次成功！有些東西還需要特別說明下的。
安裝方法:
// 安裝
npm i -D @vuepress/plugin-docsearch@next
// 配置 vuepress/docs/.vuepress/config.js
const { docsearchPlugin } = require('@vuepress/plugin-docsearch')
module.exports = {
plugins: [
docsearchPlugin({
// 配置項 配置上申請下來的 apiKey、indexName、appId
apiKey: '',
indexName: '',
appId: '',
placeholder: '搜索文檔',
translations: {
button: {
buttonText: '搜索文檔',
},
}
}),
],
}
注意：安裝的插件版本，要同使用的 vuepress 版本保持一致，否則會報錯不能用。尤其是早期創(chuàng)建的項目，現(xiàn)在直接按照文檔安裝最新版本的插件，就可能會存在問題。
就這么簡單么，so easy ！當(dāng)你以為一切順利萬事大吉的時候，然而，很可能你的全文搜索還不可以用?？赡芤凰堰€都是找不到結(jié)果，那這是為何呢，文章還未結(jié)束，配置還在進行，且往下看！
調(diào)試爬取
如果你搜任何數(shù)據(jù)，都顯示搜索不到數(shù)據(jù)，那很可能是爬取的數(shù)據(jù)有問題，我們登陸 www.algolia.com/ 打開管理后臺，點擊左側(cè)選項欄里的 Search，查看對應(yīng)的 index 數(shù)據(jù)，如果 Browse 這里沒有顯示數(shù)據(jù)，那說明爬取的數(shù)據(jù)可能有問題，導(dǎo)致沒有生成對應(yīng)的 Records：
這個時候要使用官方工具進行調(diào)試，調(diào)試工具地址,打開調(diào)試臺，打開 Overview 菜單。如果顯示成功爬取，也有 Monitoring Success 的數(shù)據(jù)，但 Records 為 0，那大概是爬蟲提取數(shù)據(jù)的邏輯有問題，點擊左側(cè)選項欄中的 Editor，查看具體的爬蟲邏輯：
打開 Editor 菜單，可以看到調(diào)試爬蟲代碼的界面。這里可以根據(jù) vuepress 官方提供的模版，看著調(diào)整。
vuepress 官方爬蟲配置示例:
主要代碼貼出來，具體詳細的，大家直接轉(zhuǎn)到 docsearch 插件文檔
new Crawler({
rateLimit: 8,
// 這是 Algolia 開始抓取網(wǎng)站的初始地址
// 如果你的網(wǎng)站被分為數(shù)個獨立部分，你可能需要在此設(shè)置多個入口鏈接
startUrls: ["https://docs.ycsnews.com/"],
renderJavaScript: false,
// 如果你在使用 Sitemap 插件 (如: vuepress-plugin-sitemap2)，你可以提供 Sitemap 鏈接
sitemaps: ["https://docs.ycsnews.com/sitemap.xml"],
ignoreCanonicalTo: true,
// 這是 Algolia 抓取 URL 的范圍 沒有特殊要求就全站抓取
discoveryPatterns: ["https://docs.ycsnews.com/**"],
// 爬蟲執(zhí)行的計劃時間，可根據(jù)文檔更新頻率設(shè)置
schedule: "at 11:50 every 1 day",
actions: [
{
// 使用適當(dāng)?shù)拿Q為索引命名 申請授權(quán)的時候就會有的
indexName: "ycsnews", // 默認會填好 不是自己的可以修改下
// 索引生效的路徑
pathsToMatch: ["https://docs.ycsnews.com/**"],
// 控制 Algolia 如何抓取你的站點
recordExtractor: ({ helpers }) => {
return helpers.docsearch({
// Algolia 初次默認的可能都存在問題，所以這個還是根據(jù) vuepress 官方提供的，或者自己審查元素查找匹配節(jié)點進行修改
recordProps: {
lvl1: ".theme-default-content h1",
content:
".theme-default-content .theme-default-content div .theme-default-content p .theme-default-content li",
lvl0: {
selectors: ".sidebar-heading.active",
defaultValue: "Documentation",
},
lvl2: ".theme-default-content h2",
lvl3: ".theme-default-content h3",
lvl4: ".theme-default-content h4",
lvl5: ".theme-default-content h5",
lvl6: ".theme-default-content h6",
lang: "",
tags: {
defaultValue: ["v1"],
},
},
indexHeadings: true,
aggregateContent: true,
});
},
},
],
// 下面的配置基本不用修改 大致看下即可
initialIndexSettings: {
ycsnews: {
attributesForFaceting: ["type", "lang", "language", "version"],
attributesToRetrieve: [
"hierarchy",
"content",
"anchor",
"url",
"url_without_anchor",
"type",
],
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",
},
},
appId: "",// 默認會填好 不是自己的可以修改下
apiKey: "", // 默認會填好 不是自己的可以修改下
});
配置完成后，點擊右上角的 save 進行保存在；然后找個文檔的鏈接，測試下，看是否能成功，成功則進行下一步，否則繼續(xù)調(diào)整抓取規(guī)則，指導(dǎo)能抓取成功！如下圖，多測幾個鏈接，保證都可用。
鏈接測試完成后，返回到 Overview 菜單, 點擊右上角的 Restart crawling 按鈕，進行抓取，成功后，下面的 Indices 欄會顯示 Records 數(shù)，此時再去自己的網(wǎng)站試試，應(yīng)該就可以了，如果不行，就重復(fù)執(zhí)行下，再等一等再試！
等到看到類似這樣的效果圖，就可以了，至于其他高級的功能，就自行開發(fā)，好好利用吧！
總結(jié)回顧
對于 vuepress 來說，就是安裝個插件配置參數(shù)的事，可還是讓人耽誤了好些時間。官方文檔中并未對常見的一些問題予以說明，還需咱們自己踩坑，希望大家也能將自己日常踩的坑分享出來，避免更多的人，無休止的耗費精力。祝大家一切順利，所踩之坑，皆能被填平！據(jù)說，點贊加關(guān)注的人都被領(lǐng)導(dǎo)加雞腿了！??
以上就是VuePress使用Algolia實現(xiàn)全文搜索的詳細內(nèi)容，更多關(guān)于VuePress Algolia全文搜索的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了手寫一個vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實現(xiàn)，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了vue如何監(jiān)聽元素橫向滾動到最右側(cè)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了rem使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在分布式系統(tǒng)中，事務(wù)管理是一個非常重要的問題，所以本文將介紹一下Vue中如何進行分布式事務(wù)管理以及分布式事務(wù)解決方案，希望對大家有所幫助2023-06-06
這篇文章主要介紹了前端項目中的Vue、React錯誤監(jiān)聽,文章圍繞主題的相關(guān)資料展開詳細內(nèi)容介紹需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了vue的mixins屬性詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)
我們知道在vue中每個頁面都需要在路由中聲明,下面這篇文章主要給大家介紹了關(guān)于vue路由跳轉(zhuǎn)攜帶參數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
本文通過實例給大家講解了vue的toast彈窗組件功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了vue中利用iscroll.js解決pc端滾動問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02