VuePress Theme Hope

logo

主页中间图标 (logo)

src\README.md

heroImage: /logo.svg

不支持相对路径，应为基于 .vuepress/public 文件夹的绝对路径

导航栏左侧图标logo

src\.vuepress\theme.ts 应为基于 .vuepress/public 文件夹的绝对路径。

export default hopeTheme({
  logo: "/logo.svg"
})

头像

通过 blog.avatar配置博客页面中显示的的博主头像

如果没有填写它们，它们会自动回退到站点 Logo (主题选项中的 logo)

cdn JS请求失败

cdn.jsdelivr.net

运行网站之后发现页面弹出错误

Uncaught runtime errors:
×
ERROR
[object Event]
    at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:252:58)
    at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:275:7)

后面发现网页在转圈圈，有3个文件请求超时：

https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/fontawesome.min.js
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/solid.min.js
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/brands.min.js

解决方法

仅限使用npm构建打包，pnpm需要改多个地方

替换node_modules\vuepress-plugin-components\lib\node\index.js中的cdn地址"cdn.jsdelivr.net"为"jsd.onmicrosoft.cn"

https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/${e}.min.js
https://cdn.jsdelivr.net/npm/iconify-icon@1
                  ↓
https://jsd.onmicrosoft.cn/npm/@fortawesome/fontawesome-free@6/js/${e}.min.js
https://jsd.onmicrosoft.cn/npm/iconify-icon@1

重新启动或构建项目

npm run docs:clean-dev

解决过程

寻找代码cdn地址位置

在VSCode全局普通搜索cdn.jsdelivr.net并没有结果，于是搜索fontawesome发现在src\.vuepress\theme.ts配置有相关信息：

import { hopeTheme } from "vuepress-theme-hope";

export default hopeTheme({
  iconAssets: "fontawesome-with-brands",
}

翻阅hopeTheme文档查看关于iconAssets的配置

你应该将图标相关资源设置为 iconAssets，你可以在其中设置：

• 图标资源关键词
• css 和 js 格式的图标资源
• 以上项目的数组

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    // 关键词: "iconify", "fontawesome", "fontawesome-with-brands"
    iconAssets: "fontawesome",

    // 你想要的 URL
    iconAssets: "/base/my/font-icon/resource.js",

    // 上述内容的数组
    iconAssets: [
      "/base/my/font-icon/resource.js",
      "https://example/my/fonr-icon/resouce.css",
      "fontawesome",
    ],
  }),
};

例如，你可以使用 iconfont.cn 和 fontawesome 来生成你自己的资源

为了便于上手，我们添加了内置关键字 "iconify"、"fontawesome" 和 "fontawesome-with-brand 支持。

再到hopeTheme源代码仓库搜索关于cdn.jsdelivr.net的代码

在packages/components/src/node/components/fontIcon.ts发现了两处关键代码：

const getFontAwesomeCDNLink = (item: string): string =>
  `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/${item}.min.js`;
  
