VitePress博客

vitepress-theme-blog — VitePress 博客模板

作者 Skslience

基于 VitePress 的博客主题模板，提供自动侧边栏、标签页、归档时间轴、Gitalk 评论与版权声明等扩展。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

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

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

值得关注的模板亮点

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

01

按规律性目录存放文章后自动生成侧边栏，并支持通过 frontmatter 的 isTop: true 生成置顶分组

02

提供《我的标签》标签页与标签云，以及《我的归档》时间轴，归档可按分类、标签筛选

03

文章页展示原创状态、作者、发布时间、分类与标签等元数据，文末可配置版权声明协议

04

附带 GitHub Actions 工作流，push 后自动打包部署 GitHub Pages，并含可删减的 Gitee Pages 同步配置

05

Markdown 支持脚注、公式与 Mermaid 流程图，评论目前仅支持 Gitalk

模板详细介绍

vitepress-theme-blog 是一个基于 VitePress 的博客类网站模板，仓库 README 显示其原始项目为「查尔斯的知识库」，并已标注存档、不再更新。模板围绕技术博客的日常写作与展示需求，在 VitePress 默认能力之外补充了若干扩展配置。

在内容组织方面，模板支持按规律性目录存放文章后自动生成侧边栏，并可通过文章 frontmatter 中的 isTop: true 生成置顶分组；同时提供《我的标签》页面（含标签云）与《我的归档》时间轴页面，归档支持按分类、标签筛选，年份前可展示生肖。文章页会显示是否原创、作者、发布时间、所属分类与标签列表等元数据，文末可输出版权声明并自由配置采用的版权协议。

在工程与部署方面，模板将配置文件拆分以提取公有配置选项，并附带 GitHub Actions 工作流，可在 push 到 GitHub 后自动打包并部署到 GitHub Pages，工作流中另含同步到 Gitee Pages 的部分，可按需删减。评论目前仅支持 Gitalk；文章阅读数默认启用，但需要自行提供并配置 API 服务（README 指向 Charles7c/charles7c-api），不折腾时可在 theme.ts 的 articleMetadataConfig 中关闭。Markdown 侧支持脚注、公式与 Mermaid 流程图。

需要注意的限制：仓库已存档且不再更新，作者表示后续会开源新模板；本地文档搜索与 algolia 搜索无法同时使用，README 中相关段落已被划除；评论仅 Gitalk 一种方案。源码采用 MIT 许可，但文章内容遵循 CC 4.0 BY-SA，演示图片、字体、图标等第三方素材需按各自许可单独核对。

VitePress博客

适合你的项目吗？

适用场景

  • 搭建个人技术知识库或技术博客，按目录组织文章并自动生成侧边栏
  • 需要标签页、归档时间轴等文章聚合视图的个人站点
  • 希望用 GitHub Actions 自动打包并部署到 GitHub Pages 的静态博客
  • 在 Markdown 文章中需要绘制流程图、时序图、甘特图等技术图表的写作场景

适合人群

  • 使用 VitePress 并希望直接获得博客化扩展的个人开发者
  • 以 Markdown 写作、按目录归档技术文章的内容维护者
  • 计划部署到 GitHub Pages，并可能同步到 Gitee Pages 的用户
  • 接受 Gitalk 作为唯一评论方案、或不需要评论功能的站点

