今天是平凡的一天，但也是美好的一天

核心框架#

• SvelteKit - 全栈 Svelte 框架，提供文件系统路由和服务端渲染支持
• shadcn-svelte - 高质量的 UI 组件库，基于 Radix UI 和 Svelte
• Tailwind CSS v4 - 实用优先的 CSS 框架，支持原子化 CSS
• TypeScript - 提供完整的类型安全保障

设计系统#

• Maia 设计系统 - 集成 Hugeicons 图标库和 Figtree 字体
• Motion One - 动画库，为页面添加流畅的入场动画效果

部署适配#

• @sveltejs/adapter-static - 静态适配器，支持纯静态部署
• wrangler.jsonc - Cloudflare Workers 配置文件，支持边缘部署

静态站点生成#

SVAF 项目配置为完全静态站点生成模式：

• 使用 @sveltejs/adapter-static 适配器
• 在 src/routes/+layout.ts 中设置 prerender = true 和 ssr = false
• 构建生成纯静态 HTML/CSS/JS 文件，可部署到任何静态托管服务

灵活的组件系统#

项目集成了 shadcn-svelte 组件库，可以轻松添加 UI 组件：

1
# 添加单个组件
2
npx shadcn-svelte@latest add button
3
npx shadcn-svelte@latest add card
4
npx shadcn-svelte@latest add input
5

6
# 查看所有可用组件
7
npx shadcn-svelte@latest add

动画效果#

集成 Motion One 动画库，为网站添加入场动画效果，提升用户体验。

快速开始#

1
# 安装依赖
2
pnpm install
3

4
# 启动开发服务器
5
pnpm dev
6

7
# 自动打开浏览器
8
pnpm dev -- --open

构建部署#

1
# 构建静态站点
2
pnpm build
3

4
# 预览构建结果
5
pnpm preview

构建后的静态文件输出到 build 目录，可以部署到：

• Vercel
• Netlify
• GitHub Pages
• Cloudflare Pages
• 任何静态托管服务

主要配置文件#

• components.json - shadcn-svelte 组件库配置
• svelte.config.js - SvelteKit 配置，使用 adapter-static
• vite.config.ts - Vite 构建配置
• src/routes/+layout.ts - SSG 模式配置
• wrangler.jsonc - Cloudflare Workers 部署配置

SSG 配置示例#

1
export const prerender = true;
2
export const ssr = false;

1. 现代化技术栈#

采用 SvelteKit 5.x 版本，结合最新的 Tailwind CSS v4，享受前沿技术带来的开发体验。

2. 组件化开发#

通过 shadcn-svelte 实现组件化开发，可以按需引入组件，控制打包体积。

3. 流畅动画#

集成 Motion One 动画库，支持页面过渡和元素入场动画，提升用户体验。

4. 灵活部署#

支持多种部署方式，既可以部署到传统静态托管，也可以部署到边缘计算平台。

5. 持续更新#

项目保持活跃开发，已有 522+ 次提交，最近仍有功能更新。