const getIconLink = (asset?: string): LinkInfo[] => {
  if (isString(asset)) {
    if (asset === "fontawesome")
      return ["solid", "fontawesome"]
        .map(getFontAwesomeCDNLink)
        .map(getFontAwesomeLink);

    if (asset === "fontawesome-with-brands")
      return ["brands", "solid", "fontawesome"]
        .map(getFontAwesomeCDNLink)
        .map(getFontAwesomeLink);

    if (asset === "iconify")
      return [
        {
          type: "script",
          content: `\
useScriptTag(\`https://cdn.jsdelivr.net/npm/iconify-icon@1\`);\
`,
        },
      ];

再到VSCode搜索项目中的js/${item}关键词，没有结果

把忽略文件选项关闭，得到了一个结果，在node_modules\vuepress-plugin-components\lib\node\index.js.map文件中：

prefix: prefix ?? \"\" };\n};\n\nconst getFontAwesomeCDNLink = (item: string): string =>\n  `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/${item}.min.js`;\n\nconst getFontAwesomeLink = (link: string): LinkInfo => ({\n  type: \"script\",\n  content: `\\\nuseScriptTag(\n  \\`${link}\\`,\n  () => {},\n  { attrs: { \"data-auto-replace-svg\": \"nest\" } }\n);\n`,\n});\n\nconst getIconLink = (asset?: string): LinkInfo[] => {\n  if (isString(asset)) {\n    if (asset === \"fontawesome\")\n      return [\"solid\", \"fontawesome\"]\n        .map(getFontAwesomeCDNLink)\n        .map(getFontAwesomeLink);\n\n    if (asset === \"fontawesome-with-brands\")\n      return [\"brands\", \"solid\", \"fontawesome\"]\n        .map(getFontAwesomeCDNLink)\n        .map(getFontAwesomeLink);\n\n    if (asset === \"iconify\")\n      return [\n        {\n          type: \"script\",\n          content: `\\\nuseScriptTag(\\`https://cdn.jsdelivr.net/npm/iconify-icon@1\\`);\\\n`,\n        },\n

与源码位置对应

再搜索发现cdn.jsdelivr.net/npm/@fortawesome发现出现在3个文件中出现

src\.vuepress\.temp\components\config.js

  setup: () => {
    useScriptTag(
  `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/brands.min.js`,
  () => {},
  { attrs: { "data-auto-replace-svg": "nest" } }
);

    useScriptTag(
  `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/solid.min.js`,
  () => {},
  { attrs: { "data-auto-replace-svg": "nest" } }
);

    useScriptTag(
  `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/fontawesome.min.js`,
  () => {},
  { attrs: { "data-auto-replace-svg": "nest" } }
);

node_modules\vuepress-plugin-components\lib\node\index.js.map

prefix: prefix ?? \"\" };\n};\n\nconst getFontAwesomeCDNLink = (item: string): string =>\n  `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/${item}.min.js`;\n\nconst getFontAwesomeLink = (link: string): LinkInfo => ({\n  type:

node_modules\vuepress-plugin-components\lib\node\index.js

z=e=>`https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/${e}.min.js`,w=e=>({type:"script",content:`useScriptTag(

基本可以确定是这几个地方的问题，使用网络正常的cdn地址替换即可

cdn.jsdelivr.net替代

把下面链接中cdn.jsdelivr.net替换后能正常加载出js则可以使用

https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/fontawesome.min.js

2024年能正常访问的一些镜像站

替换地址	官网	性质
fastly.jsdelivr.net	https://www.jsdelivr.com	官方
cdn.jsdmirror.com	https://cdn.jsdmirror.com	个人
jsd.onmicrosoft.cn	https://cdn.onmicrosoft.cn	个人

我选择使用jsd.onmicrosoft.cn

替换cdn.jsdelivr

第一次从src\.vuepress\.temp\components\config.js开始尝试替换

https://jsd.onmicrosoft.cn/npm/@fortawesome/fontawesome-free@6/js/brands.min.js
https://jsd.onmicrosoft.cn/npm/@fortawesome/fontawesome-free@6/js/solid.min.js
https://jsd.onmicrosoft.cn/npm/@fortawesome/fontawesome-free@6/js/fontawesome.min.js

重新启动项目

npm run docs:clean-dev

发现src\.vuepress\.temp\components\config.js的jsdelivr镜像地址自己变回cdn.jsdelivr.net了

第二次在node_modules\vuepress-plugin-components\lib\node\index.js.map替换

https://jsd.onmicrosoft.cn/npm/@fortawesome/fontawesome-free@6/js/${item}.min.js
https://jsd.onmicrosoft.cn/npm/iconify-icon@1\\

重新启动项目

npm run docs:clean-dev

发现网页请求的还是cdn.jsdelivr.net，src\.vuepress\.temp\components\config.js的地址还是cdn.jsdelivr.net。

第三次替换node_modules\vuepress-plugin-components\lib\node\index.js中的地址

https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/${e}.min.js
https://cdn.jsdelivr.net/npm/iconify-icon@1

重新启动项目

npm run docs:clean-dev

发现src\.vuepress\.temp\components\config.js的地址已经换成jsd.onmicrosoft.cn了，网页请求的也是jsd.onmicrosoft.cn。

至此问题解决。

添加新系列博文

场景

自己在本地文件夹创建了一系列多个Markdown文档

星际建设局>tree /f
.
│  README.md
│  SSL证书.md
│  域名与服务器.md
│  备案.md
│  网站架构.md
│  部署.md
└─assets
        5faba311728e6.jpg

想要设为一个专栏，在导航栏创建链接并设置一个单独侧边栏。

复制文档

复制 星际建设局文件夹到src目录下

.
├── src → 文档文件夹
│    │
│    ├── .vuepress (可选的) → VuePress 配置文件夹
│    ├── demo
│    │    ├── page.md
│    │    └── README.md
│    ├── 星际建设局
│    │    ├── SSL证书.md
│    │    ├── 域名与服务器.md
│    │    ├── 备案.md
│    │    ├── 网站架构.md
│    │    ├── 部署.md
│    │    └── README.md
│    │
│    ├── ... → 其他项目文档
│    │
│    └── README.md → 项目主页
│
└── package.json → Nodejs 配置文件

添加导航栏链接

src\.vuepress\navbar.ts

import { navbar } from "vuepress-theme-hope";

export default navbar([
  "/",
  "/demo/",
  { text: "星际建设局",
    link: "/星际建设局/README.md",
    icon: "landmark" 
  }
]);

添加单独侧边栏

src\.vuepress\sidebar.ts

import { sidebar } from "vuepress-theme-hope";

export default sidebar({
  "/": [
  ],
  "/星际建设局/": [
    "", // 是否在侧边栏显示README.md
    "域名与服务器.md",
    "备案.md",
    "SSL证书.md",
    "网站架构.md",
    "部署.md",
  ],    
});

通过文件结构自动生成侧边栏：

import { sidebar } from "vuepress-theme-hope";

export default sidebar({
  "/": [
  ],
  "/星际建设局/": "structure",
});

修改文章标题

MarkDown文档文件名是中文的话不设置文章标题则生成的侧边栏是经过URL编码的字符串，不利于阅读。

可以在每一个MarkDown文档文件中设置一些页面信息

---
# 当前页面内容标题，默认为 Markdown 文件中的第一个 h1 标签内容。
title: "域名与服务器"

# 当前页面的短标题，会在导航栏、侧边栏和路径导航中作为首选。
shortTitle: "域名与服务器"

# 当前页面<head>内容描述。
description: "域名与服务器"

# 当前页面图标的 FontClass 或文件路径 (建议填写)。
# icon: "icon-document"  # 使用 FontClass 图标

# 作者信息，如果不填，则会回退到默认作者。
# author:
  # 作者姓名
  # name: "张三"
  # 作者网站
  # url: "https://example.com"
  # 作者 Email
  # email: "zhangsan@example.com"

# 当前文章是否为原创。
isOriginal: true

# 写作时间，格式为 YYYY-MM-DD 或 YYYY-MM-DD hh:mm:ss。
date: 2024-08-16

# 分类。
category:
  - "技术文档"
  - "VuePress"

# 标签。
tag:
  - "域名"
  - "服务器"
  - "配置"

# 页面协议信息，设置后协议文字将会展现在页脚。
# license: "MIT"

# 是否在列表中置顶。当填入数字时，数字越大，排名越靠前。
# sticky: 10

# 是否标为星标文章。当填入数字时，数字越大，排名越靠前。
# star: 500

# 是否将该文章添加至文章列表中。
article: true

# 是否将该文章添加至时间线中。
timeline: true

# 设置预览图 (分享图)，请填入绝对路径。
# cover: "/images/cover.png"

# 设置横幅图片 (宽屏分享图)，请填入绝对路径。
# banner: "/images/banner.png"
---

重启项目

热更新默认禁用

出于性能考虑，博客相关数据在开发服务器下默认不启用热更新，也就是如果你新增了文章或者修改了已有文章的分类、时间、标签、置顶、星标状态等，整个站点的相关数据仅会在重启开发服务器后更新。

此外，由于博客信息会写入 VuePress 底层数据，修改这一文件会导致开发服务器重启，所以对于 Markdown 内容敏感的阅读时间 (含字数信息) 也不会在开发服务器下生效。

如果你希望实时更新这些内容，你需要设置 hotReload: true 并接受每次修改会触发页面刷新以及由于大量重新计算工作带来的一段白屏时间。

重启开发服务器后刷新页面

添加Giscus评论系统

参考主题官方文档

Giscus 是一个基于 GitHub Discussion 的评论系统，启用简便。

准备工作

1. 创建一个公开仓库（自由选择，无论是否为自己博客源代码仓库）

2. 开启评论区，作为评论存放的地点

   项目-->Settings-->General-->Features-->Discussions（打勾）

3. 安装 Giscus App，使其有权限访问对应公开仓库。

4. 完成以上步骤后，前往 Giscus 页面 填写仓库和 Discussion 分类获取参数。

   

页面 ↔️ discussion 映射关系我选择og:title，主题的og:title是每篇MarkDown文档设置的标题。

滚动到页面下部的 “启用 giscus” 部分，复制 data-repo, data-repo-id, data-category 和 data-category-id 四项，因为它们是必须的。

<script src="https://giscus.app/client.js"
        data-repo="icurvestar/icurvestar-blog-discussion"
        data-repo-id="R_kgDfdsfsdw"
        data-category="General"
        data-category-id="DIC_kwDfdsfggfdfdghvkL"
        data-mapping="og:title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

配置

请将 data-repo, data-repo-id, data-category, data-category-id 和 mapping作为插件选项传入 repo, repoId, category categoryId。

src\.vuepress\theme.ts

import { hopeTheme } from "vuepress-theme-hope";

import navbar from "./navbar.js";
import sidebar from "./sidebar.js";

export default hopeTheme({
  // 在这里配置主题提供的插件
  plugins: {
    comment: {
      provider: 'Giscus',
      repo: 'icurvestar/icurvestar-blog-discussion',
      repoId: 'R_kgxfdsfdsCw',
      category: 'General',
      categoryId: 'DIC_kwgdsfssuytvkL',
      mapping: 'og:title',
    },
  },
}

测试

博客页面

评论仓库

显示四级或更多级的标题

主题文档

默认情况下，VuePress 只会从 Markdown 提取 h2 和 h3 标题，所以仅靠配置主题，你永远也看不见 h4 标题。

你需要在 VuePress 配置文件中配置 markdown.headers.level:

import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  // 其他站点配置
  // ...

  markdown: {
    headers: {
      // 用到哪一级就提取哪一级
      level: [2, 3, 4, 5, 6],
    },
  },
});

在上方提取更深层级的标题后，你就能在 主题选项 或 页面 Frontmatter 中通过增加 headerDepth 的数值来展示更多标题了。

添加Algolia搜索系统

按照官方文档教程来操作

提交博客链接

前往algolia提交需要搜索的博客地址来加入 DocSearch 项目。

• Documentation or Blog URL

  • 文档或博客网址
  • 将在该地址抓取页面，并将内容索引到Algolia上

• Email

  • 邮箱
  • DocSearch 团队会将 apiKey 和 indexName 发送到邮箱，授予访问Algolia应用的权限

• Repository URL (Optional)

  • 仓库地址（可选）
  • 博客源代码是公开的可以填上去

注册algolia账号

提交链接3天后会发 apiKey 和 indexName 到提交的邮箱。

点击Accept this invitation to get started!开始注册账号。

注册成功

更新爬虫配置

为了正常的使用插件，你需要按照下列要求正确设置 Algolia Crawler。 前往 Algolia Crawler 来更新你的爬虫配置。

点击进入一个爬虫应用

再点击侧边栏Editor选项，按照theme-hope官方文档的配置模板填写自己的信息

new Crawler({
  appId: "YOUR_APP_ID",
  apiKey: "YOUR_API_KEY",
  rateLimit: 8,
  startUrls: [
    // 这是 Algolia 开始抓取网站的初始地址
    // 如果你的网站被分为数个独立部分，你可能需要在此设置多个入口链接
    "https://YOUR_WEBSITE_URL/",
  ],
  sitemaps: [
    // 如果你在使用 Sitemap 插件 (如: @vuepress/plugin-sitemap)，你可以提供 Sitemap 链接
    "https://YOUR_WEBSITE_URL/sitemap.xml",
  ],
  ignoreCanonicalTo: false,
  exclusionPatterns: [
    // 你可以通过它阻止 Algolia 抓取某些 URL
  ],
  discoveryPatterns: [
    // 这是 Algolia 抓取 URL 的范围
    "https://YOUR_WEBSITE_URL/**",
  ],
  // 爬虫执行的计划时间，可根据文档更新频率设置
  schedule: "at 02:00 every 1 day",
  actions: [
    // 你可以拥有多个 action，特别是你在一个域名下部署多个文档时
    {
      // 使用适当的名称为索引命名
      indexName: "YOUR_INDEX_NAME",
      // 索引生效的路径
      pathsToMatch: ["https://YOUR_WEBSITE_URL/**"],
      // 控制 Algolia 如何抓取你的站点
      recordExtractor: ({ $, helpers }) => {
        // 以下是适用于 vuepress-theme-hope 的默认选项选项
        // vuepress-theme-hope 默认的容器类名为 theme-hope-content
        return helpers.docsearch({
          recordProps: {
            lvl0: {
              selectors: [
                ".vp-sidebar-page.active",
                ".theme-hope-content h1",
              ],
              defaultValue: "Documentation",
            },
            lvl1: ".theme-hope-content h1",
            lvl2: ".theme-hope-content h2",
            lvl3: ".theme-hope-content h3",
            lvl4: ".theme-hope-content h4",
            lvl5: ".theme-hope-content h5",
            lvl6: ".theme-hope-content h6",
            content: ".theme-hope-content p, .theme-hope-content li",
          },
          recordVersion: "v3",
        });
      },
    },
  ],
  initialIndexSettings: {
    // 控制索引如何被初始化，这仅当索引尚未生成时有效
    // 你可能需要在修改后手动删除并重新生成新的索引
    YOUR_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",
      ],
      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",
    },
  },
});

默认初始的配置：

new Crawler({
  appId: "YOUR_APP_ID",
  apiKey: "YOUR_API_KEY",
  maxUrls: 5000,
  indexPrefix: "",
  rateLimit: 8,
  renderJavaScript: false,
  startUrls: ["https://blog.icurvestar.cn"],
  discoveryPatterns: ["https://blog.icurvestar.cn/**"],
  schedule: "at 11:50 on Monday",
  maxDepth: 10,
  actions: [
    {
      indexName: "icurvestar",
      pathsToMatch: ["https://blog.icurvestar.cn/docs/**"],
      recordExtractor: ({ $, helpers }) => {
        const toRemove = ".hash-link";

        $(toRemove).remove();

        return helpers.docsearch({
          recordProps: {
            lvl1: ".content__default h1",
            content: ".content__default p, .content__default li",
            lvl0: {
              selectors: "p.sidebar-heading.open",
              defaultValue: "Documentation",
            },
            lvl2: ".content__default h2",
            lvl3: ".content__default h3",
            lvl4: ".content__default h4",
            lvl5: ".content__default h5",
            lang: "",
            tags: {
              defaultValue: ["v1"],
            },
          },
          aggregateContent: true,
        });
      },
    },
  ],
  sitemaps: ["https://blog.icurvestar.cn/sitemap.xml"],
  initialIndexSettings: {
    icurvestar: {
      advancedSyntax: true,
      allowTyposOnNumericTokens: false,
      attributeCriteriaComputedByMinProximity: true,
      attributeForDistinct: "url",
      attributesForFaceting: ["type", "lang", "language", "version"],
      attributesToHighlight: ["hierarchy", "hierarchy_camel", "content"],
      attributesToRetrieve: [
        "hierarchy",
        "content",
        "anchor",
        "url",
        "url_without_anchor",
        "type",
      ],
      attributesToSnippet: ["content:10"],
      camelCaseAttributes: ["hierarchy", "hierarchy_radio", "content"],
      customRanking: [
        "desc(weight.pageRank)",
        "desc(weight.level)",
        "asc(weight.position)",
      ],
      distinct: 1,
      highlightPostTag: "</span>",
      highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
      ignorePlurals: true,
      minProximity: 1,
      minWordSizefor1Typo: 3,
      minWordSizefor2Typos: 7,
      ranking: [
        "words",
        "filters",
        "typo",
        "attribute",
        "proximity",
        "exact",
        "custom",
      ],
      removeWordsIfNoResults: "allOptional",
      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",
      ],
    },
  },
  ignoreCanonicalTo: true,
  safetyChecks: { beforeIndexPublishing: { maxLostRecordsPercentage: 10 } },
});

修改完成后点击右上角的 Save 保存，再点击 Start Crawl 重新爬取

爬取中

爬取成功，完成更新索引

配置博客

安装 @vuepress/plugin-docsearch

npm i -D @vuepress/plugin-docsearch@next

选项配置插件

src/vuepress/theme.ts

import { hopeTheme } from "vuepress-theme-hope";

import navbar from "./navbar.js";
import sidebar from "./sidebar.js";

export default hopeTheme({
  // 在这里配置主题提供的插件
  plugins: {
    docsearch: {
      // 你的选项
      // appId, apiKey 和 indexName 是必填的
      appId: 'appId',
      apiKey: 'apiKey',
      indexName: 'indexName'
    },
  },
})

测试

搜索成功