摘要与封面

首页的文章列表中，可以显示文章摘要和封面图。

文章摘要

文章摘要的设置有三种方式：

• 使用 frontmatter.description属性
• 使用 <!-- more -->注释
• 使用 post.showCapture属性

如果三种方式都设置，只有一种生效，优先级为：使用 frontmatter.description属性 >使用 <!-- more -->注释 >使用 post.showCapture属性

frontmatter.description 属性

在文章页的 frontmatter使用 description来当作文章摘要。

---title:Description 示例date:2024-10-27 23:14:44permalink:/description/demodescription:Teek 译为科技者、探索者，是一个神秘而富有诗意的探索者形象，同时有自然、坚韧、品质感的意象，以及一个连接自然与未来的中性符号，中文为天客。---

description支持 HTML 文本，你可以添加一些 CSS 样式

---title:Description 示例date:2024-10-27 23:14:44permalink:/description/demodescription:'Teek 译为 <span style="color:#395AE3;">科技者、探索者</span>，是一个神秘而富有诗意的探索者形象，同时有自然、坚韧、品质感的意象，以及一个连接自然与未来的中性符号，中文为 <span style="color: #395AE3;">天客</span>。'---

警告

HTML 文本必须使用引号包起来，否则报错。

<!-- more -->注释

可以在首页的文章列表中，显示文章摘要。

在 Markdown 文档的某个位置添加 <!-- more -->注释，Teek 会自动将 <!-- more -->前的文本作为摘要，并且隐藏 h1 ~h3标题。

## 摘要示例这是一段文章摘要，将会显示在首页的文章礼包，默认隐藏 `h1 ~ h3`标题（摘要示例会被隐藏）。<!-- more -->## 其他内容这是一段其他内容。

提示

文章摘要会按照文章页的样式渲染，所以可以使用容器、链接、图片等功能。

摘要的内容也是文章内容的一部分，会显示在文章页中。

post.showCapture 属性

Teek 支持截取 Markdown 文档里的文本作为文章摘要显示在文章列表上，默认截取前 300 个文本，但是实际显示的文本会根据文章列表的空间限制而改变。

在 Teek 的主题配置中，将 post.showCapture设为 true来启用该功能：

import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({post:{showCapture:true,},});

提示

post.showCapture开启后，文章列表的所有文章都会显示摘要内容。

文章摘要位置

Teek 支持通过 post.excerptPosition设为 top或 bottom来改变文章摘要的位置。

文章摘要位置默认在文章列表的基本信息下面（bottom），可以将 post.excerptPosition设为 top来将文章摘要放在基本信息上面：

import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({post:{excerptPosition:"top",},});

文章封面图

Teek 支持在文章列表中显示封面图，需要在 frontmatter中添加 coverImg字段，值为图片链接。

---title:Description 示例date:2024-10-27 23:14:44permalink:/description/democoverImg:图片地址---

封面图模式

封面图支持 default和 full两个模式：

• default模式下，封面图会显示在文章列表的右边
• full模式下，封面图会变大，尽量铺满整个空间（图片尺寸要足够），且奇数的文章列表封面图会显示在右边，偶数的文章列表封面图显示在左边。

封面图模式默认为 default，如果使用 full模式，需要在 Teek 的主题配置中将 post.coverImgMode设为 full：

import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({post:{coverImgMode:"full",},});