移动鼠标或拖拽中间手柄切换对比
# 初始化项目（交互式生成全部文件）
npx vitepress-theme-ninc init
# 安装依赖并启动
pnpm install
pnpm dev由 VitePress 驱动
直接在 Markdown 中使用 Vue 语法和组件，将 Markdown 变成优雅的博客，只需几分钟。
由 VitePress 驱动，Markdown 即博客
深度可配置，defu 深合并
动效丰富，视觉冲击力强
开箱即用，一行命令初始化
使用场景
一个主题，多种用途
个人博客
记录技术文章、生活随笔，支持评论、点赞、RSS 订阅
- Twikoo 评论
- 文章封面
- 标签分类
- RSS 订阅
项目文档
为开源项目或团队提供完整的文档站，支持全文搜索
- Algolia 搜索
- 代码组
- PWA 离线
- 多语言
小组件集合
在 Markdown 中直接渲染 Vue 组件，时间线、按钮、卡片等开箱即用，交互即写即得
- Vue 组件直渲染
- 时间线容器
- 代码演示
作品集
展示个人项目、设计稿、摄影作品，支持图片灯箱
- Fancybox 灯箱
- 相册布局
- 音乐播放
- 暗色模式
功能亮点
深入了解主题的核心能力
配置即一切
基于 defu 深合并机制，只需声明想改的字段，其余自动沿用默认值。无需复制整个配置文件，themeConfig 让你精准控制每一个细节。
- 17 个配置模块
- defu 深合并
- TypeScript 类型提示
- 热更新支持
// themeConfig.ts
import { defineThemeConfig } from 'vitepress-theme-ninc'
export const themeConfig = defineThemeConfig({
siteMeta: {
title: '我的博客',
site: 'https://blog.example.com',
lang: 'zh-CN'
},
comment: { enable: true, twikoo: { envId: '...' } },
// 只需声明想改的字段，其余自动补全
pwa: { enable: true },
nav: { enable: true }
})Markdown 扩展
在标准 Markdown 之上扩展了 timeline、radio、button、card 四种容器，并重写表格渲染规则，让你的内容更生动。
- 时间线容器
- 任务清单
- 按钮卡片
- 表格自动包裹
// .vitepress/config.mts
import { defineConfig } from 'vitepress-theme-ninc/defineConfig'
export default defineConfig({}, themeConfig, {
markdown: {
timeline: true, // 时间线容器
checkbox: true, // 任务清单 ✓ ✗
container: ['button', 'card'], // 容器类型
tableWrap: true // 表格自动包裹
},
// 在 .md 中使用 ::: type 语法即可
// 例: ::: timeline 2025 年 ... :::
})PWA 离线
自动生成 Service Worker，支持离线访问与可安装到手机桌面。读者即使断网也能浏览已访问的页面。
- 自动 SW 生成
- 可安装应用
- 离线缓存
- 自动更新
// .vitepress/config.mts
import { defineConfig } from 'vitepress-theme-ninc/defineConfig'
export default defineConfig({}, themeConfig, {
pwa: true, // 一键开启 PWA
pwaManifest: {
name: '我的博客',
short_name: '博客',
theme_color: '#42b883',
display: 'standalone'
}
})自动导入
unplugin-auto-import + unplugin-vue-components，API 与组件全自动导入，无需手动 import，开发体验丝滑。
- API 自动导入
- 组件自动注册
- 按需引入
- Tree-shaking
<script setup lang="ts">
// 无需手动 import，API 全自动注入
const count = ref(0) // ref ← 自动导入
const double = computed(() => count.value * 2) // computed
watch(count, (v) => console.log('count:', v)) // watch
// useRoute / useData 自动导入
const route = useRoute()
const { theme } = useData()
// 自定义 store 也自动导入
const store = mainStore()
</script>核心功能
12 个内置功能模块，覆盖博客、工具站、数据可视化等多种场景
评论系统
内置 Twikoo 评论系统，开箱即用，支持邮件通知、表情、反垃圾等完整能力。
全站搜索
内置本地搜索与 Algolia DocSearch 集成，毫秒级响应，支持中文分词。
PWA 离线
自动生成 Service Worker，支持离线访问与可安装到手机桌面。
音乐播放器
APlayer + MetingJS 驱动，支持网易云、QQ 音乐等多平台歌单。
自定义光标
内置精致鼠标光标，默认、链接、文本三种状态分别适配，明暗主题自动切换。
图片灯箱
Fancybox 灯箱，点击图片自动放大，支持相册浏览、缩放、旋转。
RSS 订阅
自动生成 RSS 订阅源，读者可通过 RSS 阅读器订阅更新。
外链中转
自动将外链转换为中转页跳转，保护用户隐私，提升 SEO。
暗色模式
完整的明暗主题适配，支持跟随系统、手动切换、记忆偏好。
丰富动画
基于 GSAP、CSS 动画，页面切换丝滑流畅，视觉体验出众。
NES 模拟器
内置 NES 模拟器，init 自带超级马里奥，支持存档读档、TAS 录像、双人键盘与手柄控制。
自动导入
unplugin-auto-import + unplugin-vue-components，API 与组件全自动导入。
性能数据
极速加载，丝滑体验
Markdown 扩展
在标准 Markdown 之上，主题内置了 8 种扩展语法
timeline时间线容器radio任务清单buttonCTA 按钮card内容卡片keybutton按键标记tabs标签页attrs属性语法code-group代码组主题对比
VitePress 生态 vs 传统文档方案
| 框架特性 | theme-ninc | 传统方案 |
|---|---|---|
| Vite 驱动 · 毫秒级热更新 | ||
| Vue 组件嵌入 Markdown（script setup） | ||
| 零配置 TypeScript 全链路 | ||
| Rollup 生产构建 · Tree-shaking | ||
| SPA 开发 + SSG 部署混合渲染 | ||
| 原生 ESM 模块支持 | ||
| defu 配置深合并 · 零冲突定制 | ||
| API / 组件自动导入 | ||
| 主题热插拔 · 无需 fork 源码 | ||
| 内置 PWA 离线支持 |
三步上手
从安装到发布，5 分钟搞定
npx vitepress-theme-ninc initpnpm installpnpm dev