Vuepress 2从0-1保姆级进阶教程——全文搜索篇（含Algolia、meilisearch）

Vuepress 2 专栏目录【已完结】

1. 入门阶段

1. Vuepress 2从0-1保姆级入门教程——环境配置篇
2. Vuepress 2从0-1保姆级入门教程——安装流程篇
3. Vuepress 2从0-1保姆级入门教程——文档配置篇
4. Vuepress 2从0-1保姆级入门教程——主题与部署

2.进阶阶段

1. Vuepress 2从0-1保姆级进阶教程——全文搜索篇
2. Vuepress 2从0-1保姆级进阶教程——美化与模版
3. Vuepress 2从0-1保姆级进阶教程——标准化流程

更新日志

• 添加Algolia版块
• 更新meilisearch2.x搜索（链接）版块
• 所有提示块信息放大显示
• 添加algolia新的使用方式
• 替换旧版algolia教程网页
• 添加reco主题搜索模版
• 修复plume主题搜索模版错误
• 添加仓库链接
• 添加自动爬虫方法
• 移除search-pro插件
• 添加docker国内镜像加速方法
• 更新hope主题自建爬虫模版
• 添加自动爬虫模版
• 添加meilisearch爬虫
• 引用块样式矢量放大更清晰
• 添加Meiliserch ssl访问方法

logo等静态文件：https://wwk.lanzouo.com/b04x8f3hg
密码：666
仓库：https://gitee.com/passwordgloo/vuepress2-tutorial

git clone git@gitee.com:passwordgloo/vuepress2-tutorial.git
cd vuepress2-tutorial
pnpm install

# 谨慎更新包
# pnpm docs:update-package

一、slimsearch

1️⃣ 安装

pnpm install -D @vuepress/plugin-slimsearch@next

2️⃣ 多个插件配置之间用,隔开

//写在config.ts开头引入插件
import { slimsearchPlugin } from '@vuepress/plugin-slimsearch'

export default {
  plugins: [
    slimsearchPlugin({
       // 已启用全文搜索
      indexContent: true,
    }),
  ],
}

3️⃣ 预览

pnpm docs:dev

二、Algolia

（一）爬虫

方式一：官方Algolia DocSearch申请

访问DocSearch 官方平台申请

如果符合要求，官方会通过邮件联系你，你需要用英语回复官方自己是网站的管理者，拥有修改文件的权限，不会英语可以用在线翻译

官方确认后会回复带有indexName、appId、apikey的邮件

使用申请时的邮箱注册algolia账号

方式二：自建爬虫

如果你嫌等待时间太久，或者不符合上述任意一条申请条件，Algolia提供自建爬虫方式手动爬取网站信息

1.注册Algolia账号

使用Github账号登录Algolia 官网，如果你会魔法，请大胆用google账号

2.创建应用

新版网页界面简化创建流程，点击+ Create Application 新建

稍等片刻，自动创建完毕

【可选】修改名称，不影响后续操作

☑️ 要修改的项目，点击重命名

3.查看必要信息

方法1 点击首页Overview

方法2 API Keys页面

♦️点击设置进入API Keys

♦️复制紫色框内信息

4.安装Docker

进入Docker官网，根据系统平台选择对应版本。

Windows 10及Windows 11可参照追逐时光者的【全面详细】Windows10 Docker安装详细教程

如果你使用以下平台，官方提供安装教程或一键安装

• 宝塔面板可一键安装docker

• 阿里云ECS用户，官方提供教程，一步步教你安装docker

• 腾讯云 安装 Docker 并配置镜像加速源

• 华为云手动部署docker

5.新建.env文件

✅ 项目文件夹内新建.env环境文件
⚠️ 替换成刚刚复制的信息，不需要Admin_API_Key
🔐 .env文件请添加到.gitignore文件中，已公开仓库请删除该文件，避免敏感信息泄露

