docusaurus如何添加一個(gè)搜索功能
如果algolia不能自動(dòng)配置的話,我教你手動(dòng)給docusaurus添加一個(gè)搜索
新版博客用docusaurus重構(gòu)已經(jīng)有些日子了,根據(jù)docusaurus的文檔上也申請(qǐng)了Algolia,想一勞永逸的解決博客的搜索問(wèn)題。但是流水有意,落花無(wú)情。
algolia總是不給我回復(fù),我只能對(duì)著algolia的申請(qǐng)頁(yè)面仰天長(zhǎng)嘆。
正常情況的申請(qǐng)
按照docusaurus官方文檔上說(shuō)的,當(dāng)我們需要搜索的時(shí)候,打開(kāi)https://docsearch.algolia.com/apply/填一下申請(qǐng),提交就行了。
但是可惜的是,我填好資料,點(diǎn)這個(gè)join the program很多次了,就是沒(méi)有反應(yīng)。
怎么辦呢?我仔細(xì)檢查了它的官方文檔,看他的描述說(shuō)是需要等待2個(gè)星期。但是2個(gè)星期實(shí)在太久了,在我們只爭(zhēng)朝夕的今天,怎么行。
還好,我看到它還有一種手動(dòng)上傳的辦法,笨是笨了點(diǎn),總比沒(méi)有的好。那就開(kāi)始吧。
手動(dòng)上傳
首先我們得去Algolia上注冊(cè)一個(gè)賬號(hào),然后在這里需要?jiǎng)?chuàng)建一個(gè)應(yīng)用:
應(yīng)用的旁邊,需要?jiǎng)?chuàng)建一個(gè)index用來(lái)存儲(chǔ)搜索數(shù)據(jù):
這樣,前期的準(zhǔn)備工作就做好了。
再在api設(shè)置中找到APPLICATION_ID和API_KEY。把他們保存到.env文件中:
APPLICATION_ID=YOUR_APP_ID
API_KEY=YOUR_API_KEY
注意,這里的API_KEY最好是Admin API Key,因?yàn)闀?huì)有一些權(quán)限需要。
如果是Admin API Key的話,記得不要分享給別人,這個(gè)key的權(quán)限比較大,可以刪除和更新你的index數(shù)據(jù)。
設(shè)置配置文件
接下來(lái),我們還需要一個(gè)配置文件。用來(lái)配置爬蟲(chóng)信息。下面是一個(gè)最基本的配置信息。
{ "index_name": "example", "start_urls": ["https://www.example.com/docs"], "selectors": { "lvl0": "#content header h1", "lvl1": "#content article h1", "lvl2": "#content section h3", "lvl3": "#content section h4", "lvl4": "#content section h5", "lvl5": "#content section h6", "text": "#content header p,#content section p,#content section ol" } }
其中index_name就是我們剛剛在網(wǎng)站上創(chuàng)建的index_name。當(dāng)DocSearch scraper程序跑起來(lái)的時(shí)候,你會(huì)發(fā)現(xiàn)有一個(gè)臨時(shí)的index_name
+ _tmp 索引被創(chuàng)建。
別擔(dān)心,在程序執(zhí)行完畢之后,會(huì)把這個(gè)tmp index會(huì)替換最終的index。
start_urls包含的是要開(kāi)始爬取的鏈接地址。爬蟲(chóng)會(huì)循環(huán)爬取鏈接里面的a標(biāo)簽,除非是遇到了stop_urls。另外爬蟲(chóng)不會(huì)爬取其他域名的鏈接。
selectors是用于創(chuàng)建記錄層次結(jié)構(gòu)的所有 CSS 選擇器。其中text是強(qiáng)制,必須要有的。
如果你對(duì)不同的url有不同的selector方案,那么可以給不同的url配置不同的selectors_key,如下所示:
{ "start_urls": [ { "url": "http://www.example.com/docs/faq/", "selectors_key": "faq" }, { "url": "http://www.example.com/docs/" } ], […], "selectors": { "default": { "lvl0": ".docs h1", "lvl1": ".docs h2", "lvl2": ".docs h3", "lvl3": ".docs h4", "lvl4": ".docs h5", "text": ".docs p, .docs li" }, "faq": { "lvl0": ".faq h1", "lvl1": ".faq h2", "lvl2": ".faq h3", "lvl3": ".faq h4", "lvl4": ".faq h5", "text": ".faq p, .faq li" } } }
好了,基本的配置就這些了。
運(yùn)行爬蟲(chóng)腳本
現(xiàn)在可以運(yùn)行爬蟲(chóng)腳本了,這里有兩個(gè)選擇,一是跑docker,方便快捷。二是從源代碼運(yùn)行,這個(gè)就比較麻煩了。
這里我只是希望博客可以有搜索功能,所以源碼什么的就算了吧,我們直接跑docker命令:
run -it --env-file=.env -e "CONFIG=$(cat flydean.conf | jq -r tostring)" algolia/docsearch-scraper
過(guò)一會(huì)就運(yùn)行起來(lái)了。但是我們看看日志:
DocSearch: http://www.flydean.com/07-python-module/ 0 records)
DocSearch: http://www.flydean.com/08-python-io/ 0 records)
DocSearch: http://www.flydean.com/09-python-error-exception/ 0 records)
DocSearch: http://www.flydean.com/06-python-data-structure/ 0 records)
Crawling issue: nbHits 0 for myblog
nb_hits表示的是DocSearch 提取和索引的記錄數(shù)。
怎么是0 records?難道什么都沒(méi)有爬到?
直覺(jué)是我的start_urls不太對(duì),我們把它換成sitemap.xml再試一次:
{ "sitemap_urls": ["http://www.example.com/docs/sitemap.xml"] }
還是同樣的錯(cuò)誤。
沒(méi)辦法,再去仔細(xì)讀一下配置文件的說(shuō)明。
終于發(fā)現(xiàn)了問(wèn)題,原來(lái)這里的selectors寫(xiě)的有問(wèn)題,#content header h1表示的是在ID為content
的元素內(nèi)部,尋找所有屬于header
類(lèi)的元素,并在這些元素內(nèi)部尋找所有的<h1>
元素。但是在docusaurus V3版本中已經(jīng)發(fā)生了變化。
我們把它改寫(xiě)成這樣:
"selectors": { "lvl0": { "selector": ".menu__link--sublist.menu__link--active", "global": true, "default_value": "Documentation" }, "lvl1": "header h1", "lvl2": "article h2", "lvl3": "article h3", "lvl4": "article h4", "lvl5": "article h5", "lvl6": "article h6", "text": "article p, article li" },
再運(yùn)行一次,這次終于有數(shù)據(jù)了。
回到網(wǎng)站上看看,已經(jīng)有數(shù)據(jù)上傳上來(lái)了:
好了,我們?cè)赿ocusaurus.config.ts中配置一下,看看效果:
algolia: { // The application ID provided by Algolia appId: 'YOUR_APP_ID', // Public API key: it is safe to commit it apiKey: 'YOUR_SEARCH_API_KEY', indexName: 'YOUR_INDEX_NAME', // Optional: see doc section below contextualSearch: true, // Optional: Algolia search parameters searchParameters: {}, // Optional: path for search page that enabled by default (`false` to disable it) searchPagePath: 'search', //... other Algolia params },
我們?cè)诰W(wǎng)站上試試效果:
完美,遇到問(wèn)題的小伙伴可以私信我喲!
到此這篇關(guān)于docusaurus添加一個(gè)搜索的文章就介紹到這了,更多相關(guān)docusaurus搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
java int類(lèi)型二維數(shù)組實(shí)現(xiàn)“楊輝三角”的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于java int類(lèi)型二維數(shù)組實(shí)現(xiàn)“楊輝三角”的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12Spring AOP切點(diǎn)表達(dá)式使用及說(shuō)明
這篇文章主要介紹了Spring AOP切點(diǎn)表達(dá)式使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Java實(shí)現(xiàn)的分頁(yè)工具類(lèi)與用法示例
這篇文章主要介紹了Java實(shí)現(xiàn)的分頁(yè)工具類(lèi)與用法,結(jié)合完整實(shí)例形式分析了java分頁(yè)工具類(lèi)的定義、使用方法及相關(guān)操作技巧,需要的朋友可以參考下2019-10-10SpringBoot中快速實(shí)現(xiàn)郵箱發(fā)送代碼解析
這篇文章主要介紹了SpringBoot中快速實(shí)現(xiàn)郵箱發(fā)送代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08詳解Java七大阻塞隊(duì)列之SynchronousQueue
SynchronousQueue不需要存儲(chǔ)線程間交換的數(shù)據(jù),它的作用像是一個(gè)匹配器,使生產(chǎn)者和消費(fèi)者一一匹配。本文詳細(xì)講解了Java七大阻塞隊(duì)列之一SynchronousQueue,需要了解的小伙伴可以參考一下這篇文章2021-09-09利用Spring Session和redis對(duì)Session進(jìn)行共享詳解
這篇文章主要給大家介紹了關(guān)于利用Spring、Session和redis對(duì)Session進(jìn)行共享的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09詳解Spring DeferredResult異步操作使用場(chǎng)景
本文主要介紹了Spring DeferredResult異步操作使用場(chǎng)景,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10詳解如何使用MongoDB+Springboot實(shí)現(xiàn)分布式ID的方法
這篇文章主要介紹了詳解如何使用MongoDB+Springboot實(shí)現(xiàn)分布式ID的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09