关于 valaxy
Valaxy 是基于 Vue 3 和 Vite 的静态博客框架,用于构建以 Markdown 为内容的站点。它结合文件路由与主题、插件配置,并允许用户组件覆盖主题或核心组件。
主要功能
- 01基于 Markdown 生成静态站点
- 02基于 Vue 3 和 Vite
- 03文件路由
- 04使用 frontmatter 设置文章元数据
- 05配置主题和插件
- 06自定义组件与样式
适用场景
- 01用 Markdown 文章创建静态博客
- 02按标签和分类组织文章
- 03通过多种语言选项构建本地化内容
- 04覆盖主题组件和样式
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ yunyoujun/ valaxy --skill valaxy安装后在 Claude Code 中输入/valaxy确认已加载。
附带文件references/architecture.mdreferences/theme-addon-dev.md
详细介绍
Valaxy
新一代静态博客框架:Vue 3 + Vite + UnoCSS + 基于文件的路由 + markdown-it。
快速参考
pnpm create valaxy # scaffold new site
pnpm i # MUST use pnpm
pnpm dev # dev server at localhost:4859
pnpm build # SSG build to dist/
两个配置文件:
site.config.ts— 通过defineSiteConfig()配置站点元数据(标题、作者、社交信息、搜索、评论)valaxy.config.ts— 通过defineValaxyConfig<ThemeConfig>()配置框架(主题、扩展、Markdown、Vite)- 可选的
theme.config.ts— 通过defineThemeConfig()配置主题专属选项
文章放在 pages/posts/*.md 中。Frontmatter 用于设置标题、日期、标签、分类、封面、草稿、加密、布局等。
关键模式
配置合并
配置来源通过 defu 合并(用户配置优先):默认配置 → 主题 → 扩展 → 用户配置。
文件解析(Roots 系统)
roots = [clientRoot, themeRoot, ...addonRoots, userRoot]
用户组件、布局和样式会覆盖主题中的对应项,主题中的对应项又会覆盖核心中的对应项——依据文件名匹配。
路由
通过 vue-router/vite 实现基于文件的路由。pages/ 中的文件会成为路由。布局会自动分配:
pages/posts/**→post布局pages/tags/**→tags布局pages/categories/**→categories布局
可通过 frontmatter 中的 layout: xxx 覆盖。
集合
使用 defineCollection() 在 pages/collections/{name}/index.ts 中定义:
import { defineCollection } from 'valaxy'
export default defineCollection({
key: 'hamster',
title: 'Hamster Stories',
items: [
{ title: 'Chapter 1', key: '1' },
],
})
i18n
- 基于 CSS 的双语:在 Markdown 中使用
::: zh-CN/::: en容器 - 基于文件:
locales/*.yml - Frontmatter:
title: { en: 'Title', 'zh-CN': '标题' } - 标签:
$locale:tag.notes语法
自定义样式
创建 styles/index.ts(或 .scss/.css)——会自动加载。可覆盖 CSS 变量来设置主题。
自定义组件
将 .vue 文件放在 components/ 中——它们会自动注册,并按名称覆盖主题或核心组件。
Monorepo 开发
在开发 Valaxy 核心框架时:
pnpm i # install all workspace deps
pnpm run build # build core: utils → valaxy → devtools
pnpm dev:lib # watch core packages
pnpm demo # run demo site
pnpm docs:dev # run docs site
pnpm test # unit tests (vitest)
pnpm e2e # E2E tests (playwright)
pnpm lint # eslint
pnpm typecheck # type check
仓库 URL 规范化
显示来自 package.json 的仓库 URL 时,从 @valaxyjs/utils 导入并使用 normalizeRepositoryUrl(),以移除 git+ 前缀。
参考资料
-
根据简要说明生成或重新设计主题:使用此仓库专用的
valaxy-themeskill(pnpm dlx skills add YunYouJun/valaxy --skill valaxy-theme)。该 skill 涵盖可运行的主题/演示、UI 库集成和验证。 -
框架架构、虚拟模块、组合式函数、组件:阅读 references/architecture.md
-
主题/扩展开发、文章 frontmatter、扩展图库:阅读 references/theme-addon-dev.md