一个克制、温润、编辑感的多页个人博客。基于 Astro + Svelte + Tailwind CSS + TypeScript 构建,面向 EdgeOne Makers 静态部署。
Slogan:A seed of resolve planted in the heart, Endurance becomes a required art. 心中埋下争气的种子,忍耐便是人生的必修课。
- Astro 4(静态输出,内容集合)
- Svelte 4 交互岛(首页轮播、共享环境背景、搜索浮层、相册灯箱、主题切换、评论、Mermaid 渲染)
- Tailwind CSS 3 + 语义化 CSS token 设计系统
- remark-math + rehype-katex 公式渲染(KaTeX)
- Shiki 代码高亮(暗色模式作用域覆盖)
- 客户端 Mermaid(运行时 CDN 加载,仅扫描文章正文)
- 纯静态本地搜索(构建期生成
public/search-data.json)
/ 首页 · /posts/[slug]/ 文章详情 · /archive/ 归档 · /about/ 关于 · /friends/ 友链 · /albums/ 相册 · /albums/[id]/ 相册详情 · /projects/ 项目 · /skills/ 技能 · /timeline/ 时间线 · /diary/ 日记 · /404 · 全站搜索浮层(Ctrl/Cmd + K)。
npm install
npm run dev # 会先生成搜索索引,再启动 astro devnpm run build # 自动执行 prebuild 生成 search-data.json,再 astro build
npm run preview # 预览 dist/产物位于 dist/,纯静态,可直接部署。
- 将本项目推送到 Git 仓库(或直接上传)。
- 在 EdgeOne Makers 新建 Pages 项目,选择该仓库。
- 构建配置:
- Install command:
npm install - Build command:
npm run build - Output directory:
dist
- Install command:
- 部署完成后,把
astro.config.mjs里的site改成你的正式域名,重新构建,可获得正确的 canonical / Open Graph 链接。
也可以直接把已构建好的
dist/目录作为静态资源上传部署。
- 文章:
src/content/posts/*.md(frontmatter 契约见src/content/config.ts)。 - 站点品牌 / 资源映射:
src/data/site.ts。 - 友链 / 相册 / 项目 / 技能 / 时间线 / 日记:
src/data/*.ts。
新增文章后,npm run build 会自动重建搜索索引。
当前使用本地演示评论(无需任何外部服务,评论保存在访客浏览器本地)。
如需接入真实评论(Giscus / Twikoo),替换 src/components/comments/CommentMount.svelte 即可,文章页的挂载位置与禁用逻辑已预留。
- 亮 / 暗双主题,暖色相(hue ≈ 60),玻璃拟态表面。
- 桌面 / 平板 / 移动为差异化布局,而非等比缩放。
- 首页 Hero 轮播与非首页环境背景通过
localStorage共享同一轮播索引与节奏(切换路由不会重置到第一张)。 - 图片一律置于比例受控的容器内,避免原始尺寸撑破布局。
祝写作愉快。像劈竹一样,第一节最难,之后顺势而下。