文章列表配置
post
文章列表配置。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
post: {
postStyle: "list", // 文章列表风格
excerptPosition: "top", // 文章摘要位置
showMore: true, // 是否显示更多按钮
moreLabel: "阅读全文 >", // 更多按钮文字
coverImgMode: "default", // 文章封面图模式
showCapture: false, // 是否在摘要位置显示文章部分文字,当为 true 且不使用 frontmatter.describe 和 <!-- more --> 时,会自动截取前 300 个字符作为摘要
},
});
yaml
---
tk:
post:
postStyle: list
excerptPosition: top
showMore: true
moreLabel: "阅读全文 >"
coverImgMode: default
showCapture: false
---
ts
import type { TitleTagProps } from "vitepress-theme-teek";
interface Post {
/**
* 文章模板风格,list 为列表风格,card 为卡片风格
*
* @since v1.1.5
* @default list
*/
postStyle?: "list" | "card";
/**
* 文章摘要位置
*
* @default bottom
*/
excerptPosition?: "top" | "bottom";
/**
* 是否显示更多按钮
*
* @default true
*/
showMore?: boolean;
/**
* 更多按钮文字
*
* @default '阅读全文 >'
*/
moreLabel?: string;
/**
* 文章列表为空时的标签
*
* @default '暂无文章'
*/
emptyLabel?: string;
/**
* 文章封面图模式
*
* @default 'default'
*/
coverImgMode?: "default" | "full";
/**
* 是否在摘要位置显示文章部分文字,当为 true 且不使用 frontmatter.describe 和 `<!-- more -->` 时,会自动截取前 300 个字符作为摘要
*
* @default false
*/
showCapture?: boolean;
/**
* 文章信息(作者、创建时间、分类、标签等信息)是否添加 | 分隔符
*
* @default false
*/
splitSeparator?: boolean;
/**
* 是否开启过渡动画
*
* @default true
*/
transition?: boolean;
/**
* 自定义过渡动画名称
*
* @default 'tk-slide-fade'
*/
transitionName?: string;
/**
* 列表模式下的标题标签位置(postStyle 为 list)
*
* @since v1.1.5
* @default 'right'
*/
listStyleTitleTagPosition?: TitleTagProps["position"];
/**
* 卡片模式下的标题标签位置(postStyle 为 list)
*
* @since v1.1.5
* @default 'left'
*/
cardStyleTitleTagPosition?: TitleTagProps["position"];
/**
* 默认封面图地址,如果不设置封面图则使用默认封面图地址
*
* @since v1.2.1
* @default []
*/
defaultCoverImg?: string[];
}
postStyle
配置项来设置文章列表的风格:- 当
postStyle
为list
时,文章列表为列表风格 - 当
postStyle
为card
时,文章列表为卡片风格,且excerptPosition
、showMore
、moreLabel
、coverImgMode
配置项失效
page
首页 Post 文章列表的分页配置,完全是 ElPagination 的 props。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
page: {
pageSize: 20,
},
});
yaml
---
tk:
page:
pageSize: 20
---
ts
import type { IconProps } from "vitepress-theme-teek";
interface TeekConfig {
/**
* 首页 Post 文章列表的分页配置
*/
page?: {
/**
* 总条目数
*/
total?: number;
/**
* 总页数,与 total 二选一
*/
pageCount?: number;
/**
* 设置最大页码按钮数。 页码按钮的数量,当总页数超过该值时会折叠
*
* @default 7
*/
pagerCount?: number;
/**
* 组件布局,子组件名用逗号分隔
*
* @default 'prev, pager, next, jumper, ->, total'
*/
layout?: string;
/**
* 替代图标显示的上一页文字
*/
prevText?: string;
/**
* 上一页的图标, 比 prev-text 优先级更高
*/
prevIcon?: IconProps["icon"];
/**
* 替代图标显示的下一页文字
*/
nextText?: string;
/**
* 下一页的图标, 比 next-text 优先级更高
*/
nextIcon?: IconProps["icon"];
/**
* 分页大小
*
* @default 'default'
*/
size?: Size;
/**
* 是否为分页按钮添加背景色
*
* @default false
*/
background?: boolean;
/**
* 是否禁用
*
* @default false
*/
disabled?: boolean;
/**
* 只有一页时是否隐藏
*
* @default false
*/
hideOnSinglePage?: boolean;
};
}