时间线

提示

采用了 @HanochMa/vitepress-markdown-timeline 的项目

Demo：https://hanochma.github.io/daily/2023-04

安装插件

提示

• 推荐使用 pnpm 安装,我在子项目的，所以需要切换到子项目的 Demo\docs-base 目录下安装

pnpm

cd Demo\docs-base
pnpm add -D vitepress-markdown-timeline

yarn

yarn add -D vitepress-markdown-timeline

npm

npm install vitepress-markdown-timeline

bun

bun add -D vitepress-markdown-timeline

注册插件

• 在 Demo\docs-base\.vitepress\config.mts 中注册 markdown 解析插件

注意

timeline不要在“export default defineConfig({})进行插件注册”，否则影响导航卡片样式不生效。详情查看TeeK 插件配置

• 错误示例

export default defineConfig({
  markdown: {
    config(md) {
      md.use(timeline); //时间线插件
    },
  },
})

• 正确示例

import timeline from "vitepress-markdown-timeline"; // 导入时间线插件

const tkConfig = tkThemeConfig {
  markdownPlugins: [ 
    (md: any) => md.use(timeline), //时间线插件
  ],
}

配置插件

• 在 Demo\docs-base\.vitepress\theme\index.ts 中引入时间线样式

import "vitepress-markdown-timeline/dist/theme/index.css"; // 引入时间线样式

效果

最后我们在markdown文件中，按格式使用即可

输入：

::: timeline 2025-03-23

- 一个非常棒的、轻量、简易开源 `VitePress`主题框架 目前 star 3.1k
- 开源地址 https://github.com/Kele-Bingtang/vitepress-theme-Teek
  :::

::: timeline 2025-01-13

- `Teek`首次提交
  :::

输出：

2025-03-23

• 一个非常棒的、轻量、简易开源 VitePress主题框架 目前 star 3.1k
• 开源地址 https://github.com/Kele-Bingtang/vitepress-theme-Teek

2025-01-13

• Teek首次提交