VitePress博客

sugar-blog — VitePress 博客模板

作者 ATQQ

基于 VitePress 的个人博客 monorepo，包含博客内容、可复用主题、创建模板以及搜索、RSS、图片预览等插件。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

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

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

值得关注的模板亮点

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

01

monorepo 结构，把博客内容、通用主题、共享工具与创建模板分开维护

02

提供 @sugarat/theme 主题，并有独立的主题示例仓库与主题文档

03

自带多个 VitePress 插件：图片预览、pagefind 离线全文搜索、RSS、公告、返回顶部、产品卡片等

04

集成 51.la 统计、Artalk 与 Giscus 评论等可选能力

05

提供 create 命令，支持 pnpm、npm、yarn、bun 创建同风格博客

06

仓库代码采用 MIT 许可，附有完整许可声明

模板详细介绍

sugar-blog 是作者 ATQQ 用于写博客的 monorepo 仓库，博客基于 VitePress 搭建，线上站点为 sugarat.top。仓库把博客本体与可复用部分拆开：packages/blogpress 存放博客内容，packages/theme 是分离出的通用 VitePress 博客主题 @sugarat/theme，packages/shared 提供主题相关工具方法，packages/create-theme 用于按相同风格快速创建博客。

除主题外，仓库还维护一组 VitePress 插件，覆盖图片预览、基于 pagefind 的离线全文搜索、基于 feed 的 RSS、51.la 统计、全局公告窗口、Artalk 与 Giscus 评论、返回顶部按钮、产品/项目卡片组件，以及一个插件开发模板。

内容方面以“大前端开发相关知识”为主，包含面试问题与分模块整理的知识点，并附有关于作者的页面。运行本项目需要先安装 pnpm、安装依赖并构建主题包，再分别启动博客或主题文档；也可通过 create 命令基于该主题创建新博客。仓库采用 MIT 许可，但演示图片、字体、图标等第三方素材需按各自许可核对。

VitePress博客

适合你的项目吗？

适用场景

  • 想用 VitePress 搭建个人博客并直接复用现成主题
  • 需要为已有 VitePress 站点补充离线全文搜索、RSS 或图片预览
  • 参考一个真实运行的博客仓库，了解内容与主题如何拆分组织
  • 以该主题为起点，通过 create 命令快速生成自己的博客项目
  • 开发 VitePress 插件时参考仓库中的插件实现与开发模板

适合人群

  • 使用 VitePress 写博客的个人开发者
  • 需要离线全文搜索、RSS 等博客增强能力的 VitePress 用户
  • 希望参考 monorepo 方式组织博客与主题的开发者
  • 想基于现成主题快速起步、而非从零设计博客的写作者

上手与定制指南

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

  1. 1

    仓库为 monorepo，运行前需先安装 pnpm 并执行 pnpm install

  2. 2

    需先执行 pnpm buildlib 构建依赖包的 npm 包

  3. 3

    运行博客使用 pnpm dev，运行主题包文档使用 pnpm dev:theme

  4. 4

    创建新博客可执行 pnpm create @sugarat/theme，也支持 npm、yarn、bun 的 create 命令

  5. 5

    代码为 MIT 许可，但演示图片、字体、图标等第三方素材需单独核对许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 51.la 统计插件需接入第三方 51.la 服务，通常需要注册账号并获取站点统计 ID 才能使用。
  • Artalk 评论插件依赖自建或第三方 Artalk 服务端，需自行部署并配置服务地址后方可使用。
  • Giscus 评论插件依赖 GitHub 仓库与 GitHub Discussions，需授权 Giscus 应用并配置仓库信息。
  • 离线全文搜索依赖 pagefind 在构建阶段生成索引，需在构建流程中额外执行该工具。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

