基于 VitePress,不修改官方默认主题,代码量少
vitepress-blog-pure — VitePress 博客模板
作者 airene
基于 VitePress 的极简博客主题,通过复制文件到项目根目录使用,支持文章列表、标签、归档、本地搜索与 Giscus 评论。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
提供文章列表、标签页、归档页与关于页
发布时自动排除 trash、private-notes、draft 目录
使用 VitePress 自带本地搜索
评论模块已切换为 Giscus
采用 MIT 许可,可免费使用、修改、商用和分发
模板详细介绍
vitepress-blog-pure 是 airene 为 VitePress 编写的博客主题,作者在对比 Hexo、Hugo、VuePress、Docsify 后选择 VitePress,希望得到轻量、生成 HTML 干净、功能克制的博客方案。主题不修改 VitePress 官方默认主题,而是通过复制 .vitepress、pages、posts 等文件到项目根目录的方式使用,因此代码量较少,也便于后续发布为 npm 主题包。
功能上,它提供文章列表、标签页、归档页和关于页,发布时会排除 trash、private-notes、draft 三个目录中的 Markdown 文档,搜索使用 VitePress 自带的本地搜索,评论模块已从 utterances 切换为 Giscus。作者明确不打算维护广告、上一篇/下一篇这类功能。
使用限制方面,文章需要放在 posts 目录,frontmatter 中 title 为必填,date 和 tags 为推荐项;评论需要在 .vitepress/theme/components/CommentGiscus.vue 中按 Giscus 官网指引替换配置信息。作者自述当前功能更接近线上笔记展示,而非完整博客程序。
适合你的项目吗?
适用场景
- 用 VitePress 搭建以文章列表为主的个人博客
- 把 posts 目录中的 Markdown 笔记整理成可浏览的线上站点
- 需要标签页和归档页来组织文章的个人站点
- 希望通过 Giscus 接入 GitHub Discussions 评论的博客
适合人群
- 接受复制文件到项目根目录、而非安装 npm 主题包的使用方式
- 偏好轻量、功能克制的博客方案,不需要广告和上一篇/下一篇
- 文章以 Markdown 编写并愿意在 frontmatter 中填写 title、date、tags
- 能够按 Giscus 官网指引自行配置评论仓库信息
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
复制 .vitepress、pages、posts、public 等文件到项目根目录
- 2
新建 package.json 并安装 vitepress、globby、gray-matter、fs-extra、vitepress-plugin-comment-with-giscus 等依赖
- 3
修改 .vitepress/config.ts 中的站点名称与评论仓库信息
- 4
在 .vitepress/theme/components/CommentGiscus.vue 中按 Giscus 官网指引替换配置
- 5
执行 npm run dev 查看效果,也可使用 pnpm、yarn、bun 等工具
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 评论功能依赖 Giscus 外部服务,需按 Giscus 官网指引自行配置并替换 CommentGiscus.vue 中的仓库等信息,未配置则评论不可用。
- 文章 frontmatter 中 title 为必填项,缺失会导致文章元数据不完整;date 与 tags 为推荐项,缺失时 date 会默认使用当前时间。
- 文章需放在 posts 目录下,发布时仅排除 trash、private-notes、draft 三个目录的 Markdown 文档,其他位置的文章不会被正常收录。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
请按照giscus官网的指导操作更换`.vitepress/theme/components/CommentGiscus.vue`中的信息
README 原文
其中 title 为必须有的内容,其他随意
README 原文
https://github.com/airene/vitepress-blog-pure/blob/main/LICENSEhttps://github.com/airene/vitepress-blog-pure/blob/main/README.md推荐放到 posts 目录中
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 91 / 100
- 技术栈
- VitePress
- 网站类型
- 博客
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-09-21
- 截图检查日期
- 2026-10-01
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 VitePress。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: ab0ea390a0fd942fb0341b0790bd954d0fa067d619358aae5081900efc5d4232
2026-10-01T03:52:30.425Z
来源文件 / 仓库# vitepress theme blog pure
[Live Demo](https://ti.bi)
## 动机
一直想找一个架构足够干净的 ssg 程序,hexo,hugo,vuepress,docsify 等各种网上能找的都试了,总有不满意的地方,包括这些程序的主题也没有直接满意的(编程语言不会,功能太多,生成的 html 的文件还有不少插件的残留等)。
vitepress 足够轻量,系统干净,博客主题这块又是空白,所以做一个自己满意的博客主题吧,诉求就是功能可以少,但要足够的轻量。
认真来说对比博客程序的话,其实当前的功能更像是线上笔记展示。
**计划中的功能**
- [ ] 等 vitepress 本身稳定了,就做成 npm package 方式的 theme **keep going**
- [x] 修改原有的评论模块为Giscus,因为原有的有不少问题,新的安装地址:https://giscus.app/ 请按照giscus官网的指导操作更换`.vitepress/theme/components/CommentGiscus.vue`中的信息
- [x] 发布时排除 `trash` `private-notes` `draft` 这三个目录的md文档
- [x] 搜索 - vitepress后来的版本天生本地搜索,对普通人来说比algolia好用,很省心
- [x] ~~留言 基于~~ [utteranc](https://utteranc.es/) ,⚠️2025-04-24 已经换成giscus
- [x] 分页?!
**不打算维护的功能**
- 广告 - 一般人用不上
- 上一篇|下一篇 - 博客文章本来没什么关联性,价值不大
## changelog
[changelog](./changelog.md)
## 使用方法
1.复制以下文件到你的项目根目录
```
├── .vitepress
├── pages
│ ├── about.md
│ ├── archives.md
│ └── tags.md
├── posts //存放博客文章
├── public //[可选]
└── favicon.ico
```
2.新建一个 package.json 文件,执行 npm i,包信息自己看着调整
```json
{
"name": "vitepress-blog-pure",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"dev": "vitepress dev --host 0.0.0.0",
"build": "vitepress build",
"preview": "vitepress preview"
},
"keywords": [],
"author": "",
"type": "module",
"license": "ISC",
"devDependencies": {
"vitepress": "^1.6.4",
"globby": "^15.0.0",
"gray-matter": "^4.0.3",
"fs-extra": "^11.3.2",
"vitepress-plugin-comment-with-giscus": "^1.1.15"
}
}
```
3.修改 `.vitepress/config.ts` 中的基本配置信息(站点名称,评论仓库信息)
4.执行 `npm run dev` 即可查看效果, 其他工具随意 pnpm,yarn,bun 等
**ps. 写文章的格式和位置**
推荐放到 posts 目录中,格式:
```markdown
---
date: 2021-06-30
title: .zsh_history历史记录优化
description: 历史重复的命令太多了,不用grep都不太好找
tags:
- macOS
---
# .zsh_history历史记录优化 -- 用{{ $frontmatter.title }}会影响本地查询,可惜
正文
```
**其中 title 为必须有的内容,其他随意,推荐含有 date,不然会默认一个当前时间,推荐含有 tags,这样也可以在标签页面显示**
## 感谢
其实没怎么写过 nodejs,从掘金看到的一篇文章带来的灵感 - [VitePress 极简博客搭建](https://juejin.cn/post/6896382276389732359)
[Moking1997](https://github.com/Moking1997) 开发的比较早,vitepress 的版本还是 0.7.x,现在已经 0.15.x 了,变化还是挺大的,已经不太能通过提 pr 的方式维护了。
主要的变化是适配 vitepress 的新版本,主题这块采用的实现思路不一样,并不改动官方默认主题,这样可以实现极少的代码量和为将来能发布成 npm 主题包的做准备。
比如:
sidebar 使用 hackcss 的方式实现想要的效果
[Albert26193](https://github.com/Albert26193) 第一个给本project 提pull request的人,虽然没直接合进来,还是感谢。
[InsHomePgup](https://github.com/InsHomePgup)
[FisherMS](https://github.com/FisherMS)
## License
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2021-present, Airene
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

sugar-blog
✍️📚我写博客的地方🤪🤪🤪记录随笔与学习笔记,仓库包含:博客内容,博客主题、博客模板、vitepress离线全文搜索插件、VitePress RSS 支持插件,图片预览插件;a blog theme use vi…
VitePress · 博客

vitepress-nav-template
基于 VitePress 的个人前端导航页面模板
VitePress · 博客

vitepress-blog-starter
Vitepress Blog Starter Template
VitePress · 博客

vitepress-theme-trigger
Blog theme for VitePress with Tailwind CSS. 為建立部落格而生的 VitePress 主題
VitePress · 博客

KiwiBlog
一个分享日常的博客,这个平台上可以找到很多有趣的博客内容 🥝
VitePress · 博客

vitepress-theme-ououe
A vitepress blog theme
VitePress · 博客
