佳瑞网 — Web 前端开发https://www.jary8.com/articles/佳瑞网是站主的个人技术站，记录 Web 前端开发、界面设计、性能优化与工程化实践，汇集技术文章、项目案例与个人履历，分享一线开发中的经验与思考。zh-cnFri, 23 Oct 2026 02:53:58 GMT用容器查询重构响应式卡片https://www.jary8.com/articles/container-queries-card-layout/https://www.jary8.com/articles/container-queries-card-layout/容器查询让卡片按自身宽度响应，而不是依赖视口。本文用一个文章列表组件，拆解容器声明、尺寸查询与降级写法。HTML/CSSSun, 18 Oct 2026 00:00:00 GMT用 Canvas 画一个点阵地球https://www.jary8.com/articles/canvas-dot-globe/https://www.jary8.com/articles/canvas-dot-globe/不引入 Three.js，用 Canvas 2D 和 Fibonacci 球面点阵画一个可旋转地球，并控制首屏开销、DPR 与低端设备的降级路径。JavaScriptSun, 11 Oct 2026 00:00:00 GMT从 Nuxt 2 迁到 Astro：内容站的重构笔记https://www.jary8.com/articles/astro-content-site-migration/https://www.jary8.com/articles/astro-content-site-migration/把依赖登录与数据库的内容站迁移到 Astro 静态构建，记录内容集合、路由、搜索与部署的取舍，以及迁移中踩过的坑。框架Sun, 04 Oct 2026 00:00:00 GMTPagefind 在静态站里的中文搜索https://www.jary8.com/articles/pagefind-chinese-search/https://www.jary8.com/articles/pagefind-chinese-search/Pagefind 在静态站里做中文搜索是否可用？本文用真实查询验证分词、子串匹配、索引体积与构建接入方式。工程化Sun, 27 Sep 2026 00:00:00 GMT主题切换如何做到首屏不闪https://www.jary8.com/articles/theme-toggle-no-flash/https://www.jary8.com/articles/theme-toggle-no-flash/明暗主题最容易忽略的是首屏闪烁。本文拆解阻塞脚本、localStorage、系统偏好与按钮状态同步的最小实现。JavaScriptSun, 20 Sep 2026 00:00:00 GMT把首屏海报压进 45KBhttps://www.jary8.com/articles/avif-poster-budget/https://www.jary8.com/articles/avif-poster-budget/把首屏海报压到 45KB 以内：从 Canvas 截图、sharp 转 AVIF 到质量与尺寸的取舍，给出一条可复现的构建管线。工程化Sun, 13 Sep 2026 00:00:00 GMT用级联层收住样式优先级https://www.jary8.com/articles/css-cascade-layers/https://www.jary8.com/articles/css-cascade-layers/级联层让样式优先级变得可预测。本文用 tokens、基础样式与组件样式三层，说明如何避免 !important 与选择器战争。HTML/CSSSun, 06 Sep 2026 00:00:00 GMTsatisfies 解决了什么问题https://www.jary8.com/articles/typescript-satisfies/https://www.jary8.com/articles/typescript-satisfies/satisfies 既保留字面量推断，又能校验结构。本文用配置表与路由表两个例子，比较注解、as const 和 satisfies 的差异。JavaScriptSun, 30 Aug 2026 00:00:00 GMTMDX 里的交互组件该不该成为岛屿https://www.jary8.com/articles/mdx-islands-boundary/https://www.jary8.com/articles/mdx-islands-boundary/MDX 里的交互组件什么时候该成为岛屿？本文用主题切换与代码复制两个例子，讨论边界、水合成本与降级策略。框架Sun, 23 Aug 2026 00:00:00 GMT静态站点的旧链接怎么处理https://www.jary8.com/articles/static-site-redirects/https://www.jary8.com/articles/static-site-redirects/静态托管没有服务端路由，旧链接怎么处理？本文比较 _redirects、vercel.json、meta 刷新与客户端跳转的适用场景。杂谈Sun, 16 Aug 2026 00:00:00 GMT减少动态不等于关掉动画https://www.jary8.com/articles/reduced-motion-design/https://www.jary8.com/articles/reduced-motion-design/减少动态偏好不是关掉所有动画。本文整理透明、位移与自动播放的降级方式，并给出一份可访问的动效检查清单。HTML/CSSSun, 09 Aug 2026 00:00:00 GMT