One

主题

摘要与封面 ​

摘要与封面 ​

首页的文章列表中，可以显示文章摘要和封面图，并且可以点击放大预览封面图。

文章摘要 ​

设置方式 1 ​

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

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

markdown
## 摘要示例

这是一段文章摘要，将会显示在首页的文章礼包，默认隐藏 `h1 ~ h3` 标题（摘要示例会被隐藏）。

<!-- more -->

## 其他内容

这是一段其他内容。

提示

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

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

设置方式 2 ​

除了使用 <!-- more --> 注释，还可以在 frontmatter 使用 description 来当作文章摘要。

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

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

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

警告

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

设置方式 3 ​

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

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

ts
import tkThemeConfig from "vitepress-theme-teek/config";

const tkConfig = tkThemeConfig({
  post: {
    showCapture: true,
  },
});

提示

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

文章摘要位置 ​

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

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

ts
import tkThemeConfig from "vitepress-theme-teek/config";

const tkConfig = tkThemeConfig({
  post: {
    excerptPosition: "top",
  },
});

文章封面图 ​

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

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

封面图可以点击放大预览。

Teeker 也支持 coverImg 配置多个图片链接，但是在文章列表中只会显示第一个图片，可以点击图片放大预览，然后切换查看其他图片。

yaml
---
title: Description 示例
date: 2024-10-27 23:14:44
permalink: /description/demo
coverImg:
  - 图片地址 1
  - 图片地址 2
---

封面图模式 ​

封面图支持 default 和 full 两个模式，默认为 default 模式。

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

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

ts
import tkThemeConfig from "vitepress-theme-teek/config";

const tkConfig = tkThemeConfig({
  post: {
    coverImgMode: "full",
  },
});