VuePress 博客優(yōu)化之開(kāi)啟 Algolia 全文搜索

　　前言

　　在《一篇帶你用 VuePress + Github Pages 搭建博客》中，我們使用 VuePress 搭建了一個(gè)博客，最終的效果查看：TypeScript 中文文檔。

　　文檔鏈接：

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

　　Algolia

　　Algolia 是一個(gè)數據庫實(shí)時(shí)搜索服務(wù)，能夠提供毫秒級的數據庫搜索服務(wù)，并且其服務(wù)能以 API 的形式方便地布局到網(wǎng)頁(yè)、客戶(hù)端、APP 等多種場(chǎng)景。

　　像 VuePress 官方文檔就是使用的 Algolia 搜索，使用 Algolia 搜索最大的好處就是方便，它會(huì )自動(dòng)爬取網(wǎng)站的頁(yè)面內容并構建索引，你只用申請一個(gè) Algolia 服務(wù)，在網(wǎng)站上添加一些代碼，就像添加統計代碼一樣，然后就可以實(shí)現一個(gè)全文搜索功能：

　　

　　申請

　　搜索服務(wù)申請地址：

　　打開(kāi)后填寫(xiě)地址、郵箱和倉庫地址等信息，這里注意，網(wǎng)站需要是公開(kāi)可訪(fǎng)問(wèn)的：

　　填寫(xiě)完后，等待一段時(shí)間（我等了三天），如果申請通過(guò)，我們就會(huì )收到郵件：

　　

　　此時(shí)需要回復郵件，告訴自己就是網(wǎng)站的維護者，并且可以修改代碼：

　　然后第二天就會(huì )收到包含 AppId 等所需信息的郵件：

　　默認主題

　　如果你用的是 VuePress 的默認主題，VuePress 直接提供了

　　themeConfig.algolia選項來(lái)用 Algolia 搜索替換內置的搜索框：

　　<p style="margin-left: 8px;margin-right: 8px;line-height: 1.75em;"><br />//?.vuepress/config.js<br />module.exports?=?{<br />??themeConfig:?{<br />????algolia:?{<br />??????apiKey:?'',<br />??????indexName:?''<br />??????//?如果?Algolia?沒(méi)有為你提供?`appId`?，使用?`BH4D9OD16A`?或者移除該配置項<br />??????appId:?'',<br />????}<br />??}<br />}<br /></p>

　　你只用如此簡(jiǎn)單的配置即可實(shí)現全文搜索：

　　

　　搜索為空

　　如果你搜任何數據，都顯示搜索不到數據，那很可能是爬取的數據有問(wèn)題，我們登陸

　　打開(kāi)管理后臺，點(diǎn)擊左側選項欄里的 Search，查看對應的 indexName 數據，如果 Browse 這里沒(méi)有顯示數據，那說(shuō)明爬取的數據可能有問(wèn)題，導致沒(méi)有生成對應的 Records：

　　

　　如果沒(méi)有數據，那我們就查下爬取的邏輯，打開(kāi)爬蟲(chóng)后臺：，點(diǎn)擊對應 indexName 進(jìn)入后臺：

　　

　　如果顯示成功爬取，也有 Monitoring Success 的數據，但 Records 為 0，那大概是爬蟲(chóng)提取數據的邏輯有問(wèn)題，點(diǎn)擊左側選項欄中的 Editor，查看具體的爬蟲(chóng)邏輯：

　　像 pathsToMatch 這里如果是**，但你的網(wǎng)址都是[**](**)開(kāi)頭的，那這里大概就是會(huì )提取錯誤，修改一下，然后點(diǎn)擊右側的數據進(jìn)行測試：

　　如果能像這樣提取到數據，就說(shuō)明沒(méi)有什么問(wèn)題了，點(diǎn)擊右上角的Save，然后切換回 Overview，點(diǎn)擊右上角的 Restart crawling，我們重新爬取一下數據：

　　

　　如果 Records 這里有數據，那搜索的時(shí)候基本也會(huì )有數據了。

　　其他主題

　　如果你用的不是 VuePress 的默認主題，就比如我用的是 vuepress-theme-reco，它的搜索欄是自己實(shí)現的，所以添加上述的配置是不會(huì )有效果的，這個(gè)時(shí)候就需要遵照郵件中的方法，手動(dòng)添加 CSS 和 JavaScript 文件，然后在加載完畢的時(shí)候調用提供的 API。

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

　　<p style="margin-left: 8px;margin-right: 8px;line-height: 1.75em;"><br />module.exports?=?{<br />????head:?[<br />??????[<br />????????'link',?{?href:?"https://cdn.jsdelivr.net/npm/@docsearch/css@alpha",?rel:?"stylesheet"?}<br />??????],<br />??????[<br />????????'script',?{?src:?"https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"?}<br />??????]<br />????]<br />}<br /></p>

　　然后修改.vuepress/enhanceApp.js文件：

　　<p style="margin-left: 8px;margin-right: 8px;line-height: 1.75em;"><br />export?default?({?router,?Vue,?isServer?})?=>?{<br />??Vue.mixin({<br />????mounted()?{<br />??????//?不加?setTimeout?會(huì )有報錯，但不影響效果<br />??????setTimeout(()?=>?{<br />????????try?{<br />??????????docsearch({<br />????????????appId:?"43GX903BPS",<br />????????????apiKey:?"feff649032d8034cf2a636ef55d96054",<br />????????????indexName:?"ts-yayujs",<br />????????????container:?'.search-box',<br />????????????debug:?false<br />??????????});<br />????????}?catch(e)?{<br />??????????console.log(e);<br />????????}<br />??????},?100)<br />????},<br />??});<br />};<br /></p>

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

　　此時(shí)展示效果如下：

　　

　　樣式跟現有的主題有些不統一，不過(guò)沒(méi)關(guān)系，我們可以修改 .vuepress/styles/index.styl覆蓋目前的樣式，比如我的修改代碼為：

　　<p style="margin-left: 8px;margin-right: 8px;line-height: 1.75em;"><br />.search-box?.DocSearch.DocSearch-Button?{<br />????cursor:?text;<br />????width:?10rem;<br />????height:?2rem;<br />????color:?#5b5b5b;<br />????border:?1px?solid?var(--border-color);<br />????border-radius:?0.25rem;<br />????font-size:?0.9rem;<br />????padding:?0?0.5rem?0?0rem;<br />????outline:?none;<br />????transition:?all?0.2s?ease;<br />????background:?transparent;<br />????background-size:?1rem;<br />}<br /><br />.search-box?.DocSearch-Button-Container?{<br />????margin-left:?0.4rem;<br />}<br /><br />.search-box?.DocSearch-Button?.DocSearch-Search-Icon?{<br />????width:?16px;<br />????height:?16px;<br />????position:?relative;<br />????top:?0.1rem;<br />}<br /><br />.search-box?.DocSearch-Button-Placeholder?{<br />????font-size:?0.8rem;<br />}<br /><br />.search-box?.DocSearch-Button-Keys?{<br />????position:?absolute;<br />????right:?0.1rem;<br />}<br /><br />.search-box?.DocSearch-Button-Key?{<br />????font-size:?12px;<br />????line-height:?20px;<br />}<br /></p>

　　最終使用的效果如下：

　　

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

　　點(diǎn)擊左下角閱讀原文，到SegmentFault 思否社區和文章作者展開(kāi)更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號后臺“回復“入群”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

　　-END -