跳至主要內容

博客技术架构

老Z2026/2/21大约 2 分钟建站VuePress博客

写给自己看的「这博客由啥堆成」：版本号以根目录 package.json / lock 为准；表格里若和本机不一致，以依赖为准、本文后改。

技术栈

组件版本说明
VuePress2.0.0-rc.28静态站点生成器
vuepress-theme-hope2.0.0-rc.106博客主题
Vue^3.5.34前端框架
Vite8.x构建工具（由 @vuepress/bundler-vite 引入，见 lock）
TypeScript—配置用 .ts；非根 package.json 直接依赖
Sass^1.99.0样式预处理器
KaTeX^0.16.45数学公式（主题 markdown.math）
Mermaid^11.14.0图表（主题 markdown.mermaid）
@vuepress/plugin-slimsearch2.0.0-rc.128全文搜索（替代已弃用的 searchPro）
@vuepress/plugin-pwa2.0.0-rc.128PWA（主题 plugins.pwa）

站点级插件（config.ts 根级 plugins）：@vuepress/plugin-google-analytics、vuepress-plugin-copy-page。主题内还启用了 PWA、SEO、sitemap、公告等，详见仓库 docs/.vuepress/config.ts。

根配置中 shouldPrefetch: false，避免 PWA 与链接预取策略冲突。

架构图

部署侧数据流：源码在本地或 CI 上构建，产物才是托管对象（边缘节点不跑 VuePress）。

主题功能

Hope 主题默认能开的能力很多，这里只列本博客在用或常开的（最终以 config.ts 为准）：

博客功能

  • 文章列表（/posts/）
  • 分类页面（/category/）
  • 标签页面（/tag/）
  • 时间线（/timeline/）

SEO 功能

  • sitemap.xml（主题 plugins.sitemap 生成）
  • robots.txt（docs/.vuepress/public/robots.txt 手工维护，构建时复制到 dist）
  • Open Graph / Twitter Card（config.ts head + 主题 SEO）

其他功能

  • 暗黑模式
  • 图片点击放大（PhotoSwipe）
  • 代码块复制按钮
  • 响应式布局
  • PWA（plugins.pwa）
  • 友链页（docs/links/）
  • Markdown 内 Mermaid 与 KaTeX（$...$ / $$...$$、\(...\) / \[...\] 等，见主题配置）
  • 全文搜索（SlimSearch，主题 plugins.slimsearch）

构建流程

目录结构

my-blog/
├── docs/
│   ├── .vuepress/
│   │   ├── config.ts      # 主配置
│   │   ├── client.ts      # 客户端增强（如 copy-page 入口）
│   │   ├── styles/        # 样式
│   │   ├── public/        # 静态资源
│   │   ├── .cache/        # 构建缓存（勿提交）
│   │   ├── .temp/         # 临时文件（勿提交）
│   │   └── dist/          # 构建输出（勿提交）
│   ├── _posts/            # 博客文章
│   ├── about/             # 关于页面
│   └── README.md          # 首页
├── package.json
└── node_modules/

自定义插件

Copy Page 插件

装了 vuepress-plugin-copy-page：把整页复制成 Markdown，方便丢进 LLM；样式在 client.ts 里引。

功能：

  • 在文章标题旁显示"Copy page"按钮
  • 支持复制整篇文章的 Markdown 源码
  • 支持在新标签页预览 Markdown

常用命令

pnpm run dev      # 启动开发服务器
pnpm run build    # 构建生产版本

相关链接