以墨会友 · 以文载道

从零搭建水墨博客

2026/6/5 · 编程

为什么选 Valaxy

之前用 Hugo、Hexo 都试过,模板改起来太痛苦。Valaxy 基于 Vue 3 + Vite,主题开发就是写 Vue 组件,对前端开发者来说没有学习成本。

水墨主题(valaxy-theme-shuimo)是我在 npm 上偶然发现的,宣纸纹理、印章、山水画生成,这些细节让我一眼就决定了。

踩坑记录

Vite 版本不兼容

valaxy 0.28.x 的子依赖要求 vite 6-7,但 pnpm 默认拉了 vite 8。需要在 pnpm-workspace.yaml 里 override:

yaml
overrides:
  vite: "^6.4.3"

suncalc 模块加载失败

suncalc 是 CJS 模块,Vite 6 预构建后导出为空对象。加一行配置即可:

typescript
vite: {
  optimizeDeps: {
    include: ['suncalc'],
  },
}

Web Worker 构建报错

主题的山水画生成用了 Web Worker,Vite 6 默认 worker format 是 iife,和 code-splitting 冲突:

typescript
vite: {
  worker: {
    format: 'es',
  },
}

最终效果

  • 首页有动态生成的山水画
  • 宣纸纹理背景
  • 自定义印章(刻了八个字:受命于天既寿永昌)
  • 对比度通过自定义 CSS 微调过

整体风格克制、安静,符合我对个人博客的期待。