这里分俩部分讨论：

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

一、全局配置

图标支持

主题通过 @vuepress/plugin-icon 添加了图标支持。

使用

我们支持多种类型的图标：

• iconify
• fontawesome
• iconfont 字体

也可以使用任何图片链接（不支持相对链接）

要指定图标资源，请在主题选项中设置 plugins.icon.assets：

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

export default {
  theme: hopeTheme({
    plugins: {
      icon: {
        // 关键词: "iconify", "fontawesome", "fontawesome-with-brands"
        assets: "fontawesome",
      },
    },
  }),
};

本项目，icon中没有显式指定 资源，即是默认使用 iconify

添加图标/使用图标

在 markdown 中

可以使用如下格式来插入自定义图标：

::icon decorators... =size /color key=value complex-key="complex value"

• 以 = 开头的字符串将被视为大小定义。
• 以 / 开头的字符串将被视为颜色定义。
• 任何本身是有效 html 属性的字符串将被解析、标准化并添加到图标元素中。
• 其余部分将被视为图标名称。

例子：

::car /blue::

显示：

在组件中使用

略

在配置中设置图标

你可以在多个选项中设置图标：

• 页面: 在 frontmatter 中设置 icon
  此图标将用于路径导航、页面标题、导航栏生成项、侧边栏生成项、页面导航等。

例如本文设置了图标：

• 导航栏: 在导航栏项中设置 icon 选项

• 侧边栏: 在侧边栏项中设置 icon 选项

• 首页: 在 features 项目中设置 icon 选项

可用的图标

完整的图标列表，请参见

Iconify:

Iconfont:

Fontawesome:

导航栏

导航栏可包含:

• 站点名称
• 搜索框
• 导航栏链接
• 多语言选择菜单
• 仓库链接
• 外观弹窗。

导航栏链接

在主题的配置选项中通过 navbar 属性配置导航栏链接，它接受一个数组。

字符串格式

依次填入需要展示的页面文件的路径，这样导航栏的文字、图标和链接会自动通过对应文件生成。

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

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

对象格式

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

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

import { hopeTheme } from "vuepress-theme-hope";
export default {
  theme: hopeTheme({
    navbar: [
      {
        text: "指南",
        link: "/zh/guide/README.md",
        icon: "lightbulb",
        // 仅在 `/zh/guide/` 激活
        activeMatch: "^/zh/guide/$",
      },

      { 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",
      },
    ],
  }),
};

我的 navbar 配置 如下：

import { navbar } from "vuepress-theme-hope";
export default navbar([
  // 这个数组里面的每一项代表了导航栏上的一个条目
  "/",// 首页链接
  "/web/",//子目录链接
]);

为了配和 navbar ，你还需要再在各个数组项的子目录下有一个 README.md 文件。
例如：我的web子目录的 README.md 文件 内容为：

---
title: my navbar demo
index: false
icon: laptop-code
category:
  - Guide
---

<Catalog />

下拉列表
需要展示较多的链接，你可以将同类链接整理成下拉列表。

禁用导航栏

设置 navbar: false 以全局禁用导航栏:

也可以通过 Frontmatter 来禁用某个指定页面的导航栏:

navbar: false

站点图标

在主题选项中使用 logo 来配置站点的图标，请填入绝对路径。

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

export default {
  theme: hopeTheme({
    logo: "/logo.png",
  }),
};

你可以在主题选项中设置 logoDark 以在深色模式下显示另一个 Logo。

搜索框

搜索插件的内置支持。
你可以根据自己的需要来自行添加插件并启用搜索功能。导航栏会自动出现对应的搜索框。

导航栏布局配置

可以通过 navbarLayout 属性自定义导航栏，你可以在选项中通过 start、center 和 end 键中添加组件。

可以直接使用以下内置组件名称:

• Brand: 站点品牌
• Links: 导航栏链接
• Language: 语言切换菜单
• Search: 搜索框
• Outlook: 外观弹窗
• Repo: 项目仓库

也可以全局注册自己的组件并使用它们。

默认使用以下选项:

import { hopeTheme } from "vuepress-theme-hope";
export default {
  theme: hopeTheme({
    navbarLayout: {
      start: ["Brand"],
      center: ["Links"],
      end: ["Language", "Repo", "Outlook", "Search"],
    },
  }),
};

把组件放在 start ，就表示组件将在 导航栏的左边显示

页脚支持

为所有页面提供了页脚功能。

可以在主题选项中设置 footer，copyright license 全局设置默认的页脚内容与版权信息。
也可以在页面 frontmatter 中配置 footer，copyright 和 license 字段，指定特定页面的页脚内容。

我这里选择在这里主题选项中自定义 copyright 属性：

   // 页脚内容配置
  copyright: `
    <div style="text-align: center; padding: 20px 0;">
      <span>© 2025 走俩步，退一步</span>
      <br>
      <a href="http://beian.miit.gov.cn/" target="_blank" style="margin-right: 15px;">
        ICP 备案号：浙ICP备2025159690号
      </a>
      <img src="/ga.png" alt="公安备案图标">
      <a href="https://beian.mps.gov.cn/" target="_blank">
        公安备案号：33078302100980
      </a>
    </div>
  `

二、主页配置

主页

vuepress-theme-hope 提供了一个强大主页，在此基础上改进样式与配置。如果想要使用它只要在 frontmatter 中设置 home: true。任何 frontmatter 之后的内容将会以普通的 Markdown 被渲染，并插入到主页渲染内容的底部。

