VuePress Theme Hope 博客文章功能使用指南

Life Myth2026/1/12大约 4 分钟约 1308 字

VuePress Theme Hope 博客文章功能使用指南

本文档详细介绍了 VuePress Theme Hope 博客文章的各项功能和配置方法。

一、基础配置

1. 文章 frontmatter 基础设置

---
title: 文章标题
description: 文章描述
author: 作者名
date: 2026-01-14
category: 分类名
tag: [标签1, 标签2, 标签3]
article: true
---

2. 文章存放路径

所有博客文章默认存放在 docs/blog/posts/ 目录下，主题会自动将这些文章添加到文章列表中。

3. 排除特定文章

如果你不希望某些文章被添加到文章列表中，可以在文章的 frontmatter 中将 article 设置为 false：

---
article: false
---

二、文章置顶功能

1. 配置方式

在文章的 frontmatter 中设置 sticky 属性：

---
# 设置为 true 或数字，数值越大，排名越靠前
sticky: 100
---

2. 置顶规则

所有置顶文章会显示在普通文章之前
对于多个置顶文章，数值大的会排列在前面
如果只是设置为 true，则默认值为 1

3. 示例

---
title: 置顶文章示例
sticky: 100
---

三、文章摘要功能

1. 使用 `` 注释（推荐）

在文章中使用  注释来标记摘要：

# 文章标题

这部分内容会被视为摘要。

<!-- more -->

这部分内容不会被包含在摘要中。

2. 在 frontmatter 中设置 `excerpt`

---
# 设置自定义 HTML 摘要
excerpt: '<p>这是通过 frontmatter 设置的自定义摘要</p>'
---

3. 自动生成摘要

主题默认会自动生成摘要，你可以在主题配置中设置摘要长度：

// .vuepress/config.js
export default {
  theme: hopeTheme({
    plugins: {
      blog: {
        // 设置自动生成摘要的长度，0 表示不自动生成
        excerptLength: 300,
      },
    },
  }),
};

4. 摘要限制

出于性能考虑，默认情况下开发服务器中不提供自动摘录生成功能，可使用 hotReload 启用
推荐优先使用  来标记摘要
自动生成的摘要或使用注释标记的摘要，会被渲染成 HTML 字符串
摘要中的组件不会正常渲染成 Vue 组件，只会解析为原生标签

四、星标文章功能

1. 配置方式

在文章的 frontmatter 中设置 star 属性：

---
# 设置为 true 或数字，数值大的会排列在前面
star: 100
---

2. 星标效果

所有星标文章会显示在 /star/ 页面中
星标文章会显示在博客主页侧边栏的文章栏目中
星标文章在文章列表中会显示星标标记

3. 星标规则

所有星标文章会显示在 /star/ 页面中
对于多个星标文章，数值大的会排列在前面
如果只是设置为 true，则默认值为 1

五、自定义文章类型

1. 配置方式

在 .vuepress/config.js 中，通过 plugins.blog.type 配置自定义文章类型：

// .vuepress/config.js
export default {
  theme: hopeTheme({
    plugins: {
      blog: {
        type: [
          {
            key: "tutorial",
            filter: (page) => page.frontmatter.category === "教程",
            sorter: (pageA, pageB) => {
              return new Date(pageB.frontmatter.date) - new Date(pageA.frontmatter.date);
            },
            frontmatter: (localePath) => ({
              title: "教程文章",
              description: "这是一个教程文章列表页面",
            }),
          },
        ],
      },
    },
  }),
};

2. 多语言配置

在主题配置中添加 blogLocales 配置，为自定义文章类型设置名称：

// .vuepress/config.js
export default {
  theme: hopeTheme({
    blogLocales: {
      tutorial: "教程",
      note: "笔记",
    },
  }),
};

3. 访问路径

自定义文章类型的访问路径为 /key/，其中 key 是你在配置中设置的 key 值。

例如，设置 key: "tutorial"，则访问路径为 /tutorial/。

六、最佳实践

1. 文章组织

合理使用分类和标签，便于用户查找
为每篇文章添加有意义的标题和描述，有利于 SEO
定期更新文章，保持内容的时效性

2. 摘要设置

对于重要文章，建议使用  手动标记摘要
摘要长度控制在 150-300 字之间，不宜过长
摘要应包含文章的核心内容，吸引用户阅读全文

3. 置顶和星标使用

置顶文章数量不宜过多，建议控制在 3-5 篇
星标文章用于展示精品内容，建议控制在 10-20 篇
定期更新置顶和星标文章，确保内容的相关性

4. 自定义文章类型

根据网站内容结构合理设置自定义文章类型
为每个自定义类型设置明确的筛选条件和排序规则
确保自定义类型的 key 简洁明了，便于用户记忆

七、常见问题

1. 文章没有显示在列表中？

检查文章是否存放在 docs/blog/posts/ 目录下
检查文章的 frontmatter 中是否设置了 article: true
检查主题配置中的 plugins.blog.filter 规则

2. 摘要没有正确生成？

确保使用了正确的  注释格式
检查主题配置中的 plugins.blog.excerptLength 设置
开发环境下，确保启用了 hotReload 选项

3. 置顶文章没有生效？

检查 sticky 属性的取值，确保是数字或布尔值
确保文章的 article 属性设置为 true

4. 自定义文章类型页面没有显示？

检查 key 值是否唯一
检查 filter 函数是否正确
确保有符合条件的文章

八、相关链接

更新时间：2026-01-20