VitePressBlog

vitepress-theme-blog — VitePress Blog Template

By Skslience

A VitePress-based blog theme template that provides extensions such as automatic sidebars, tag pages, an archive timeline, Gitalk comments, and copyright notices.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided preview

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Automatically generates a sidebar after articles are stored in regular directories, and supports generating a pinned group via isTop: true in frontmatter

02

Provides a "My Tags" tag page with a tag cloud, and a "My Archive" timeline; the archive can be filtered by category and tag

03

Article pages display metadata such as originality status, author, publication time, category, and tags, and a copyright license can be configured at the end

04

Includes a GitHub Actions workflow that automatically builds and deploys to GitHub Pages after a push, plus removable Gitee Pages sync configuration

05

Markdown supports footnotes, formulas, and Mermaid flowcharts; comments currently support only Gitalk

Template Details

vitepress-theme-blog is a blog website template based on VitePress. The repository README indicates that its original project was "Charles's Knowledge Base" and that it has been archived and is no longer updated. The template centers on the daily writing and presentation needs of a technical blog, adding several extended configurations beyond VitePress's default capabilities.

For content organization, the template supports automatically generating a sidebar after articles are stored in regular directories, and can generate a pinned group via isTop: true in an article's frontmatter. It also provides a "My Tags" page (including a tag cloud) and a "My Archive" timeline page; the archive supports filtering by category and tag, and can display the Chinese zodiac before the year. Article pages show metadata such as originality status, author, publication time, category, and tag list, and can output a copyright notice at the end with a freely configurable copyright license.

For engineering and deployment, the template splits configuration files to extract shared configuration options and includes a GitHub Actions workflow that can automatically build and deploy to GitHub Pages after a push to GitHub. The workflow also contains a section for syncing to Gitee Pages, which can be removed as needed. Comments currently support only Gitalk. Article view counts are enabled by default, but you must provide and configure an API service yourself (the README points to Charles7c/charles7c-api); if you do not want the hassle, you can disable it in articleMetadataConfig in theme.ts. On the Markdown side, footnotes, formulas, and Mermaid flowcharts are supported.

Limitations to note: the repository has been archived and is no longer updated, and the author says a new template will be open-sourced later. Local document search and Algolia search cannot be used at the same time, and the relevant paragraph in the README has been struck through. Gitalk is the only comment option. The source code uses the MIT license, but article content follows CC 4.0 BY-SA, and third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses.

VitePressBlog

Is it right for your project?

Use Cases

  • Building a personal technical knowledge base or technical blog, organizing articles by directory with automatically generated sidebars
  • Personal sites that need article aggregation views such as tag pages and an archive timeline
  • Static blogs that want to use GitHub Actions to automatically build and deploy to GitHub Pages
  • Writing scenarios that require technical diagrams such as flowcharts, sequence diagrams, and Gantt charts in Markdown articles

Suitable For

  • Individual developers using VitePress who want blog-oriented extensions out of the box
  • Content maintainers who write in Markdown and archive technical articles by directory
  • Users planning to deploy to GitHub Pages and possibly sync to Gitee Pages
  • Sites that accept Gitalk as the only comment option, or do not need comments

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, install pnpm globally; the README example sets the npmmirror registry, then run pnpm install

  2. 2

    Use pnpm dev for development (default http://localhost:5173); build output is located in docs/.vitepress/dist

  3. 3

    Article view counts are enabled by default and require you to provide and configure an API service; otherwise disable it in articleMetadataConfig in docs/.vitepress/config/theme.ts

  4. 4

    To deploy to GitHub Pages, enable GitHub Pages in the repository settings; the workflow file is .github/workflows/deploy-pages.yml, and the Gitee Pages sync section can be removed as needed

  5. 5

    The repository has been archived and is no longer updated; local search and Algolia search cannot be used at the same time, and third-party asset licenses must be checked separately

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is the code of that version and does not mean external services or third-party assets are free.

Must comply with when using

  • You may use, modify, commercially use, and distribute the code of this version for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Article content uses the CC 4.0 BY-SA license; when reposting or reusing articles, you must cite the original source link and state that license. The MIT license for the source code does not cover article content.
  • The article view count feature is enabled by default but requires you to provide and configure an external API service; if you do not deploy that service, disable this feature in articleMetadataConfig in theme.ts.
  • Comments support only Gitalk and depend on GitHub-related configuration; no other comment option is available.
  • Local document search and Algolia online search are mutually exclusive; enabling one disables the other configuration, so you must choose one.
  • The repository has been archived and is no longer updated; the author says a new template will be open-sourced later, and this project will not receive further fixes or feature updates.
  • The GitHub Actions workflow includes a step to sync to Gitee Pages by default; if you do not use Gitee Pages, you need to remove that configuration yourself.
  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

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

Original README

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

Original README

文章评论：目前仅支持Gitalk

Original README

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

Original README

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

Original README

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

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

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 60 / 100
Technologies
VitePress
Website type
Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-11-24
Screenshot last checked
2026-10-02

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies VitePress as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: efb8b8346306a2caf87a70caa318b4210a76413f2e97da2fbed98aa9697d3432

2026-10-02T15:14:03.697Z

Source file / repository
[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
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

sugar-blog

sugar-blog

A VitePress-based personal blog monorepo that separates blog content, the reusable @sugarat/theme theme, shared utilities, and a creation template, and also maintains plugins for image preview, pagefind offline full-text search, RSS, 51.la analytics, announcements, back-to-top, product cards, and comments.

VitePress · Blog

vitepress-nav-template

vitepress-nav-template

A personal front-end navigation page template built on VitePress, created by maomao1996 under the MIT license.

VitePress · Blog

vitepress-blog-pure

vitepress-blog-pure

A minimalist VitePress blog theme used by copying files into the project root. It provides post lists, tags, archives, local search, and Giscus comments, with posts placed in the posts directory and title required in frontmatter.

VitePress · Blog

vitepress-blog-starter

vitepress-blog-starter

A VitePress-based blog starter template with runnable example content for posts and authors, blog logic organized through Composables, UnoCSS styling, and VitePress's built-in local search. It uses pnpm for installation, development, and build, and the repository is MIT licensed.

VitePress · Blog

vitepress-theme-trigger

vitepress-theme-trigger

vitepress-theme-trigger is a blog theme for VitePress built with Tailwind CSS, released under the MIT license.

VitePress · Blog

KiwiBlog

KiwiBlog

KiwiBlog is a Chinese personal blog template built on VitePress for publishing daily shares and articles.

VitePress · Blog