上手与定制指南

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

  1. 1

    克隆仓库后需全局安装 pnpm，README 示例中设置了 npmmirror 镜像源，随后执行 pnpm install

  2. 2

    开发运行使用 pnpm dev（默认 http://localhost:5173），打包产物位于 docs/.vitepress/dist

  3. 3

    文章阅读数默认启用，需自行提供并配置 API 服务，否则应在 docs/.vitepress/config/theme.ts 的 articleMetadataConfig 中关闭

  4. 4

    部署到 GitHub Pages 需在仓库设置中启用 GitHub Pages，工作流文件为 .github/workflows/deploy-pages.yml，可按需删减 Gitee Pages 同步部分

  5. 5

    仓库已存档且不再更新；本地搜索与 algolia 搜索不能同时使用，第三方素材许可需单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 文章内容采用 CC 4.0 BY-SA 协议，转载或复用文章时须注明原文出处链接并声明该协议，源码的 MIT 许可不覆盖文章内容。
  • 文章阅读数功能默认启用，但需自行提供并配置外部 API 服务；若不部署该服务，应在 theme.ts 的 articleMetadataConfig 中关闭此功能。
  • 评论功能仅支持 Gitalk，需依赖 GitHub 相关配置，无其他评论方案可选。
  • 本地文档搜索与 algolia 在线搜索互斥，启用其一后另一项配置失效，需二选一。
  • 仓库已存档且不再更新，作者表示后续会开源新模板，本项目不会继续获得修复与功能更新。
  • GitHub Actions 工作流默认包含同步到 Gitee Pages 的步骤，如不使用 Gitee Pages 需自行删减该部分配置。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

