Hope主题的页面定制

2025/5/11大约 4 分钟

这里分俩部分讨论：

可能影响整个VuePress网站页面的设置。
针对Hope主题博客页面的设置。

一、全局配置

`侧边栏`

侧边栏包含相关的文档列表，文档标题以及博客模式下的博主信息。
主题允许你通过 文件结构 和 文档标题 自动生成侧边栏，也可以手动配置。

侧边栏链接

站点侧边栏的配置由主题选项中的 sidebar 控制。
下面给出多种不同的侧边栏的链接定义格式：

字符串格式

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

export default {
  theme: hopeTheme({
    sidebar: ["/zh/README.md", "/zh/guide/README.md", "/zh/config/README.md"],
  }),
};

对象格式

如果你对页面的图标不满意或者觉得页面标题太长，你可以改为配置一个对象。可用的配置项有:

text: 项目文字
link 项目链接
icon: 项目图标 (可选)
activeMatch: 项目激活匹配 (可选)，支持正则字符串。

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

export default {
  theme: hopeTheme({
    sidebar: [
      {
        text: "指南",
        link: "/zh/guide/README.md",
        icon: "lightbulb",
      },
      { text: "配置", link: "/zh/config/README.md", icon: "config" },
      {
        text: "常见问题",
        link: "/zh/faq.md",
        icon: "circle-question",
        // 会在 `/zh/faq` 开头的路径激活
        // 所以当你前往 `/zh/faq/xxx.html` 时也会激活
        activeMatch: "^/zh/faq",
      },
    ],
  }),
};

分组与嵌套

如果你需要展示嵌套结构的侧边栏，你可以将同类链接整理成菜单分组。

这里指的是文章页面的边栏，非主页的侧面边栏

使用对象格式，并提供额外的 children 选项设置链接列表。
使用 prefix 来为组内的每个链接添加默认的路径前缀，

collapsible: true 来使菜单分组可折叠，并且你可以设置
expanded: true 来使可折叠的分组默认展开。

分组

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

export default {
  theme: hopeTheme({
    sidebar: [
      {
        text: "分组 1",
        icon: "tip",
        link: "/foo/",
        prefix: "/foo/",
        collapsible: true,
        expanded: true,
        children: [
          "README.md" /* /foo/index.html */,
          /* ... */
          "geo.md" /* /foo/geo.html */,
        ],
      },
      {
        text: "分组 2",
        children: [
          /* ... */
          "bar.md" /* /ray/bar.html */,
          "baz.md" /* /ray/baz.html */,
        ],
      },
    ],
  }),
};

嵌套:

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

export default {
  theme: hopeTheme({
    sidebar: [
      {
        text: "Group",
        prefix: "/",

        children: [

          "baz" /* /baz.html */,

          {
            text: "Sub Group 1",
            children: ["quz" /* /quz.html */, "xyzzy" /* /xyzzy.html */],
          },

          {
            text: "Sub Group 2",
            prefix: "corge/",
            children: [
              "fred" /* /corge/fred.html */,
              "grault" /* /corge/grault.html */,
            ],
          },

          "foo" /* /foo.html */,
        ],


      },
    ],
  }),
};

搭配 prefix 来快速还原文档的结构
见下面的多个侧边栏文档结构：

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

export default {
  theme: hopeTheme({
    sidebar: [
      "/" /* / */,
      {
        text: "Foo",
        prefix: "/foo/",
        children: [
          "" /* /foo/ */,
          "one" /* /foo/one.html */,
          "two" /* /foo/two.html */,
        ],
      },
      {
        text: "Bar",
        prefix: "/bar/",
        children: [
          "" /* /bar/ */,
          "three" /* /bar/three.html */,
          "four" /* /bar/four.html */,
        ],
      },
      "/contact" /* /contact.html */,
      "/about" /* /about.html */,
    ],
  }),
};

多个侧边栏

为不同的页面组来显示不同的侧边栏，通过路径前缀: 侧边栏配置的格式为侧边栏配置一个对象。
.
├─ README.md
├─ contact.md
├─ about.md
├─ foo/
│ ├─ README.md
│ ├─ one.md
│ └─ two.md
└─ bar/
├─ README.md
├─ three.md
└─ four.md

import { hopeTheme } from "vuepress-theme-hope";
export default {
  theme: hopeTheme({
    sidebar: {
      "/foo/": [
        "" /* /foo/ */,
        "one" /* /foo/one.html */,
        "two" /* /foo/two.html */,
      ],

      "/bar/": [
        "" /* /bar/ */,
        "three" /* /bar/three.html */,
        "four" /* /bar/four.html */,
      ],

      // fallback
      "/": [
        "" /* / */,
        "contact" /* /contact.html */,
        "about" /* /about.html */,
      ],
    },
  }),
};

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

在上述任意侧边栏配置中，将原来的“侧边栏数组”替换为 "structure" 关键词。这会让主题自动读取本地文件，为你生成对应的侧边栏结构

改写上面多个侧边栏的例子:

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

export default {
  theme: hopeTheme({
    sidebar: {
      "/foo/": "structure",

      "/bar/": "structure",

      // fallback
      "/": [
        "" /* / */,
        "contact" /* /contact.html */,
        "about" /* /about.html */,
      ],
    },
  }),
};

我的例子：

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

export default {
  theme: hopeTheme({
    sidebar: {
      "/": [
        "",//主页
        {//Web目录
          text: "Web",
          icon: "book",
          prefix: "web/",
          children: "structure",
        },
        "intro",//关于我
      ],
    },
  }),
};