标签:Astro
这里收集了带「Astro」标签的 11 篇文章,按发布时间从新到旧排列。
框架层面的具体机制:内容集合缓存、布局链与作用域、CSS 打包边界、`is:inline` 与 `define:vars`、`getStaticPaths` 的匹配规则。适合已经在用 Astro、开始改模板的人。
-
静态站的标签体系:挖出 11 个可收录页面
23 篇文章、20 个标签,但页面上一个标签都看不到——前端组件把 tags 静默忽略了。这篇记录怎么把标签变成 11 个可收录页面(10 个标签落地页 + 索引),以及中文标签在 Astro 里踩到的三个坑。
10月24日 22:20
-
随机图当封面:一张 250KB,我没让它进列表
静态博客的卡片没图会很难看,随机图 API 看起来很省事。但实测那张图 250KB、Cache-Control 还是 max-age=0——如果首页 10 条卡片都挂上,一次访问就是 2.5MB。这篇算清这笔账,并给出三种封面方案的取舍。
10月24日 21:00
-
静态博客接评论:Giscus 的配置、主题联动与三个坑
静态博客没有后端,评论只能挂第三方。这篇记录 Giscus 的完整接入:六个配置字段各自的作用、用自定义 CSS 做暗色联动的原理、不靠肉眼验证评论是否真的加载的方法,以及仓库迁移、改 slug、iframe 布局跳动三个坑。
10月24日 20:00
-
Astro 静态站的三个隐形约定:CSS 是全局的
Astro 的默认行为大多很合理,但有三条不写在报错里的约定:script 默认被打包成模块、CSS import 默认对全站生效、dist 目录从不清理。每一条我都在这两周踩过,附判断命令与修法。
10月24日 19:40
-
文章配图流水线:截图、压成 WebP、随构建分发
写技术文章一半时间花在图上。这套流水线只有四条规则:截图必须真实、按出现顺序编号、统一压成 WebP、和文章目录同名进仓库。附实测压缩数据(2073KB → 357KB)与五个踩过的坑。
10月24日 19:00
-
首屏从 392KB 砍到 59KB,FCP 从 7.4 秒到 2.1 秒
用 CDP 模拟中端手机实测博客首页:GA4 与 Clarity 挤在关键路径、头像和 favicon 直接加载 107KB 原图、312KB 关键 CSS 拖慢首屏。四处改动后传输 392KB→59KB,FCP 7.4s→2.1s,长任务 13→2 个。
10月24日 17:45
-
博客 SEO 自我体检:27 个页面里揪出四个系统性毛病
不靠站长后台,直接扫构建产物做 SEO 体检:发现全站 h1 数量为 0、28 个页面都没有 og:image、静态页共用同一段描述、404 页输出了两份 head。附体检清单与修法。
10月24日 16:45
-
给静态博客的单篇文章上密码:构建期加密与浏览器解密
静态站没有服务端,密码保护只能靠真加密:构建期用 PBKDF2-HMAC-SHA256 派生密钥、AES-256-GCM 加密正文,产物里只剩盐、IV 和密文。这篇讲清参数取舍、公开仓库的明文隔离、元数据泄露清单与解密后要重跑的初始化。
10月5日 23:10
-
静态博客的站内搜索是怎么做的:一份 JSON 索引加自己写的打分
静态站没有后端,站内搜索只能在前端想办法。这篇拆开本站实现:构建期把 Markdown 压成一份 51 KB 的 search.json,浏览器整份拉下来逐字段数命中次数,再按日期排序。附实测的索引体积构成、逐字输入的重取代价与踩过的坑。
10月5日 22:50
-
给每篇文章加「更新记录」:用 git 提交历史自动生成文章修改时间线
文章页底部那块「更新记录」不是手写的:构建前用脚本读 git log 生成 JSON,页面再按 slug 查表渲染。本文拆开这条链路,讲清 fetch-depth 0 为什么是硬前提、浅克隆会怎样把一条无关提交按到所有文章头上,以及行内 diff 编辑器的取舍。
10月5日 22:35
-
静态博客怎么显示每篇文章的浏览量:从 D1 读数接口到前端排序的完整链路
静态站没有后端,文章卡片上的浏览量到底从哪来?这篇拆我自己这套链路:D1 里只有 pathname + views 两列、两个读接口的分工、前端如何一次批量取数并先藏后显避免抖动、列表页按热度排序的索引对齐,以及防刷与缓存口径的取舍。
10月5日 22:15