npm.io
1.0.40 • Published 12h agoCLI

vitepress-theme-ninc

Licence
MIT
Version
1.0.40
Deps
14
Size
3.6 MB
Vulns
0
Weekly
0
Stars
3
Install scriptsThis package runs scripts during installation (preinstall/install/postinstall)

vitepress-theme-ninc

VitePress Theme Ninc

Typing SVG

一个功能丰富的 VitePress 主题 — 开箱即用的博客、文档与工具站。
配好就能跑,想改哪里就改哪里。

使用文档 · 在线演示 · 问题反馈 · 更新日志


npm version npm downloads license GitHub stars GitHub issues last commit PRs welcome

Vue TypeScript VitePress Vite pnpm Node.js


首页 - 浅色 首页 - 深色

为什么造这个轮子

用 VitePress 搭文档的人不少,但是搭建博客的人却寥寥无几,毕竟默认主题太素了。市面上的主题要么功能略有残缺,要么改起来费劲。我想要的是一个零基础可配置装上就能用、不用折腾插件的主题。

这个主题基于 imsyy/vitepress-theme-curve 二次开发。curve 的底子很好,我在此基础上做了大量重构和扩展:抽成 npm 包、重写配置系统、梳理使用文档、以及加了大量功能和样式,让它真正能开箱即用。

三分钟上手

# 用脚手架创建项目(推荐)
npx vitepress-theme-ninc init

# 跟着提示走:填站点名、选极简 or 完整配置
# 完事之后:
cd your-blog && pnpm install && pnpm dev

打开 http://localhost:5173,博客跑起来了。想改配置?看 使用文档,每个字段都有截图和说明。

内置的功能

评论系统 Twikoo,支持表情、图片、邮件通知
全站搜索 Algolia DocSearch + 本地搜索双模式
音乐播放器 APlayer + MetingJS,挂网易云平台歌单
AI 文章摘要 接入 OpenAI 兼容 API,构建时自动生成摘要
文章加密 密码保护指定文章,HMAC-SHA256
PWA 离线 自动生成 Service Worker,断网也能看
图片灯箱 Fancybox,点击放大、缩放、拖拽
RSS 订阅 构建时自动生成 rss.xml
暗色模式 跟随系统 + 手动切换,View Transitions 动画
NES 模拟器 内置红白机模拟器页面,init 自带超级马里奥(对,真的能玩)
代码组图标 按语言自动配图标
外链中转 自动转换外链为中转页跳转,保护隐私、提升 SEO
装备编年史 数据可视化页面,ECharts 驱动
等等等... 更多功能请看 使用文档
还有这些
  • 首页 Banner + 波浪动画 + 技能图标墙
  • 打赏按钮(微信 / 支付宝二维码)
  • 不蒜子访问量 / 访客数 / 文章阅读量
  • 自定义鼠标光标、Mac 风格卡片、Safari 模拟器
  • Lottie / GSAP / 三维粒子背景
  • SVG 雪碧图、Gzip + Brotli 压缩
  • Vue API 与组件全自动导入
  • 组件 Demo 插件、代码定位(Alt+Shift 点击跳源码)
  • TypeScript 类型完备,配置项有完整提示

更多功能请看 使用文档

界面预览

文章页 & 关于页

文章页 - 浅色 关于页 - 浅色

归档页 & 评论页

归档页 - 浅色 评论页 - 深色

页脚 & 装备页

页脚 - 浅色 装备页 - 深色

手动安装

不想用脚手架也行,在现有的 VitePress 项目中安装:

pnpm add vitepress-theme-ninc
# 或
npm install vitepress-theme-ninc
# 或
yarn add vitepress-theme-ninc

.vitepress/theme/index.ts

import Theme from 'vitepress-theme-ninc'
export default Theme

.vitepress/config.mts

import { defineConfig } from 'vitepress-theme-ninc/defineConfig'
import { themeConfig } from './themeConfig'

export default defineConfig(
  { sitemap: { hostname: 'https://your-site.com' } },
  themeConfig,
)

.vitepress/themeConfig.ts(最小配置):

import { defineThemeConfig } from 'vitepress-theme-ninc/defineThemeConfig'

export const themeConfig = defineThemeConfig({
  siteMeta: {
    title: 'My Blog',
    description: 'powered by ninc',
    site: 'https://example.com',
    avatar: '/images/avatar.png',
    lang: 'zh-CN',
    author: {
      name: 'Your Name',
      email: 'you@example.com'
    }
  }
})

写一篇文章(posts/hello.md):

---
title: Hello World
tags: [随笔]
categories: [公告]
date: 2026-07-09
description: 我的第一篇文章
---

# Hello World

这是使用 vitepress-theme-ninc 搭建的博客的第一篇文章。

CLI 命令

主题自带三个命令行工具:

命令 干什么
npx vitepress-theme-ninc init 从零生成一个完整的博客项目
npx vitepress-theme-ninc summary 本地预生成 AI 摘要到缓存文件
npx vitepress-theme-ninc init-proxy 生成 AI 摘要运行时代理脚手架(Cloudflare / Vercel)

后两条也可在 init 生成的项目里通过 pnpm run summary / pnpm run init-proxy 调用。完整用法见 CLI 文档

包导出

子路径 用途
vitepress-theme-ninc 主题入口(默认导出 Theme 对象)
vitepress-theme-ninc/defineConfig VitePress 配置工厂
vitepress-theme-ninc/defineThemeConfig 主题配置工厂(defu 深合并)
vitepress-theme-ninc/node Node 侧工具聚合
vitepress-theme-ninc/utils Node 侧 utils(getAllPosts 等)
vitepress-theme-ninc/views 客户端视图组件(NesGame 等)
vitepress-theme-ninc/components 客户端组件
vitepress-theme-ninc/store Pinia store
vitepress-theme-ninc/styles 全局样式入口(scss)
vitepress-theme-ninc/types TypeScript 类型声明

环境要求

  • Node.js >= 20
  • pnpm >= 9(推荐,npm/yarn 也行)
  • VitePress ^1.6.4
  • Vue ^3.5.0

文档

完整文档在 theme.ninc.top

想看实际效果,作者博客 就是这个主题在跑。

技术架构

几个关键决定:

  • 直接发布源码:不预构建,VitePress 在用户项目通过 Vite 处理 .ts / .mjs / .vue。主题入口面向 VitePress / Vite 构建链,不支持在纯 Node.js 20 里直接执行源码。
  • defu 深合并:用 defu 替代 Object.assign,嵌套配置不会被整体覆盖,用户只填想改的字段就行。
  • 双工厂函数defineConfig 管 VitePress 配置,defineThemeConfig 管主题配置,两边解耦。
  • patch-package:对 nes-vue 的运行时补丁通过 postinstall 自动应用,安装即可使用 NES 模拟器。

反馈与贡献

遇到问题:

欢迎 PR,大的改动建议先开 Issue 讨论一下方向再动手。

致谢

License

MIT 2023-present 呢喃Ninc

Keywords