[{"data":1,"prerenderedAt":70},["ShallowReactive",2],{"tag-Image":3},[4,18,30,42,50,60],{"path":5,"title":6,"description":7,"date":8,"updated":8,"tags":9,"series":13,"cover":14,"draft":15,"featured":15,"themeHint":16,"body":17},"\u002Fblog\u002F2026\u002Fr2-image-pipeline","Cloudflare R2 图床流程","规划 Setobox 的图床路径、图片格式和 Markdown 组件接口，避免内容图片散落在仓库里。","2026-06-17",[10,11,12],"Cloudflare","R2","Image","Nuxt 重构","\u002Fimages\u002Fcovers\u002Fsetobox-archive-hero.png",false,"light-clean","## 图床边界\n\nUI 固定资产放在项目内，文章内容图片放到 Cloudflare R2。这样既能让首屏资产随站点版本管理，也能避免博客图片让仓库越来越重。\n\n## 路径规则\n\nR2 bucket 计划命名为 `setobox-assets`，图片域名为 `img.\u003C主域名>`。\n\n博客图片路径采用：\n\n```txt\n\u002Fblog\u002Fyyyy\u002Fslug\u002Fname.webp\n```\n\n项目图片路径采用：\n\n```txt\n\u002Fprojects\u002Fproject-name\u002Fcover.webp\n```\n\n## Markdown 接口\n\n文章中不直接写裸图片，而使用 `ArticleImage` 组件。这样未来可以统一处理 caption、尺寸、懒加载和远程图片优化。\n\n## ::article-image\n\nsrc: \"\u002Fimages\u002Fcovers\u002Fsetobox-archive-hero.png\"\nalt: \"文章图片组件示例\"\ncaption: \"正式图床接入后，这里的 src 会替换成 img.\u003C主域名> 下的 WebP 地址。\"\nwidth: 1200\nheight: 675\n\n---\n\n::",{"path":19,"title":20,"description":21,"date":8,"updated":8,"tags":22,"series":13,"cover":14,"draft":15,"featured":27,"themeHint":28,"body":29},"\u002Fblog\u002F2026\u002Fsetobox-nuxt-v1","Setobox v1：Nuxt、Content、UnoCSS 与 Vite+","记录这次从空目录开始搭建个人站的架构选择，以及为什么第一版不做数据库和后台。",[23,24,25,26],"Nuxt","Nuxt Content","UnoCSS","Vite+",true,"dark-clean","## 架构选择\n\nSetobox v1 的重点不是做一个复杂后台，而是把首页、博客、归档和主题系统一次搭稳。\n\n核心栈固定为 Nuxt 4、Nuxt Content v3、UnoCSS 和 Vite+。内容使用 Markdown，部署到 Cloudflare Pages，评论和统计交给外部服务。\n\n## 为什么不做数据库\n\n个人站第一版最重要的是可维护。文章、项目、时间线和 changelog 都可以放在 Git 中，既容易回滚，也容易迁移。\n\nNuxt\u002FNitro 足够处理 RSS、sitemap、robots 和少量运行时配置。真正需要状态的部分，比如评论和统计，接 Giscus 与 Cloudflare Web Analytics。\n\n## Vite+ 的位置\n\nVite+ 作为统一工具链入口加入项目。因为 Nuxt 仍然需要自己的 dev\u002Fgenerate 生命周期，所以项目命令通过 package scripts 暴露，再用 `vp run dev`、`vp run generate`、`vp check`、`vp test` 串起来。\n\n## 下一步\n\n第一版上线后，后续重点会放在内容补档、图片上传脚本、更多主题组件和文章页阅读体验。",{"path":31,"title":32,"description":33,"date":34,"updated":8,"tags":35,"series":39,"cover":14,"draft":15,"featured":27,"themeHint":40,"body":41},"\u002Fblog\u002F2025\u002Fpixel-mosaic-lab","像素马赛克主题实验","一次偏炫技的主题实验：用块状边框、tile reveal 和像素化细节给个人站加一层游戏机气质。","2025-07-26",[36,37,38],"Theme","Pixel","Animation","主题实验","dark-pixel","## 为什么需要像素主题\n\nSetobox 的默认体验应该安静、易读，但一个个人站也可以有一点“炫技”的余地。像素主题就是给访客看的另一面：同一批内容，可以换一种完全不同的视觉语言。\n\n## 视觉规则\n\n像素主题遵守几个限制：\n\n- 圆角归零\n- 边框加粗\n- 阴影变成硬偏移\n- 标签和按钮用块状高亮\n- 加载动画使用分块 reveal\n\n这些规则比单纯换成深色背景更有辨识度。\n\n## 可维护性\n\n像素主题不应该复制整站。它只覆盖关键变量和少量组件状态，其余结构仍然共享。这样主题看起来不同，维护成本不会翻倍。",{"path":43,"title":44,"description":45,"date":46,"updated":8,"tags":47,"series":39,"cover":14,"draft":15,"featured":27,"themeHint":28,"body":49},"\u002Fblog\u002F2024\u002Ftheme-tokens","主题变量：不要只换颜色","把主题拆成颜色、字体、边框、阴影、动效和组件气质，而不是简单切换 light\u002Fdark。","2024-10-02",[25,36,48],"Design","## 主题不只是 palette\n\n如果主题切换只修改背景和文字颜色，很快就会显得像演示，而不是完整体验。Setobox 的主题需要切换这些层级：\n\n- 色彩变量\n- 字体族\n- 圆角\n- 阴影\n- 加载动画\n- 文章卡片\n- 按钮和标签\n\n## 为什么用 UnoCSS\n\nUnoCSS 适合把设计 token 和 utility 写在一起。这里用 CSS variables 控制主题值，再用 UnoCSS shortcuts 把常用组件样式固定下来。\n\n这让主题既能被全局切换，也能在局部组件里做更明显的风格差异。\n\n## 三套首发主题\n\n`light-clean` 用来保证阅读性，`dark-clean` 用来体现终端和日志感，`dark-pixel` 则负责更强烈的风格化展示。\n\n三者共享内容结构，但组件呈现和加载方式不同。",{"path":51,"title":52,"description":53,"date":54,"updated":8,"tags":55,"series":58,"cover":14,"draft":15,"featured":15,"themeHint":16,"body":59},"\u002Fblog\u002F2024\u002Fstatic-search-notes","静态搜索笔记：先让内容可找","记录一次从全文搜索幻想回到本地索引的选择：个人站第一版只需要足够快、足够轻。","2024-03-11",[56,24,57],"Search","UX","旧站补档","## 先解决可用性\n\n个人博客的搜索并不一定要一开始就接 Algolia 或 Meilisearch。内容规模还小时，本地索引已经可以覆盖大部分需求。\n\nSetobox v1 的搜索范围先限定在标题、摘要、标签和系列名。这样可以保持构建简单，也不会为了一个小站提前引入独立服务。\n\n## 过滤条件\n\n当前博客列表提供四类过滤：\n\n- 搜索关键词\n- 标签\n- 年份\n- 精选文章\n\n这些过滤都在前端完成，数据来自 Nuxt Content 的静态内容集合。\n\n## 后续升级点\n\n如果文章数量明显增长，再把正文索引加入构建产物。等到内容过百、查询复杂度上来，再考虑外部搜索服务。",{"path":61,"title":62,"description":63,"date":64,"updated":8,"tags":65,"series":58,"cover":14,"draft":15,"featured":27,"themeHint":16,"body":69},"\u002Fblog\u002F2023\u002Fhandmade-homepage","手写首页草稿：从一个静态入口开始","这篇旧笔记记录最早的个人站草稿：只有首页、链接和很少的样式，但已经有了归档意识。","2023-04-18",[66,67,68],"Setobox","Archive","HTML","## 为什么补这篇\n\n最早的个人站并没有复杂功能。那时只想有一个可以放链接、笔记和项目入口的地方，所以首页像一张索引卡片：标题、几段说明、几个外链。\n\n现在重新整理这段记录，是为了让 Setobox 的演进路径更清楚。一个长期个人站不一定从完整产品开始，它可以从一张朴素目录慢慢长出来。\n\n## ::article-image\n\nsrc: \"\u002Fimages\u002Fcovers\u002Fsetobox-archive-hero.png\"\nalt: \"Setobox 数字档案封面\"\ncaption: \"当前版本先用本地封面占位，正式发布时会迁移到 Cloudflare R2 图床。\"\nwidth: 1200\nheight: 675\n\n---\n\n::\n\n## 当时保留下来的想法\n\n- 首页应该能快速说明“我是谁、我在做什么、最近更新了什么”。\n- 博客不只是时间倒序列表，还需要年份、标签和系列。\n- 每次重构都应该留下 changelog，而不是只留下最后的结果。\n\n## 现在怎么看\n\n这个草稿很粗糙，但它决定了后面的方向：Setobox 更像一个个人档案馆，而不是单次发布的作品集。\n\n第一版 Nuxt 重构会保留这种“索引感”，只是把它做得更稳定、更好看，也更容易继续维护。",1782357753574]