文章遵循[ CC 4.0 BY-SA ](http://creativecommons.org/licenses/by-sa/4.0/)版权协议，转载请附上原文出处链接和声明

README 原文

开启需要自行提供并配置好 API 服务，API 服务可参考：[Charles7c/charles7c-api]

README 原文

文章评论：目前仅支持Gitalk

README 原文

本地文档搜索和 algolia 搜索无法同时使用，开启本地文档搜索后 algolia 搜索配置将不再生效。

README 原文

# 查尔斯的知识库(已存档！不再更新！后续会开源新模板！)

README 原文

同步到 Gitee Pages（可根据个人需要自行删减同步 Gitee Pages 部分工作流配置）

README 原文
https://github.com/Skslience/vitepress-theme-blog/blob/main/LICENSEhttps://github.com/Skslience/vitepress-theme-blog/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 60 / 100
技术栈
VitePress
网站类型
博客
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2025-11-24
截图检查日期
2026-10-02

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

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

查看具体选型方法 →

介绍的制作与核对状态

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

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: efb8b8346306a2caf87a70caa318b4210a76413f2e97da2fbed98aa9697d3432

2026-10-02T15:14:03.697Z

来源文件 / 仓库
[English](./README.en.md) | 中文

# 查尔斯的知识库(已存档！不再更新！后续会开源新模板！)

<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">
    <img src="https://img.shields.io/badge/文章%20License-CC%204.0%20BY--SA-blue.svg">
</a>
<a href="https://github.com/Charles7c/charles7c.github.io/blob/main/LICENSE" target="_blank">
    <img src="https://img.shields.io/badge/源码%20License-MIT-blue.svg">
</a>
<a href="https://github.com/Charles7c/charles7c.github.io/actions/workflows/deploy-pages.yml" target="_blank">
    <img src="https://github.com/Charles7c/charles7c.github.io/actions/workflows/deploy-pages.yml/badge.svg">
</a>


📝 **查尔斯的个人技术知识库，记录 & 分享个人碎片化、结构化、体系化的技术知识内容。** 

🐢 [GitHub Pages（完整体验）](https://blog.charles7c.top) | 🐇 [Gitee Pages（无法评论）](https://charles7c.gitee.io)

## 开始

```bash
# 1.克隆本仓库
git clone https://github.com/Charles7c/charles7c.github.io.git
# 2.安装 PNPM
npm install pnpm -g
# 3.设置淘宝镜像源
pnpm config set registry https://registry.npmmirror.com/
# 4.安装依赖
pnpm install
# 5.dev 运行，访问：http://localhost:5173
pnpm dev
# 6.打包，文件存放位置：docs/.vitepress/dist
# 如果是部署到 GitHub Pages，可以利用 GitHub Actions，在 push 到 GitHub 后自动部署打包
# 详情见：.github/workflows/deploy-pages.yml，根据个人需要删减工作流配置
pnpm build
# 7.部署
# 7.1 push 到 GitHub 仓库，部署到 GitHub Pages：需要在仓库设置中启用 GitHub Pages（本仓库采用此种部署方式）
# 7.2 在其他平台部署, 例如：Gitee Pages、Vercel、Netlify、个人虚拟主机、个人服务器等
```

## 已扩展功能（持续优化细节）

- [x] 拆分配置文件：解决“大”配置文件问题，提取公有配置选项进行复用，方便维护

- [x] GitHub Actions：push 到 GitHub，自动进行项目打包及 GitHub Pages 部署，并同步到 Gitee Pages（可根据个人需要自行删减同步 Gitee Pages 部分工作流配置）

- [x] 自动生成侧边栏：将文章按规律性目录存放后，侧边栏将自动生成，支持文章置顶🔝（在文章 frontmatter 中配置 `isTop: true`，即可在侧边栏自动出现置顶分组）

- [x] 主页美化：参照 vite 文档主页进行美化

- [x] 自定义页脚：支持ICP备案号、公安备案号、版权信息配置（符合大陆网站审核要求）

- [x] 文章元数据信息显示：文章标题下显示是否原创、作者、发布时间、所属分类、标签列表等信息，可全局配置作者及作者主页信息

  - [x] 已扩展文章阅读数信息，默认已启用，可在 docs/.vitepress/config/theme.ts 中 articleMetadataConfig 配置中关闭（开启需要自行提供并配置好 API 服务，API 服务可参考：[Charles7c/charles7c-api](https://github.com/Charles7c/charles7c-api)，目前来看搞起来还有点麻烦，不喜欢折腾的可以直接关闭或更换其他方式提供 API 服务，欢迎提建议）

- [x] 《我的标签》：模仿语雀标签页风格，另有标签云展示。语雀标签页地址：https://www.yuque.com/r/语雀用户名/tags?tag=

- [x] 《我的归档》：自定义时间轴，展示历史文章数据。年份前可展示生肖，还可按分类、标签筛选

- [x] 文章评论：目前仅支持Gitalk

- [x] 版权声明：文末显示原创或转载文章的版权声明，可自由配置采用的版权协议

- [x] ~~徽章：标题后可显示徽章，此功能来自于 VitePress 未合并的 PR，如若后续被合并，则改用官方主题功能（[官方已合并于 v1.0.0-alpha.27](https://github.com/vuejs/vitepress/issues/1239)）~~

- [x] ~~本地文档搜索支持：VitePress 官方目前仅提供了对接 algolia 的在线搜索配置，而且对接起来的流程也较为麻烦。所幸寻到一个本地文档搜索插件 [emersonbottero/vitepress-plugin-search](https://github.com/emersonbottero/vitepress-plugin-search)。目前对接了 [vitepress-plugin-pagefind](https://www.npmjs.com/package/vitepress-plugin-pagefind) 本地搜索插件，中文搜索相对友好一些，如需体验，可将 `docs/vite.config.ts` 文件中的注释去除掉。目前 VitePress 官方有一个 PR 正在处理离线搜索功能，再过段时间应该就能合并了，到时候体验一下试试看。~~ 

  ~~注意：本地文档搜索和 algolia 搜索无法同时使用，开启本地文档搜索后 algolia 搜索配置将不再生效。~~ 

- [x] Mermaid 流程图：在 Markdown 中绘制流程图、状态图、时序图、甘特图、饼图等，更多语法请参见：[Mermaid 官方文档](https://github.com/mermaid-js/mermaid/blob/develop/README.zh-CN.md) 。（Typora 编辑器也支持 `mermaid` 语法）

- [x] Markdown 脚注、Markdown 公式支持

- [x] 更多细节优化：敬请发现
  - [x] 文章内图片增加圆角样式优化（[#56](https://github.com/Charles7c/charles7c.github.io/issues/56)）
  - [x] 浏览器滚动条样式优化（支持 Firfox、谷歌系浏览器）（[#69](https://github.com/Charles7c/charles7c.github.io/pull/69)）
  - [x] 侧边栏分组中的文章列表增加序号显示
  - [x] ......


## 部分页面截图

### 主页美化

![主页](./docs/public/screenshot/主页.png)

### 侧边栏置顶分组（自动生成侧边栏及置顶分组）

![侧边栏置顶分组](./docs/public/screenshot/侧边栏置顶分组.png)

### 文章元数据信息

![文章元数据信息](./docs/public/screenshot/文章元数据信息.png)

### 我的标签

![我的标签](./docs/public/screenshot/我的标签1.png)
![我的标签](./docs/public/screenshot/我的标签2.png)

### 我的归档

![我的归档](./docs/public/screenshot/我的归档1.png)
![我的归档](./docs/public/screenshot/我的归档2.png)

### 文章评论

![文章评论](./docs/public/screenshot/文章评论1.png)
![文章评论](./docs/public/screenshot/文章评论2.png)
![文章评论](./docs/public/screenshot/文章评论3.png)

### 版权声明

![版权声明](./docs/public/screenshot/版权声明.png)

### Mermaid 流程图

![Mermaid流程图](./docs/public/screenshot/Mermaid流程图1.png)
![Mermaid流程图](./docs/public/screenshot/Mermaid流程图2.png)

## 特别鸣谢

- [vuejs/vitepress](https://github.com/vuejs/vitepress) （本知识库基于 VitePress 构建）
- [vitejs/vite](https://github.com/vitejs/vite) （参考主页美化）
- [windicss/docs](https://github.com/windicss/docs) （参考配置文件拆分）
- [brc-dd/vitepress-blog-demo](https://github.com/brc-dd/vitepress-blog-demo) （感谢 VitePress 维护者 brc-dd 的热心帮助）
- [brc-dd/vitepress-with-arco](https://github.com/brc-dd/vitepress-with-arco) 
- [clark-cui/vitepress-blog-zaun](https://github.com/clark-cui/vitepress-blog-zaun) （参考文章标签的数据处理方案）
- [dingqianwen/my-blog](https://github.com/dingqianwen/my-blog) （参考 Gitalk 配置暗黑主题）
- [Dedicatus546/Dedicatus546.github.io](https://github.com/Dedicatus546/Dedicatus546.github.io) （参考 Gitalk 跨域调用 API 失效的解决方案）
- [xiaoxian521/pure-admin-utils-docs](https://github.com/xiaoxian521/pure-admin-utils-docs) （参考词云组件的使用）
- [arco-design/arco-design-vue](https://github.com/arco-design/arco-design-vue) （使用部分组件及图标）
- [antvis/G2plot](https://github.com/antvis/G2plot) （使用部分图表）
- [emersonbottero/vitepress-plugin-mermaid](https://github.com/emersonbottero/vitepress-plugin-mermaid) （VitePress Mermaid 流程图插件）
- [mermaid-js/mermaid](https://github.com/mermaid-js/mermaid/blob/develop/README.zh-CN.md)
- ......

## License

- 文章遵循[ CC 4.0 BY-SA ](http://creativecommons.org/licenses/by-sa/4.0/)版权协议，转载请附上原文出处链接和声明
- 源码遵循 [MIT](https://github.com/Charles7c/charles7c.github.io/blob/main/LICENSE) 许可协议
- Copyright © 2019-2022 Charles7c
反馈内容错误

看看同类模板

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

sugar-blog

sugar-blog

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

VitePress · 博客

vitepress-nav-template

vitepress-nav-template

基于 VitePress 的个人前端导航页面模板

VitePress · 博客

vitepress-blog-pure

vitepress-blog-pure

a vitepress theme for blog, demo ↓

VitePress · 博客

vitepress-blog-starter

vitepress-blog-starter

Vitepress Blog Starter Template

VitePress · 博客

vitepress-theme-trigger

vitepress-theme-trigger

Blog theme for VitePress with Tailwind CSS. 為建立部落格而生的 VitePress 主題

VitePress · 博客

KiwiBlog

KiwiBlog

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

VitePress · 博客