站点信息

属性	设置内容
heroText	设置主标题
tagline	设置副标题
heroImage	主页Logo，需放置于public文件夹
bgImage	背景图片
bgImageDark	背景图片
heroStyle	hero样式
heroImageStyle	Hero、Logo样式
bgImageStyle	bgImage样式

Frontmatter 中的媒体只能使用绝对路径或完整 URL。

几个属性的设置参考：

---
home: true
# 设置 hero 全屏
heroFullScreen: true
# CSS 字符串
heroStyle: "background-color: #000"
# CSS 对象
heroImageStyle:
  width: 100px
  height: 100px
---

主页按钮 (项目主页)

你可以将一些重要的链接以按钮的形式展示在主页中。

略

项目亮点与功能 (项目主页)

以通过 highlights 来设置和显示项目功能和亮点，它是一个数组，每个元素都是一个对象，代表一个功能或亮点章节。

博客功能介绍

参考：1
参考：2

主题通过引入 @vuepress/plugin-blog 提供了博客支持，该功能是默认禁用的。
如果你需要博客功能，你可以在主题选项中设置 plugins.blog: true 来启用博客功能。

启用博客功能后，主题允许你通过页面的 frontmatter，为页面配置分类、标签、是否是文章、是否出现在时间线中、星标、置顶等功能。

分页配置

对于所有页面的文章列表，我们都会在底部显示一个分页组件。
默认每个分页的文章数为 10，你可以在主题设置中配置 blog.articlePerPage 来覆盖它。

博主信息

主题允许你在主页展示博主的基本信息。

启用博客（插件）功能后，可以在主题的blog属性中设置以下属性：

属性名	功能说明
avatar	博主头像
name	博主姓名
description	一句话介绍
intro	个人介绍页地址，点击头像与姓名时会自动进行跳转。
medias	配置你的社交媒体链接

配置案例：

  blog: {
    description: "A programmer",
    intro: "/intro.html",//博主的个人介绍地址
    medias: {//博主的媒体链接配置。
      Baidu: "https://example.com",
      BiliBili: "https://example.com",
      QQ: "https://example.com",
    },
  },

文章列表

主题默认在 /article/ 路径下为你提供了全部的文章列表。

文章

所有文章都会默认被添加到文章列表中渲染在 /article/ 路径下。
如果你不希望该列表包含一些特定的文章，只需在文章的 frontmatter 中将 article 设置为 false。

置顶特定文章，只需在文章的 frontmatter 中将 sticky 设置为 true
对于置顶文章，你可以将 sticky 设置为 number 来设置它们的顺序。数值大的文章会排列在前面。

文章摘要

想要为文章添加摘要，你可以使用 注释来标记它。
任何在此注释之前的内容会被视为摘要。

默认情况下开发服务器中不提供自动摘录生成功能，请使用 hotReload 启用它。
我们推荐你优先使用 <!-- more --> 来标记摘要。
如果你的确需要一个特别的摘要的话，请自己设置在 frontmatter。

星标文章

在 frontmatter 中设置 star 为 true 星标一个文章。
星标后，用户就可以在 /star/ 页面中查看这些文章。

可以将 star 设置为 number 来设置它们的顺序。数值大的文章会排列在前面。

其他类型的文章

该主题为其他文章类型提供了单独的列表。

要添加其他文章类型，你应该在主题选项中设置 plugins.blog.type。
它应该是一个一数组包含描述你想要的类型的配置对象。

import { hopeTheme } from "vuepress-theme-hope";
export default hopeTheme({
  plugins: {
    blog: {
      type: [
        // 配置技术文章分类
        {
          key: "tech",
          filter: (page) => page.frontmatter.category === "tech",
          frontmatter: () => ({
            title: "技术文章列表",
            description: "这里展示所有的技术文章",
          }),
          path: "/tech/",
          title: "技术文章",
        },


        // 配置生活文章分类
        {
          key: "life",
          filter: (page) => page.frontmatter.category === "life",
          frontmatter: () => ({
            title: "生活文章列表",
            description: "这里展示所有的生活文章",
          }),
          path: "/life/",
          title: "生活文章",
        },


      ],
    },
  },
});

分类与标签

你可以通过 frontmatter 来为文章配置分类与标签，使它们出现在特定的分类与标签页面中。

分类设置

只需要在页面 frontmatter 中设置 category 数组，并设置一个或多个文章所属的分类，该文章会自动渲染在 /category/<分类名>/ 分类页面的列表中。

比如在某个页面设置:

---
category:
  - HTML
  - Web
---

标签

只需要在页面的 frontmatter 中设置 tag，并设置一个或多个文章所属的标签，该文章会自动渲染在 /tag/<标签名>/ 标签页面的列表中。

案例：

---
icon: pen-to-square
date: 2022-01-06
category:
  - Banana
  - Fruit
tag:
  - yellow
  - curly
  - long
star: 10
---

时间线

你可以通过 /timeline/ 访问时间页面，在页面中，你可以按照时间倒序查看所有的文章列表。

默认情况下所有在frontmatter中注明了写作日期（date: 2025-04-08）的文章都会显示时间线中。
如果你不希望某篇文章被包含，只需在文章的 frontmatter 中将 timeline 设置为 false。
查看页面：