Skip to content

摘要

摘要会在文章列表的标题下方展示,分为自动摘要和手动摘要,其中手动摘要优先级高于自动摘要

摘要的内容会将文章的各级标题、代码块移除,仅展示文章正文内容

提示

无论摘要内容多少,在文章列表中 PC 端最多展示一行;移动端最多展示两行

自动摘要

通过 usePosts 方法的 excerpt 参数进行启用,值为摘要的字数,默认为 0 不开启。当填入数字后,所有文章都会开启自动摘要

.vitepress/config.ts
ts
const { posts } = await usePosts({ excerpt: 100 });

手动摘要

手动摘要可以单独为一篇文章启用摘要功能,无需与自动摘要同时启用。当自动摘要与手动摘要同时开启时,也会优先展示手动摘要的内容。

手动摘要分为 description<!--more-->,前者用于完全自定义的摘要内容,与正文内容无关;后者则用于指示正文摘要的结束位置。同时前者的优先级也高于后者,如果文章存在 description,会优先展示。

description

通过在 Frontmatter 中设置 description 可以为文章添加自定义的摘要内容 。

yaml
description: '自定义摘要内容'

在 Markdown 文章中可以手动添加 <!--more--> 标记,用于指示摘要的结束位置,当标记存在时,标记前面的内容均为摘要内容,可以不受自动摘要的字数限制。

meta

VitePress 会自动将 Frontmatter 中的 description 添加到 <meta> 标签中,但另外两种摘要不会自动添加,我们需要通过 transformPageData 钩子将它添加进去。

.vitepress/config.ts
ts
const { posts, descriptionMap } = await usePosts({ excerpt: 150 });

export default defineConfig<ThemeConfig>({
  transformPageData(pageData) {
    const { frontmatter, description } = pageData;
    const { id } = frontmatter;

    if (!description) {
      pageData.description = descriptionMap.get(id) as string;
    }
  }
});
经典款
RackNerd

RackNerd

新手入门首选

洛杉矶 DC3 机房 | 3T 大流量

1C / 1GB / 20GB SSD / 3TB 流量

$21.99/年
欧洲优化
V.PS

V.PS

可选荷兰 / 德国

欧洲三网优化 | 电信 GIA + 联通 9929 + 移动 CMIN2

2C / 1GB / 20GB NVMe / 1TB 流量

€6.95/月
关注微信公众号
优化线路
Evoxt

Evoxt

最便宜的亚太优化线路

马来西亚 电信 GIA / 联通 9929
优惠码:AFF2377-DEV

1C / 512MB / 5GB SSD / 150GB 流量

$3.32/月
优化线路
搬瓦工

搬瓦工

15 个机房自由切换

洛杉矶 DC6 机房
电信 / 联通 GIA + 移动 CMIN2

2C / 2GB / 40GB SSD / 2.5TB 流量

$49.99/季