VueVitePress文档启动器

vitepress-diataxis-template — Vue 文档模板

作者 Code2Life

基于 VitePress 的技术文档模板，按 Diátaxis 框架组织教程、指南、参考与解释四类内容，并集成评论、代码沙箱、图表、i18n 与 API 文档等插件。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-04查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

按 Diátaxis 框架组织教程、指南、参考与解释四类文档

02

集成 Giscus 评论与反馈

03

内置可交互代码沙箱、图片查看器与视频播放器

04

支持 Mermaid 图表与 Stoplight Elements API 文档生成

05

提供含 i18n 搜索的多语言支持与基于 GPT-translate 的自动翻译工作流

06

集成 PostHog 访问分析与会话记录/回放

模板详细介绍

这是一个面向技术文档站点的 VitePress 模板，核心特点是把 Diátaxis 文档框架作为内容组织方式，把文档分为教程、操作指南、参考与解释四类，适合需要长期维护、结构清晰的技术文档项目。

模板在 VitePress 基础上集成了若干文档常用能力：Giscus 评论与反馈、页面内图片查看器与视频播放器、Mermaid 图表扩展、可交互代码沙箱、Stoplight Elements 生成的 API 文档，以及包含 i18n 搜索的多语言支持。此外还提供基于 GPT-translate 的自动翻译工作流，以及 PostHog 的访问分析与会话记录/回放。

部署方面，README 给出了部署到 Cloudflare Pages 的说明，并附有快速开始文档。仓库采用 MIT 许可，代码可免费使用、修改、商用和分发；但演示图片、字体、图标等第三方素材以及域名、托管、分析等外部服务需另行核对许可与费用。

VueVitePress文档启动器

适合你的项目吗？

适用场景

  • 为开源项目或产品搭建结构化的技术文档站点
  • 需要同时提供教程、操作指南、参考与解释四类内容的文档项目
  • 希望文档内直接嵌入可运行代码示例、图表与 API 说明的团队
  • 需要多语言文档并希望借助自动翻译工作流维护译文的项目

适合人群

  • 使用 Vue 与 VitePress 技术栈的开发者
  • 需要按 Diátaxis 方法组织技术文档的团队
  • 希望文档具备评论、搜索、多语言与 API 文档能力的项目
  • 计划将文档部署到 Cloudflare Pages 的使用者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    README 提供快速开始文档，可按其步骤初始化项目。

  2. 2

    部署到 Cloudflare Pages 的流程见模板文档中的部署说明。

  3. 3

    Giscus、PostHog、GPT-translate 等外部服务需要自行配置并核对各自的使用条款与费用。

  4. 4

    演示图片、字体、图标等第三方素材需单独核对许可，不能仅凭代码的 MIT 许可判断。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 访问分析与会话记录/回放依赖第三方 PostHog 服务，需自行注册账号并配置，可能产生外部服务费用。
  • 自动翻译工作流依赖 GPT-translate 及相应 AI 服务，需自行配置 API 密钥，可能产生调用费用。
  • 评论与反馈功能依赖 Giscus 外部服务，需在 GitHub 上配置仓库与 Discussions 才能启用。
  • 部署说明针对 Cloudflare Pages，使用该托管服务需自行注册账号并遵守其条款与费用政策。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Web analysis & session record/reply on [PostHog](https://posthog.com/)

README 原文

Auto translation workflow based on [GPT-translate](https://github.com/3ru/gpt-translate)

README 原文

[Giscus](https://giscus.app/) comment & feedback

README 原文

Deploy to [Cloudflare Pages](https://docs.code2life.top/guide/deployment) in 3 minutes

README 原文
https://github.com/Code2Life/vitepress-diataxis-template/blob/main/LICENSE-CODEhttps://github.com/Code2Life/vitepress-diataxis-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-04。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 82 / 100
技术栈
Vue · VitePress
网站类型
文档 · 启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2024-11-17
截图检查日期
2026-10-04

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 917ed0b1b6651c3bb2f062feb4729fb26bcda18f0ab55fcb2a70a28ef1d700b6

2026-10-04T02:31:00.078Z

来源文件 / 仓库
<p align="center"><a href="javascript:void(0);" target="_blank" rel="noreferrer"><img width="300" src="./docs//public/logo.svg" alt="Logo"></a></p>

# VitePress Diataxis Template

Build living doc site, with best practices.

The full-fledged tech doc template powered by VitePress & Diátaxis framework.

[View Demo](https://docs.code2life.top)

## Highlight Features

- ✅ [Diátaxis](https://diataxis.fr/) doc framework
- ✅ [Giscus](https://giscus.app/) comment & feedback
- ✅ [Interactive code sandbox](https://docs.code2life.top/guide/playground)
- ✅ [Image viewer](https://docs.code2life.top/guide/plugin-examples#image-viewer) in-place
- ✅ [Video player](https://docs.code2life.top/guide/plugin-examples#video-js) in-place
- ✅ [Mermaid](https://mermaid.live/) markdown extension
- ✅ Web analysis & session record/reply on [PostHog](https://posthog.com/)
- ✅ Auto translation workflow based on [GPT-translate](https://github.com/3ru/gpt-translate)
- ✅ Out-of-box i18n including [i18n search](https://github.com/lucaong/minisearch/issues/201)
- ✅ [Stoplight Elements](https://stoplight-site.webflow.io/open-source/elements) API doc generation
- ✅ Deploy to [Cloudflare Pages](https://docs.code2life.top/guide/deployment) in 3 minutes

## Quick Start

[Quick Start in 3 minutes](https://docs.code2life.top/guide/get-started)

## Reference

- https://diataxis.fr/
- https://code2life.top/blog/0078-how-to-write-good-tech-docs
- https://github.com/logicspark/awesome-vitepress-v1
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

vitesse

vitesse

🏕 Opinionated Vite + Vue Starter Template

Vue · 启动器

vitesse-webext

vitesse-webext

⚡️ WebExtension Vite Starter Template

Vue · 启动器

laravel-vue-spa

laravel-vue-spa

A Laravel-Vue SPA starter kit.

Vue · 启动器

vue3-h5-template

vue3-h5-template

vue3-h5-template 是一个面向移动端 H5 项目的启动模板，基于 Vue3、Vite 和 Vant4 构建，同时集成了 TypeScript、Tailwindcss、Pinia、Vue-router 等常用…

Vue · 启动器

tov-template

tov-template

vite + vue3 + ts 开箱即用现代开发模板 | vite + vue3 + ts out-of-the-box modern development template

Vue · 启动器

shadcn-vue-landing-page

shadcn-vue-landing-page

New design 🎉 Vue + Shadcn-vue + TypeScript + Tailwind. Landing page template ease-to-use

Vue · 企业官网