文章摘要功能演示

功能说明

VuePress Theme Hope 支持多种方式设置文章摘要，用于在文章列表中展示文章的简短描述。

方式一：使用 注释

这是通过 <!-- more --> 注释标记的摘要内容。任何在此注释之前的内容会被视为摘要。

这部分内容不会被包含在摘要中，只会在文章详情页中显示。

方式二：在 frontmatter 中设置 excerpt

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

方式三：自动生成摘要

主题默认情况下会自动生成摘要。你可以在主题选项中通过 plugins.blog.excerptLength 设置自动生成摘要的长度。

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

摘要限制

1. 出于性能考虑，默认情况下开发服务器中不提供自动摘录生成功能，可使用 hotReload 启用
2. 推荐优先使用 <!-- more --> 来标记摘要
3. 自动生成的摘要或使用注释标记的摘要，会被渲染成 HTML 字符串
4. 摘要中的组件不会正常渲染成 Vue 组件，只会解析为原生标签
5. • 功能说明
     • 方式一：使用 注释
     • 方式二：在 frontmatter 中设置 excerpt
     • 方式三：自动生成摘要
   • 摘要限制
   • 最佳实践
6. 如果链接和脚注的引用内容在摘要外，它们无法正确渲染

最佳实践

• 对于重要文章，建议使用 <!-- more --> 手动标记摘要，确保摘要内容准确
• 对于普通文章，可以使用自动生成摘要功能
• 如果需要特殊格式的摘要，可以在 frontmatter 中设置 excerpt

---

演示文章，用于展示 VuePress Theme Hope 的文章摘要功能