欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VuePress使用Algolia實(shí)現(xiàn)全文搜索

 更新時(shí)間：2022年07月05日 11:06:25   作者：Gaby  
這篇文章主要為大家介紹了VuePress使用Algolia實(shí)現(xiàn)全文搜索示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

Algolia 為構(gòu)建者提供構(gòu)建世界級體驗(yàn)所需的搜索和推薦服務(wù)。Algolia 是一個(gè)數(shù)據(jù)庫實(shí)時(shí)搜索服務(wù)，能夠提供毫秒級的數(shù)據(jù)庫搜索服務(wù)，并且其服務(wù)能以 API 的形式方便地布局到網(wǎng)頁、客戶端、APP 等多種場景。

VuePress 官方文檔就有 Algolia 搜索插件，可以直接安裝使用，使用 Algolia 搜索最大的好處就是方便，它會(huì)自動(dòng)爬取網(wǎng)站的頁面內(nèi)容并構(gòu)建索引，你只用申請一個(gè) Algolia 授權(quán)服務(wù)，在網(wǎng)站上添加一些代碼，就可以像添加統(tǒng)計(jì)代碼一樣，實(shí)現(xiàn)一個(gè)全文搜索功能了。

為了給網(wǎng)站再加點(diǎn)靈魂實(shí)現(xiàn)一個(gè)這樣的全文搜索功能，剛好今天有空且申請的Algolia也已通過，官網(wǎng)已經(jīng)將 AppID 等信息發(fā)郵件通知了，那說干就干吧，還得是擼起袖子加油干！

確認(rèn)眼神

好不好用，那得上圖，有圖有真相，實(shí)實(shí)在在的效果出來了，坑還是有的但是幫大家走一下，避免了好些冤枉路，具體我也會(huì)在文中加以說明的。

先看導(dǎo)航圖

再看搜索圖

申請授權(quán)

已經(jīng)確認(rèn)過眼神??了，那么這就是你要用的，那怎么用呢，不可能直接網(wǎng)上一搜代碼一找就能用的，但凡商業(yè)的東西，多少還是會(huì)有些限制的。

第一步先申請授權(quán)，申請地址：docsearch

打開后填寫網(wǎng)站地址、郵箱和倉庫地址等信息，然后勾選上下面三項(xiàng)，并提交。之后就靜待郵件，一般兩三天就都會(huì)有回復(fù)的。

注意： 如果你沒有注冊過賬號，這里官網(wǎng)會(huì)用這個(gè)郵箱幫你注冊賬號，且網(wǎng)站需要是公開可訪問的 如果你網(wǎng)站不是他們要求的類型的，可以先搭建個(gè)文檔類型的再進(jìn)行申請。

如果申請通過，我們就會(huì)收到郵件，內(nèi)容如下：

官方郵箱地址：support@algolia.com

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

通過 文中的邀請鏈接，就可以設(shè)置密碼，然后用你的郵箱登錄就可以了。algolia 登錄頁

實(shí)施部署

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({
        // 配置項(xiàng) 配置上申請下來的 apiKey、indexName、appId
        apiKey: '',
        indexName: '',
        appId: '',
        placeholder: '搜索文檔',
        translations: {
          button: {
            buttonText: '搜索文檔',
          },
        }
    }),
  ],
}

注意：安裝的插件版本，要同使用的 vuepress 版本保持一致，否則會(huì)報(bào)錯(cuò)不能用。尤其是早期創(chuàng)建的項(xiàng)目，現(xiàn)在直接按照文檔安裝最新版本的插件，就可能會(huì)存在問題。

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

調(diào)試爬取

如果你搜任何數(shù)據(jù)，都顯示搜索不到數(shù)據(jù)，那很可能是爬取的數(shù)據(jù)有問題，我們登陸 www.algolia.com/ 打開管理后臺(tái)，點(diǎn)擊左側(cè)選項(xiàng)欄里的 Search，查看對應(yīng)的 index 數(shù)據(jù)，如果 Browse 這里沒有顯示數(shù)據(jù)，那說明爬取的數(shù)據(jù)可能有問題，導(dǎo)致沒有生成對應(yīng)的 Records：

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

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

vuepress 官方爬蟲配置示例:

主要代碼貼出來，具體詳細(xì)的，大家直接轉(zhuǎn)到 docsearch 插件文檔

new Crawler({
  rateLimit: 8,
  // 這是 Algolia 開始抓取網(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 的范圍 沒有特殊要求就全站抓取
  discoveryPatterns: ["https://docs.ycsnews.com/**"],
  // 爬蟲執(zhí)行的計(jì)劃時(shí)間，可根據(jù)文檔更新頻率設(shè)置
  schedule: "at 11:50 every 1 day",
  actions: [
    {
      // 使用適當(dāng)?shù)拿Q為索引命名 申請授權(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)的可能都存在問題，所以這個(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è)文檔的鏈接，測試下，看是否能成功，成功則進(jìn)行下一步，否則繼續(xù)調(diào)整抓取規(guī)則，指導(dǎo)能抓取成功！如下圖，多測幾個(gè)鏈接，保證都可用。

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

等到看到類似這樣的效果圖，就可以了，至于其他高級的功能，就自行開發(fā)，好好利用吧！

總結(jié)回顧

對于 vuepress 來說，就是安裝個(gè)插件配置參數(shù)的事，可還是讓人耽誤了好些時(shí)間。官方文檔中并未對常見的一些問題予以說明，還需咱們自己踩坑，希望大家也能將自己日常踩的坑分享出來，避免更多的人，無休止的耗費(fèi)精力。祝大家一切順利，所踩之坑，皆能被填平！據(jù)說，點(diǎn)贊加關(guān)注的人都被領(lǐng)導(dǎo)加雞腿了！??

以上就是VuePress使用Algolia實(shí)現(xiàn)全文搜索的詳細(xì)內(nèi)容，更多關(guān)于VuePress Algolia全文搜索的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論