APPLICATION_ID=Your_Application_ID
API_KEY=Your_Write_API_Key

6.安装jq

访问jq 官网下载软件，这里提供一下Linux安装命令

CentOS/ Fedora

sudo dnf install jq

Ubuntu/Debian

sudo apt-get install jq

7.新建config.json

⚠️ 注意替换内容

• 第2行，第32行INDEX_NAME请替换成自己的index名字
• 第4行、第7行、第10行Your Website Address替换成自己的域名

1️⃣ Vuepress 2默认主题

{
    "index_name": "INDEX_NAME",
    "start_urls": [
        "Your Website Address"
    ],
    "pathsToMatch": [
        "Your Website Address/**"
    ],
    "discoveryPatterns": [
        "Your Website Address/**"
    ],
    "ignoreCanonicalTo": false,
    "selectors": {
        "lvl0": {
            "selector": ".sidebar-heading.active",
            "defaultValue": "Documentation"
        },
        "lvl1": ".theme-default-content h1",
        "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",
        "content": ".theme-default-content p, .theme-default-content li",
        "lang": {
            "selector": "/html/@lang",
            "type": "xpath",
            "global": true
        }
    },
    "initialIndexSettings": {
        "INDEX_NAME": {
            "attributesForFaceting": [
                "type",
                "lang"
            ],
            "attributesToRetrieve": [
                "hierarchy",
                "content",
                "anchor",
                "url"
            ],
            "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"
    ],
    "custom_settings": {
        "attributesForFaceting": [
            "lang"
        ]
    },
    "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"
}

2️⃣ Vuepress 2 Hope主题

{
    "index_name": "INDEX_NAME",
    "start_urls": [
        "Your Website Address"
    ],
    "pathsToMatch": [
        "Your Website Address/**"
    ],
    "discoveryPatterns": [
        "Your Website Address/**"
    ],
    "ignoreCanonicalTo": false,
    "selectors": {
          lvl0: {
              selectors: [".vp-sidebar-link.active", "[vp-content] h1"],
              defaultValue: "Documentation",
            },
            lvl1: "[vp-content] h1",
            lvl2: "[vp-content] h2",
            lvl3: "[vp-content] h3",
            lvl4: "[vp-content] h4",
            lvl5: "[vp-content] h5",
            lvl6: "[vp-content] h6",
            content: "[vp-content] p, [vp-content] li",
        "lang": {
            "selector": "/html/@lang",
            "type": "xpath",
            "global": true
        }
    },
    "initialIndexSettings": {
        "INDEX_NAME": {
            attributesForFaceting: ["type", "lang"],
            "attributesToRetrieve": [
                "hierarchy",
                "content",
                "anchor",
                "url"
            ],
            "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"
    ],
    "custom_settings": {
        "attributesForFaceting": [
            "lang"
        ]
    },
    "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"
}

3️⃣ Vuepress 2 Reco 主题

{
    "index_name": "INDEX_NAME",
    "start_urls": [
        "Your Website Address"
    ],
    "pathsToMatch": [
        "Your Website Address/**"
    ],
    "discoveryPatterns": [
        "Your Website Address/**"
    ],
    "ignoreCanonicalTo": false,
    "selectors": {
        "lvl0": {
            "selector": ".sidebar-heading.active",
            "defaultValue": "Documentation"
        },
        "lvl1": "h1",
        "lvl2": "h2",
        "lvl3": "h3",
        "lvl4": "h4",
        "lvl5": "h5",
        "lvl6": "h6",
        "content": "p, li",
        "lang": {
            "selector": "/html/@lang",
            "type": "xpath",
            "global": true
        }
    },
    "initialIndexSettings": {
        "INDEX_NAME": {
            "attributesForFaceting": [
                "type",
                "lang"
            ],
            "attributesToRetrieve": [
                "hierarchy",
                "content",
                "anchor",
                "url"
            ],
            "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"
    ],
    "custom_settings": {
        "attributesForFaceting": [
            "lang"
        ]
    },
    "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"
}

4️⃣ Vuepress 2 Plume（羽毛）主题

{
    "index_name": "INDEX_NAME",
    "start_urls": [
        "Your Website Address"
    ],
    "pathsToMatch": [
        "Your Website Address/**"
    ],
    "discoveryPatterns": [
        "Your Website Address/**"
    ],
    "rateLimit": 8,
    "ignoreCanonicalTo": false,
    "selectors": {
        "lvl0": {
            "selector": ".sidebar-item.is-active p,.content-container .page-title",
            "defaultValue": "Documentation"
        },
        "lvl1": ".plume-content h1",
        "lvl2": ".plume-content h2",
        "lvl3": ".plume-content h3",
        "lvl4": ".plume-content h4",
        "lvl5": ".plume-content h5",
        "lvl6": ".plume-content h6",
        "content": ".plume-content p, .plume-content li",
        "lang": {
            "selector": "/html/@lang",
            "type": "xpath",
            "global": true
        }
    },
    "initialIndexSettings": {
        "INDEX_NAME": {
            "attributesForFaceting": [
                "type",
                "lang"
            ],
            "attributesToRetrieve": [
                "hierarchy",
                "content",
                "anchor",
                "url"
            ],
            "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"
    ],
    "custom_settings": {
        "attributesForFaceting": [
            "lang"
        ]
    },
    "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"
}

8.运行自建爬虫

把刚刚新建的config.json文件具体路径替换掉下面代码里的/path/to/your/config.json，然后运行

docker run -it --env-file=.env -e "CONFIG=$(cat /path/to/your/config.json | jq -r tostring)" algolia/docsearch-scraper

通常，执行命令后，docker会从官方站点拉取指定镜像，稍等片刻会出现下面结果

但是如果网络不好，你很可能卡在下载这一步

好消息是国内有镜像加速下载站，比如

docker pull hub.fast360.xyz/algolia/docsearch-scraper:latest
docker tag hub.fast360.xyz/algolia/docsearch-scraper:latest algolia/docsearch-scraper:latest
docker rmi hub.fast360.xyz/algolia/docsearch-scraper:latest

9.查看爬虫效果

不会设置文档语言可以回看文档配置篇多语言配置

10.在线测试效果

点击UI Demos，新建demo


测试结果成功，可以安装并配置插件了😁

方式三：Netlify

Netlify与Algolia有合作关系，所以如果你不想填申请、建爬虫，却还想使用Algolia服务可以尝一下鲜

0.文档推送到GitHub远程仓库

一个空仓库是搜不到任何信息的

1.部署文档到Netlify

使用GitHub账号登录Netlify网站

Add new site选择要部署的的GitHub仓库

没事别乱改自己的branch分支名，用默认的

2.管理你的algolia爬虫

使用你的algolia账号访问Algolia爬虫面板

点击右上角+ Link a new site

上面填刚刚部署的项目
下面选择部署节点

Netlify会自动安装algolia插件，点击左侧Crawlers查看爬虫运行情况，通常索引数量少于实际（仅做了Vuepress2适配，没有主题适配）

方式四：自动爬虫

• 适用于方式三修改Netlify发布站点爬虫逻辑。
• 适用于Vuepress 2自行部署到服务器，不想手动更新索引

方式2自建爬虫第2步创建完应用后，Algolia提供一定限度的免费自动爬虫服务，超量需付费，如果站点部署在Netlify，还有单独的Netlify 爬虫管理平台，为方便大家俩个都介绍一下，大家看个人情况任选

方式一：站点Crawler

1. 在当前应用点击左侧图标，进入统计分析

2. 先在第二栏Domins添加并验证自己的域名，平台提供DNS、robot、meta等验证方式

3. 在第一栏crawler 里新建

新建完成后，点击Configuration图形化界面配置爬虫

点击Editor可编辑爬虫代码
❌ 不要修改生成的appID和apikey
✅ 可参考下面主题给的模版

默认主题提供的爬虫模版
Hope主题提供的爬虫模版
Plume主题提供的爬虫模版

方式二：Netlify 爬虫面板

使用Algolia账号登录Netlify 爬虫管理

点击+ New Crawler

🔔 界面提示开始配置爬虫前需要验证域名

点击左侧侧边栏Domins

站点根目录robots.txt添加复制过来的验证代码👇

格式类似下面

 # Algolia-Crawler-Verif: XXXX

 User-Agent: *
 Allow: /

不要在Vuepress2 根目录放置自定义robots.txt，请放在.vuepress/public，官方说明如下

点击左侧侧边栏Crawler,进入自己的项目，点击Check Website通过第一步验证域名

点击Start the crawler自动生成索引

模版基于默认主题

但其他主题需要自己修改，请点击左侧侧边栏的Editor,在原有格式上修改内容，修改完成后点击右上角保存

❌ 不要修改生成的appID和apikey
✅ 可参考下面主题给的模版

默认主题提供的爬虫模版
Hope主题提供的爬虫模版
Plume主题提供的爬虫模版

介绍几个重要配置

方式五：升级Algolia账号

想要享受VIP待遇可在Algolia首页点一下Upgrade，填写信息绑定一张卡，选择相应的计划就行。

只有超过免费额度的部分需要付费

（二）安装插件

pnpm add -D @vuepress/plugin-docsearch@next

（三）配置

1. Vuepress 2 默认主题

import { docsearchPlugin } from "@vuepress/plugin-docsearch";

export default defineUserConfig({
  plugins: [
    docsearchPlugin({
      appId: '<APP_ID>',
      apiKey: '<Search_API_Key>',
      indexName: '<INDEX_NAME>',
      locales: {
        '/en/': {
          placeholder: 'Search Documentation',
          translations: {
            button: {
              buttonText: 'Search Documentation',
            },
          },
        },
        '/': {
          placeholder: '搜索文档',
          translations: {
            button: {
              buttonText: '搜索文档',
            },
          },
        },
      },
    }),
  ],
})

2. Vuepress 2 Hope 主题

最新版Hope主题自带algolia插件，无需安装，请在theme.ts里定位到plugin设置

plugin: {
    docsearch:({
      appId: "<APP_ID>",
      apiKey: "<API_KEY>",
      indexName: "<INDEX_NAME>",

      locales: {
        "/": {
          placeholder: "搜索文档",
          translations: {
            button: {
              buttonText: "搜索文档",
              buttonAriaLabel: "搜索文档",
            },
            modal: {
              searchBox: {
                resetButtonTitle: "清除查询条件",
                resetButtonAriaLabel: "清除查询条件",
                cancelButtonText: "取消",
                cancelButtonAriaLabel: "取消",
              },
              startScreen: {
                recentSearchesTitle: "搜索历史",
                noRecentSearchesText: "没有搜索历史",
                saveRecentSearchButtonTitle: "保存至搜索历史",
                removeRecentSearchButtonTitle: "从搜索历史中移除",
                favoriteSearchesTitle: "收藏",
                removeFavoriteSearchButtonTitle: "从收藏中移除",
              },
              errorScreen: {
                titleText: "无法获取结果",
                helpText: "你可能需要检查你的网络连接",
              },
              footer: {
                selectText: "选择",
                navigateText: "切换",
                closeText: "关闭",
                searchByText: "搜索提供者",
              },
              noResultsScreen: {
                noResultsText: "无法找到相关结果",
                suggestedQueryText: "你可以尝试查询",
                reportMissingResultsText: "你认为该查询应该有结果？",
                reportMissingResultsLinkText: "点击反馈",
              },
            },
          },
        },
        "/en/": {
          placeholder: "Search Documentation",
          translations: {
            button: {
              buttonText: "Search Documentation",
            },
          },
        },
      },
    }),
})

3. Vuepress 2 Reco 主题

主题自带algolia插件，编辑config.ts，定位到以下代码

  algolia: {
        appId: 'XXXXXXXXXX',
        apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        indexName: 'XXXXXXXXXX',
        //inputSelector: '### REPLACE ME ####',
        // algoliaOptions: { 'facetFilters': ["lang:$LANG"] },
        debug: false // Set debug to true if you want to inspect the dropdown
    },

4. Vuepress 2 Plume 主题

主题自带algolia插件，启用algolia需取消本地搜索

plugins: {
    // search: {
    //    请注释掉本地搜索
    // },
    docsearch: {
        appId: 'Application 🆔',
        apiKey: 'Search_API_Key',
        indexName: 'XXX',
    }
}

（四）测试

三、meilisearch搜索

algolia免费额度毕竟有限，开源meilisearch提供每月10k次搜索、10k次记录，支持自建搜索引擎

Vuepress 2现已接入meilisearch，使用自己服务器或者本地端口免费使用meilisearch
当然付费用户，可使用meilisearch cloud

（一）安装curl

yum -y install curl

（二）启动meilisearch

docker run -it --rm \
  -p 7700:7700 \
  -v $(pwd)/meili_data:/meili_data \
 getmeili/meilisearch:latest

默认会提供一个master_key，请一定要保存好，然后Ctrl c关闭进程

（三）两种方式访问

方式一：HTTP访问

替换下面的 <YOUR_MASTER_KEY> 为你自己的主密钥，启动meilisearch

docker run -d -it --rm \
  --name MeiliSearch \
  -e MEILI_MASTER_KEY='<YOUR_MASTER_KEY>' \
  -e MEILI_ENV=production \
  -p 7700:7700 \
  -v $(pwd)/meili_data:/meili_data \
  getmeili/meilisearch:latest

启动后，刷新网页，显示下面效果表明meiliseach正常工作

方式二：SSL访问

参考官网使用HTTP/2和ssl与Mellisearch教程，如需在SSL情况下使用，需提前把SSL证书密钥文件放上去，请按照实际修改下面内容然后运行

• /path/to/cert/是存放SSL证书和密钥文件位置
• your_website.pem和your_website.key是nginx环境下ssl证书文件

docker run -d -it --rm \
  --name MeiliSearch \
  -e MEILI_MASTER_KEY='<YOUR_MASTER_KEY>' \
  -e MEILI_ENV=production \
  -v /path/to/cert/:/certs \
  -p 7700:7700 \
  -v $(pwd)/meili_data:/meili_data \
  getmeili/meilisearch:latest \
  meilisearch --ssl-cert-path /certs/your_website.pem --ssl-key-path /certs/your_website.key

（四）爬取数据

根目录新建config.json,模版请参考上面的algolia

值	说明
<YOUR_INDEX_NAME>	索引名字
<YOUR_WEBSITE_URL>	服务器IP/域名

{
  "index_uid": "<YOUR_INDEX_NAME>",
  "start_urls": ["https://<YOUR_WEBSITE_URL>/"],
  "sitemap_urls": ["https://<YOUR_WEBSITE_URL>/sitemap.xml"],
  "selectors": {
    "lvl0": {
      "selector": ".vp-sidebar-heading.active",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": "[vp-content] h1",
    "lvl2": "[vp-content] h2",
    "lvl3": "[vp-content] h3",
    "lvl4": "[vp-content] h4",
    "lvl5": "[vp-content] h5",
    "lvl6": "[vp-content] h6",
    "content": "[vp-content] p, [vp-content] li",
    "lang": {
      "selector": "/html/@lang",
      "global": true,
      "type": "xpath"
    }
  },
  "custom_settings": {
    "searchableAttributes": [
      "hierarchy_radio_lvl0",
      "hierarchy_radio_lvl1",
      "hierarchy_radio_lvl2",
      "hierarchy_radio_lvl3",
      "hierarchy_radio_lvl4",
      "hierarchy_radio_lvl5",
      "hierarchy_lvl0",
      "hierarchy_lvl1",
      "hierarchy_lvl2",
      "hierarchy_lvl3",
      "hierarchy_lvl4",
      "hierarchy_lvl5",
      "hierarchy_lvl6",
      "content",
      "lang",
      "objectID",
      "page_rank",
      "level",
      "position"
    ],
    "displayedAttributes": [
      "hierarchy_radio_lvl0",
      "hierarchy_radio_lvl1",
      "hierarchy_radio_lvl2",
      "hierarchy_radio_lvl3",
      "hierarchy_radio_lvl4",
      "hierarchy_radio_lvl5",
      "hierarchy_lvl0",
      "hierarchy_lvl1",
      "hierarchy_lvl2",
      "hierarchy_lvl3",
      "hierarchy_lvl4",
      "hierarchy_lvl5",
      "hierarchy_lvl6",
      "anchor",
      "url",
      "lang",
      "content",
      "objectID"
    ],
    "filterableAttributes": ["lang"]
  }
}

这里我以vuepress2官网为例

确保meilisearch正在运行，然后

docker run -t --rm \
  --network=host \
  -e MEILISEARCH_HOST_URL='<YOUR_WEBSITE_URL>' \
  -e MEILISEARCH_API_KEY='<YOUR_MASTER_KEY>' \
  -v <path/to/your/config.json>:/docs-scraper/config.json \
  getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json

值	说明
<YOUR_INDEX_NAME>	索引名字
<YOUR_WEBSITE_URL>	服务器IP/域名
<path/to/your/config.json>	config.json文件绝对路径

爬取成功！

（五）search_key

出于安全考虑，容器不会暴露在外，我们新建search_key用于公开访问

curl \
  -X POST '<YOUR_WEBSITE_URL>/keys' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer <MASTER_KEY>' \
  --data-binary '{
    "indexes": ["<YOUR_INDEX_NAME>"]，
    "actions": ["search"],
    "expiresAt": null,
    "description": "Search key for <YOUR_INDEX_NAME>"
  }'

值	说明
<YOUR_WEBSITE_URL>	服务器IP/域名
<MASTER_KEY>	master_key
<YOUR_INDEX_NAME>	索引名字

然后会返回下面的值，复制下面的<YOUR_SEARCH_KEY>

{
  "name": null,
  "description": "Search key for <YOUR_INDEX_NAME>",
  "key": "<YOUR_SEARCH_KEY>",
  "uid": "b84d1be5-caa5-4752-b078-8f40be39051d",
  "actions": ["search"],
  "indexes": ["<YOUR_INDEX_NAME>"],
  "expiresAt": null,
  "createdAt": "2025-04-21T11:11:51.61628879Z",
  "updatedAt": "2025-04-21T11:11:51.61628879Z"
}

（六）插件安装

两个插件任选其一即可

1.官方插件

官方链接直达

pnpm install -D @vuepress/plugin-meilisearch@next

编辑配置文件config.js

值	说明
<YOUR_WEBSITE_URL>	服务器IP/域名
<YOUR_SEARCH_KEY>	搜索key
<YOUR_INDEX_NAME>	索引名字

import { meilisearchPlugin } from '@vuepress/plugin-meilisearch'

export default {
  plugins: [
    meilisearchPlugin({
      host: '<YOUR_WEBSITE_URL>',
      apiKey: '<YOUR_SEARCH_KEY>',
      indexUid: '<YOUR_INDEX_NAME>',
    }),
  ],
}

2.第三方开发

GitHub用户JQiue和sixmillions开发了vuepress-plugin-meilisearch2插件
点击访问插件使用教程

开源仓库地址