VuePress使用Algolia實(shí)現(xiàn)全文搜索
引言
Algolia 為構(gòu)建者提供構(gòu)建世界級(jí)體驗(yàn)所需的搜索和推薦服務(wù)。Algolia 是一個(gè)數(shù)據(jù)庫(kù)實(shí)時(shí)搜索服務(wù),能夠提供毫秒級(jí)的數(shù)據(jù)庫(kù)搜索服務(wù),并且其服務(wù)能以 API 的形式方便地布局到網(wǎng)頁(yè)、客戶(hù)端、APP 等多種場(chǎng)景。
VuePress 官方文檔就有 Algolia 搜索插件,可以直接安裝使用,使用 Algolia 搜索最大的好處就是方便,它會(huì)自動(dòng)爬取網(wǎng)站的頁(yè)面內(nèi)容并構(gòu)建索引,你只用申請(qǐng)一個(gè) Algolia 授權(quán)服務(wù),在網(wǎng)站上添加一些代碼,就可以像添加統(tǒng)計(jì)代碼一樣,實(shí)現(xiàn)一個(gè)全文搜索功能了。
為了給網(wǎng)站再加點(diǎn)靈魂實(shí)現(xiàn)一個(gè)這樣的全文搜索功能,剛好今天有空且申請(qǐng)的Algolia也已通過(guò),官網(wǎng)已經(jīng)將 AppID 等信息發(fā)郵件通知了,那說(shuō)干就干吧,還得是擼起袖子加油干!
確認(rèn)眼神
好不好用,那得上圖,有圖有真相,實(shí)實(shí)在在的效果出來(lái)了,坑還是有的但是幫大家走一下,避免了好些冤枉路,具體我也會(huì)在文中加以說(shuō)明的。
先看導(dǎo)航圖

再看搜索圖

申請(qǐng)授權(quán)
已經(jīng)確認(rèn)過(guò)眼神??了,那么這就是你要用的,那怎么用呢,不可能直接網(wǎng)上一搜代碼一找就能用的,但凡商業(yè)的東西,多少還是會(huì)有些限制的。
第一步先申請(qǐng)授權(quán),申請(qǐng)地址:docsearch

打開(kāi)后填寫(xiě)網(wǎng)站地址、郵箱和倉(cāng)庫(kù)地址等信息,然后勾選上下面三項(xiàng),并提交。之后就靜待郵件,一般兩三天就都會(huì)有回復(fù)的。
注意: 如果你沒(méi)有注冊(cè)過(guò)賬號(hào),這里官網(wǎng)會(huì)用這個(gè)郵箱幫你注冊(cè)賬號(hào),且網(wǎng)站需要是公開(kāi)可訪(fǎng)問(wèn)的 如果你網(wǎng)站不是他們要求的類(lèi)型的,可以先搭建個(gè)文檔類(lèi)型的再進(jìn)行申請(qǐng)。
如果申請(qǐng)通過(guò),我們就會(huì)收到郵件,內(nèi)容如下:
官方郵箱地址:support@algolia.com

根據(jù)文中內(nèi)容,回復(fù)確認(rèn)你是站長(zhǎng)網(wǎng)站的維護(hù)者并可以更改代碼并簡(jiǎn)單說(shuō)明要用 DocSearch 產(chǎn)品即可,之后就會(huì)得到官方發(fā)送的 AppID 等信息,內(nèi)容如下:

通過(guò) 文中的邀請(qǐng)鏈接,就可以設(shè)置密碼,然后用你的郵箱登錄就可以了。algolia 登錄頁(yè)
實(shí)施部署
vuepress 官方有 docsearch 插件相關(guān)的文檔,? 文檔傳送門(mén),有文檔不見(jiàn)得就能不踩坑的一次成功!有些東西還需要特別說(shuō)明下的。
安裝方法:
// 安裝
npm i -D @vuepress/plugin-docsearch@next
// 配置 vuepress/docs/.vuepress/config.js
const { docsearchPlugin } = require('@vuepress/plugin-docsearch')
module.exports = {
plugins: [
docsearchPlugin({
// 配置項(xiàng) 配置上申請(qǐng)下來(lái)的 apiKey、indexName、appId
apiKey: '',
indexName: '',
appId: '',
placeholder: '搜索文檔',
translations: {
button: {
buttonText: '搜索文檔',
},
}
}),
],
}
注意:安裝的插件版本,要同使用的 vuepress 版本保持一致,否則會(huì)報(bào)錯(cuò)不能用。尤其是早期創(chuàng)建的項(xiàng)目,現(xiàn)在直接按照文檔安裝最新版本的插件,就可能會(huì)存在問(wèn)題。
就這么簡(jiǎn)單么,so easy !當(dāng)你以為一切順利萬(wàn)事大吉的時(shí)候,然而,很可能你的全文搜索還不可以用。可能一搜還都是找不到結(jié)果,那這是為何呢,文章還未結(jié)束,配置還在進(jìn)行,且往下看!
調(diào)試爬取
如果你搜任何數(shù)據(jù),都顯示搜索不到數(shù)據(jù),那很可能是爬取的數(shù)據(jù)有問(wèn)題,我們登陸 www.algolia.com/ 打開(kāi)管理后臺(tái),點(diǎn)擊左側(cè)選項(xiàng)欄里的 Search,查看對(duì)應(yīng)的 index 數(shù)據(jù),如果 Browse 這里沒(méi)有顯示數(shù)據(jù),那說(shuō)明爬取的數(shù)據(jù)可能有問(wèn)題,導(dǎo)致沒(méi)有生成對(duì)應(yīng)的 Records:

