TODO / Plan

• ✅ nprogress

  可使用插件 vitepress-plugin-nprogress

  安装 nprogress 依赖:

  pnpm add nprogress @types/nprogress -D

  [手动实现] 在布局文件中使用:

  <script setup lang="ts">
  import {useRouter} from 'vitepress';
  import nprogress from 'nprogress';
  import 'nprogress/nprogress.css';
  
  const router = useRouter();
  const originalBeforeRouteChange = router.onBeforeRouteChange;
  const originalAfterRouteChange = router.onAfterRouteChanged;
  
  router.onBeforeRouteChange = to => {
    nprogress.start();
    originalBeforeRouteChange?.(to);
  };
  
  router.onAfterRouteChanged = to => {
    nprogress.done();
    originalAfterRouteChange?.(to);
  };
  </script>

  TODO 浏览器返回或前进时 nprogress 未显示

• ✅ 评论 giscus

  pnpm add vitepress-plugin-comment-with-giscus -D

• 🚧 标签及标签页 tags

• 🚧 友情链接

• 🚧 广告+网站流量分析

• 🚧 MDX 支持

• 自动生成 sitemap

  • 给你的 Next.js 项目优雅地添加 sitemap

• 🚧 归档 archive (按年份降序, 提供排序切换)

• 🚧 Heading 前置 H1 ~ H6

• ✅ 集成 markdown-it-footnote 以支持脚注

• 🚧 集成 slidev

• 🚧 codepen 等媒体网站展示

• vitepress 插件合集

• 🚧 embed, 如 codepen

• 🚧 代码块折叠功能 (带动画) 侧边栏展开折叠动画 (collapse)

• 🚧 frontmatter 补全 (读取自 frontmatter.d.ts)

  • 编辑 frontmatter 或在 md 中使用 frontmatter 时补全 (插件)
  • 在 vue 中使用时补全

• ✅ 回到顶部

  • vitepress-plugin-back-to-top

• 🚧 实时阅读进度, 展示于回到顶部按钮

• 🚧 路径别名

• 🚧 mermaid

  • Mermaid - Docs
  • Mermaid - GitHub
  • Mermaid 在线编辑器

• ✅ word cloud (标签) 词云

  • wordCloud.vue

    基于 @antv/g2plot

• ✅ commit heatmap

  • cal-heatmap
  • vue-calendar-heatmap

• 🚧 复刻 medium-zoom 至 uniapp

  pnpm add medium-zoom -D

• ✅ 面包屑 breadcrumb

• 🚧 useSetting 右侧边呼出

• 🚧 付费阅读

• 🚧 知乎、CSDN 展开阅读全文功能, 逐渐模糊最后一行

• 🚧 更多语法高亮支持, 如 ignore 文件

• 🚧 demo 组件

• • vitepress-demo-preview
• • vitepress-theme-demoblock

• 🚧 code group 当前页联动, tabs 切换下划线动画

• ✅ nav sidebar 添加图标

• mermaid

  • vitepress-plugin-mermaid

• 🚧 页面切换动画

• 🚧 基于 nuxt/vue3/ts/unocss/nest/mongodb/redis/mysql 开发后台管理系统

• ✅ tools

  roadmap.sh

• 🚧 tree-list 组件展示 tree 命令结果, 语法可参照

  • dumi - Tree
  • DocTree - quasar
  • tree codesandbox - react spring
  • tree 源码 - react spring

Reference

• Tmiracle の 技术小站
  • vitepress-plugin-codeblocks-fold
  • vitepress-plugin-comment-with-giscus

BUG

以下代码块在展示时缺少部分行号 (当开启行号时):

<script setup lang="ts">
import {ref} from 'vue';

const message = ref('Hello world!');
</script>

Contributors

why

Changelog

Last edited 19 days ago

View full history

1927964-feat: add loading animations

b87dfb4-style: add rainbow-indents.css

f3b6f02-style: fix style

4f0fac7-feat: auto numbering toc