为 `VitePress` 站点引入 [51.la](https://v6.51.la/) 的网站数据统计能力。

README 原文

为 `VitePress` 站点引入 [Artalk](https://artalk.js.org/) 的评论系统。

README 原文

为 `VitePress` 站点引入 [Giscus](https://giscus.app/) 的评论系统。

README 原文

基于 pagefind 实现的 `VitePress` 离线全文搜索支持插件

README 原文
https://github.com/ATQQ/sugar-blog/blob/master/LICENSEhttps://github.com/ATQQ/sugar-blog/blob/master/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2026-09-30
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 6f6e15da542d498212e8dd88e506486105b6b59e8622496087064dd409485ae9

2026-10-01T03:49:02.768Z

来源文件 / 仓库
<h1 align="center"> 粥里有勺糖 </h1>
<p align="center">你的指尖,拥有改变世界的力量</p>
<p align="center">博客主题：<a href="https://theme.sugarat.top/" target="_blank">@sugarat/theme</a></p>
<p align="center">
    <a href="https://github.com/ATQQ/vitepress-blog-sugar-template" target="_blank">主题示例仓库</a> | <a href="https://github.com/ATQQ/vitepress-plugins-tests" target="_blank">插件测试仓库</a>
</p>

## 仓库介绍

这是一个 monorepo 仓库，包含如下内容
* [blogpress](./packages/blogpress/)：博客内容本身
* [@sugarat/theme](./packages/theme/)：博客分离出的通用 `VitePress` 主题
* [@sugarat/theme-shared](./packages/shared/)：`VitePress` 主题相关的工具方法
* [@sugarat/create-theme](./packages/create-theme/)：用于快速创建和作者一样风格的博客
* VitePress 插件相关：
  * [vitepress-plugin-image-preview](./packages/vitepress-plugin-image-preview/)：为 `VitePress` 站点添加图片预览功能。
  * [vitepress-plugin-pagefind](./packages/vitepress-plugin-pagefind/)：基于 pagefind 实现的 `VitePress` 离线全文搜索支持插件
  * [vitepress-plugin-rss](./packages/vitepress-plugin-rss/)：基于 feed 实现的 `VitePress` RSS 支持插件
  * [vitepress-plugin-51la](./packages/vitepress-plugin-51la/)：为 `VitePress` 站点引入 [51.la](https://v6.51.la/) 的网站数据统计能力。
  * [vitepress-plugin-announcement](./packages/vitepress-plugin-announcement/)：为 `VitePress` 创建一个全局公告窗口。
  * [vitepress-plugin-artalk](./packages/vitepress-plugin-artalk/)：为 `VitePress` 站点引入 [Artalk](https://artalk.js.org/) 的评论系统。
  * [vitepress-plugin-giscus](./packages/vitepress-plugin-giscus/)：为 `VitePress` 站点引入 [Giscus](https://giscus.app/) 的评论系统。
  * [vitepress-plugin-back2top](./packages/vitepress-plugin-back2top/)：为 `VitePress` 站点添加返回顶部按钮。
  * [vitepress-plugin-product-card](./packages/vitepress-plugin-product-card/)：为 `VitePress` 站点添加产品/项目/作品卡片组件。
  * [vitepress-plugin-slot-inject-template](./template/vitepress-plugin-slot-inject-template/)：`VitePress` 插件开发模板。

## 快速创建博客模板
支持多种包管理工具
```sh
# With PNPM:
pnpm create @sugarat/theme

# With NPM:
npm create @sugarat/theme@latest

# With Yarn:
yarn create @sugarat/theme

# With Bun
bun create @sugarat/theme
```
## 运行本项目
这是一个 monorepo 仓库，博客基于[vitepress](https://vitepress.dev/)搭建，运行前需先安装依赖，构建主题包

① 先安装 `pnpm`
```sh
npm i -g pnpm
# 安装依赖
pnpm install
```

② 构建依赖包的npm包
```sh
pnpm buildlib
```

③ 运行
```sh
# 运行博客
pnpm dev

# 运行主题包文档
pnpm dev:theme
```

## :pencil:关于内容
大前端开发相关知识，包含但不限于前端

记录面试中所遇的问题，并整理相关知识点，分模块进行了梳理

## :speak_no_evil:[关于笔者](./docs/aboutme.md)
21年毕业，目前就职于美团，热爱大前端开发技术

热爱开源，乐于分享

![图片](https://img.cdn.sugarat.top/mdImg/MTYwNDcyMTQ4NTMyOA==604721485328)

## :link:个人相关链接

* [粥里有勺糖●博客园](https://www.cnblogs.com/roseAT/)
* [ATQQ●GitHub](https://github.com/ATQQ)
* [ES6笔记●GITBOOK](https://sugar-js.gitbook.io/-1/)
* [blog●GitBook](https://sugar-at.gitbook.io/blog-article/)
* [掘金](https://juejin.im/user/1028798615918983)

## :phone:联系我
如对博客内容，知识，排版等有疑问或者建议，欢迎邮件和我联系

**邮箱:[email protected]**

![公众号](packages/blogpress/public/mp-code.png)

## :coffee:赞赏
|                                  微信                                   |                                微信赞赏                                 |                                 支付宝                                  |
| :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| ![](https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQ0MjMzNA==651547442334) | ![](https://img.cdn.sugarat.top/mdImg/MTY0Nzc1NTYyOTE5Mw==647755629193) | ![](https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQyOTg0OA==651547429848) |

## Star History

[![Star History Chart](https://api.star-history.com/chart?repos=atqq/sugar-blog&type=date&legend=top-left)](https://www.star-history.com/?repos=atqq%2Fsugar-blog&type=date&legend=top-left)

## Stargazers over time
[![Stargazers over time](https://starchart.cc/ATQQ/sugar-blog.svg?variant=adaptive)](https://starchart.cc/ATQQ/sugar-blog)

## Project Status

![status](https://repobeats.axiom.co/api/embed/49625195d138fdaccc82ef70c9645d9a85afda5f.svg "Repobeats analytics image")

## Contributors

Thanks to all the contributors!

<a href="https://github.com/atqq/sugar-blog/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=atqq/sugar-blog" />
</a>

Made with [contrib.rocks](https://contrib.rocks).
反馈内容错误

看看同类模板

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

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 · 博客

vitepress-theme-ououe

vitepress-theme-ououe

A vitepress blog theme

VitePress · 博客