這個(gè)時(shí)候要使用官方工具進(jìn)行調(diào)試,調(diào)試工具地址,打開(kāi)調(diào)試臺(tái),打開(kāi) Overview 菜單。如果顯示成功爬取,也有 Monitoring Success 的數(shù)據(jù),但 Records 為 0,那大概是爬蟲(chóng)提取數(shù)據(jù)的邏輯有問(wèn)題,點(diǎn)擊左側(cè)選項(xiàng)欄中的 Editor,查看具體的爬蟲(chóng)邏輯:

打開(kāi) Editor 菜單,可以看到調(diào)試爬蟲(chóng)代碼的界面。這里可以根據(jù) vuepress 官方提供的模版,看著調(diào)整。

vuepress 官方爬蟲(chóng)配置示例:
主要代碼貼出來(lái),具體詳細(xì)的,大家直接轉(zhuǎn)到 docsearch 插件文檔

new Crawler({
rateLimit: 8,
// 這是 Algolia 開(kāi)始抓取網(wǎng)站的初始地址
// 如果你的網(wǎng)站被分為數(shù)個(gè)獨(dú)立部分,你可能需要在此設(shè)置多個(gè)入口鏈接
startUrls: ["https://docs.ycsnews.com/"],
renderJavaScript: false,
// 如果你在使用 Sitemap 插件 (如: vuepress-plugin-sitemap2),你可以提供 Sitemap 鏈接
sitemaps: ["https://docs.ycsnews.com/sitemap.xml"],
ignoreCanonicalTo: true,
// 這是 Algolia 抓取 URL 的范圍 沒(méi)有特殊要求就全站抓取
discoveryPatterns: ["https://docs.ycsnews.com/**"],
// 爬蟲(chóng)執(zhí)行的計(jì)劃時(shí)間,可根據(jù)文檔更新頻率設(shè)置
schedule: "at 11:50 every 1 day",
actions: [
{
// 使用適當(dāng)?shù)拿Q(chēng)為索引命名 申請(qǐng)授權(quán)的時(shí)候就會(huì)有的
indexName: "ycsnews", // 默認(rèn)會(huì)填好 不是自己的可以修改下
// 索引生效的路徑
pathsToMatch: ["https://docs.ycsnews.com/**"],
// 控制 Algolia 如何抓取你的站點(diǎn)
recordExtractor: ({ helpers }) => {
return helpers.docsearch({
// Algolia 初次默認(rèn)的可能都存在問(wèn)題,所以這個(gè)還是根據(jù) vuepress 官方提供的,或者自己審查元素查找匹配節(jié)點(diǎn)進(jìn)行修改
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: "",// 默認(rèn)會(huì)填好 不是自己的可以修改下
apiKey: "", // 默認(rèn)會(huì)填好 不是自己的可以修改下
});
配置完成后,點(diǎn)擊右上角的 save 進(jìn)行保存在;然后找個(gè)文檔的鏈接,測(cè)試下,看是否能成功,成功則進(jìn)行下一步,否則繼續(xù)調(diào)整抓取規(guī)則,指導(dǎo)能抓取成功!如下圖,多測(cè)幾個(gè)鏈接,保證都可用。

鏈接測(cè)試完成后,返回到 Overview 菜單, 點(diǎn)擊右上角的 Restart crawling 按鈕,進(jìn)行抓取,成功后,下面的 Indices 欄會(huì)顯示 Records 數(shù),此時(shí)再去自己的網(wǎng)站試試,應(yīng)該就可以了,如果不行,就重復(fù)執(zhí)行下,再等一等再試!

等到看到類(lèi)似這樣的效果圖,就可以了,至于其他高級(jí)的功能,就自行開(kāi)發(fā),好好利用吧!

總結(jié)回顧
對(duì)于 vuepress 來(lái)說(shuō),就是安裝個(gè)插件配置參數(shù)的事,可還是讓人耽誤了好些時(shí)間。官方文檔中并未對(duì)常見(jiàn)的一些問(wèn)題予以說(shuō)明,還需咱們自己踩坑,希望大家也能將自己日常踩的坑分享出來(lái),避免更多的人,無(wú)休止的耗費(fèi)精力。祝大家一切順利,所踩之坑,皆能被填平!據(jù)說(shuō),點(diǎn)贊加關(guān)注的人都被領(lǐng)導(dǎo)加雞腿了!??
以上就是VuePress使用Algolia實(shí)現(xiàn)全文搜索的詳細(xì)內(nèi)容,更多關(guān)于VuePress Algolia全文搜索的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解析vue data不可以使用箭頭函數(shù)問(wèn)題
這篇文章主要介紹了vue data不可以使用箭頭函數(shù)問(wèn)題,本文通過(guò)源碼解析給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue項(xiàng)目中定時(shí)器無(wú)法清除的原因解決
頁(yè)面有定時(shí)器,并且定時(shí)器在離開(kāi)頁(yè)面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無(wú)法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)
這篇文章主要介紹了Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
關(guān)于vue-cli-service:command?not?found報(bào)錯(cuò)引發(fā)的實(shí)戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于vue-cli-service:command?not?found報(bào)錯(cuò)引發(fā)的相關(guān)資料,文中通過(guò)實(shí)例代碼將解決的過(guò)程介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)
這篇文章主要為大家介紹了解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue 項(xiàng)目打包通過(guò)命令修改 vue-router 模式 修改 API 接口前綴
這篇文章主要介紹了vue 項(xiàng)目打包通過(guò)命令修改 vue-router 模式 修改 API 接口前綴的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-06-06
vue 中 beforeRouteEnter 死循環(huán)的問(wèn)題
這篇文章主要介紹了vue beforeRouteEnter 死循環(huán)的問(wèn)題,在文章末尾給大家補(bǔ)充介紹了vue中beforeRouteEnter使用的誤區(qū),需要的朋友可以參考下2019-04-04

