液态玻璃博客

你好，玻璃

Tue, 27 Oct 2026 00:00:00 +0000

这是一个纯静态的博客。界面照着 macOS 27 Golden Gate 做：顶部是透明菜单栏，文章开在可以拖动的窗口里，窗口能分标签页，底部有程序坞。所有东西都是 HTML、CSS 和一点 JavaScript，没有服务器，也没有加载任何第三方脚本。

怎么用

拖动窗口顶部的标题栏移动窗口，拖动边缘和四角调整大小。
把窗口拖到屏幕左边缘或右边缘，松手后会平铺到半屏；拖到顶部会填满。双击标题栏也会填满或还原。
按住 ⌘ 点击文章，会在新标签页里打开。把标签页拖出标签栏，它会变成一个新窗口。
按 ⌘ K，或者点菜单栏右侧的放大镜，可以搜索全部文章。
菜单栏右侧的控制中心里有一个液态玻璃滑块，从“清透”拖到“着色”，所有玻璃控件会一起变化。
壁纸跟着你电脑上的时间走，从深夜、日出、正午到黄昏连续变化。拖动“桌面时间”滑块可以快进到一天里的任意时刻，打开“跟随系统时间”就回到现在。

为什么做成这样

我每天都在这套界面里工作，看久了会在意很多细节：红绿灯的间距、标签页的高度、菜单项的圆角。把博客做成同一套界面，一方面是好玩，另一方面也逼着自己把这些细节量清楚。量出来的数字单独写了一篇。

这些交互都是增强。关掉 JavaScript，同一份 HTML 会退化成一个普通的文章列表，搜索引擎看到的也是这个版本。

在浏览器里做液态玻璃

Sat, 24 Oct 2026 00:00:00 +0000

液态玻璃和过去的毛玻璃最大的区别是折射。毛玻璃只是把背后的东西模糊掉；液态玻璃的边缘是弯的，光线穿过时会偏折，背景在边缘处被拉伸、挤压。浏览器里没有现成的折射效果，但可以用 SVG 滤镜拼出来。

三层

折射：用 feDisplacementMap 按一张位移图把背景像素挪开。
材质：轻度模糊和饱和度提升，由“清透 / 着色”滑块控制强弱。
高光和暗边：Golden Gate 给玻璃加了更亮的镜面高光和一圈压暗的外边，这两样用 CSS 画，不进滤镜。

位移图怎么算

玻璃边缘的截面取一条凸起的超椭圆曲线 y = (1 − (1 − x)⁴)^¼：中间平，到边缘时平滑地弯下去。对曲线上每个点求法线，再按斯涅尔定律 n₁·sin θ₁ = n₂·sin θ₂（空气 1.0，玻璃 1.5）算出光线偏折后在背景上落点移动了多远。

这个距离只和“离边缘多远”有关，所以先算一条 128 个采样的一维曲线，再按圆角矩形的距离场铺满整张图：红色通道存水平位移，绿色通道存垂直位移，128 表示不动。

<filter id="lg1" color-interpolation-filters="sRGB">
 <feImage href="data:image/png;base64,…" result="m"/>
 <feDisplacementMap in="SourceGraphic" in2="m" scale="18"
 xChannelSelector="R" yChannelSelector="G" result="d"/>
 <feGaussianBlur in="d" stdDeviation="6"/>
 <feColorMatrix type="saturate" values="1.8"/>
</filter>

.menu { backdrop-filter: url(#lg1); }

兼容性

把 SVG 滤镜用在 backdrop-filter 上，目前只有 Chromium 内核支持。Safari 和 Firefox 会退回到普通的模糊加饱和度，高光和暗边照样有，只是边缘不会弯。

几个坑

位移图的尺寸必须和元素一致。元素一变大小就要重算，所以按“宽 × 高 × 圆角”缓存滤镜，用 ResizeObserver 触发更新。
带 backdrop-filter 的元素会成为子元素的“背景根”。玻璃里面再套玻璃，里面那层只能看到外层自己，什么也折射不到。程序坞的提示气泡因此放在程序坞外面。
颜色空间要设成 sRGB，否则位移图的 128 会被当成线性值，整张图都会偏。

从原生窗口量出来的尺寸

Tue, 20 Oct 2026 00:00:00 +0000

截图量尺寸误差很大，所以我写了一个 Swift 小程序，在 macOS 27.0.1 上直接创建 NSWindow、NSToolbar 和 NSMenu，遍历系统生成的视图层级读取布局；再把这个程序自己的窗口和弹出菜单渲染成图片取色，浅色和深色外观各渲染一次。整个过程不需要屏幕录制权限，也不会截到别的应用。

项目	数值	来源
窗口圆角（所有样式）	16 pt	NSThemeFrame._cornerRadius
红绿灯直径	14 pt	standardWindowButton
红绿灯间距	9 pt	按钮间距，中心距 23 pt
统一工具栏标题栏	52 pt	frame − contentLayoutRect
统一工具栏红绿灯位置	(19, 19)	左上角坐标
紧凑工具栏	40 pt，(12, 13)	.unifiedCompact
无工具栏标题栏	32 pt，(9, 9)	.titled
标签栏	36 pt	两个标签页时 88 − 52
标签页胶囊	24 pt 高，左右内缩 10 pt	渲染取样
工具栏按钮胶囊	36 pt 高，圆角 18	NSToolbarPlatterView
胶囊间距 / 右边距	8 pt / 8 pt	同上
边栏按钮	36 × 36，(96, 8)	.toggleSidebar
工具栏标题	13 pt 粗体 + 11 pt	有副标题时；没有时 15 pt 中粗
菜单圆角	12 pt	NSPopupMenuWindow
菜单项高度	24 pt	NSMenu.size 逐项递增
菜单上下内边距	5 pt	单项菜单 34 pt
菜单选中高亮	内缩 5 pt，圆角 7 pt	弹出菜单渲染取样，#418FF8
菜单文字起点 / 快捷键右边距	28 pt / 13 pt	菜单项视图布局
菜单分隔线	11 pt 行高，线宽 1 pt	左缩 30 pt，右缩 16 pt
滑块	轨道 6 pt，滑钮 20 × 16	NSSliderCell barRect / knobRect
开关	54 × 24，滑钮 31 × 20	NSSwitch
分段控件	24 pt 高，圆角约 8	选中段整段填充强调色
控件强调色填充	#408CF4 / #4792F9	浅色 / 深色渲染取样
系统字号	13 pt	NSFont.systemFontSize
强调色	#007AFF	controlAccentColor

红绿灯不再是纯色

Golden Gate 的红绿灯带玻璃质感。逐像素取样能看出结构：上下各有一道 1 pt 的亮边，主体从上往下先变暗再变亮，底部中间有一团较亮的光。以红色为例，顶部 #EE8574，中段 #EA7361，底部 #E68779，亮边 #FFB1A6。窗口失去焦点时三个按钮变成灰色：深色外观下是 #5B5B5B 到 #505050，保留上下亮边；浅色外观下几乎是白色，左右两侧有一圈 #B8B9BD 的灰边。

没量到的

程序坞属于系统进程，读它的几何信息需要辅助功能或屏幕录制权限。能拿到的只有图标尺寸（74 pt）和系统为它留出的底部高度（100 pt），这里的程序坞按这个比例缩放。

标签页

原生标签栏里，每个标签页是一个独立的 24 pt 胶囊，均分宽度，相邻胶囊紧贴；当前标签页文字是白色，其余是灰色。这里给当前标签页加了一层液态玻璃，和工具栏按钮保持一致。

为什么坚持纯静态

Mon, 12 Oct 2026 00:00:00 +0000

最近一年博客程序、评论系统、后台面板的漏洞一个接一个。个人博客没人值守，出了洞往往几个月后才发现。最省心的办法是根本不运行服务器端代码。

纯静态意味着什么

线上只有 HTML、CSS、JS 和图片文件，没有数据库、没有登录、没有上传接口。
生成网站的工具只在自己电脑上运行，线上环境里没有它。
托管在对象存储或 CDN 上，攻击面就是托管商本身。

这个站点额外做的事

不加载任何第三方脚本、字体或统计代码，所有资源同源。
没有内联脚本，也没有内联样式，可以配一条很严格的内容安全策略（CSP）。
每个脚本和样式表都带子资源完整性校验（SRI），文件被篡改浏览器就拒绝执行。
不用 npm 依赖树。生成器用 Hugo，它是一个单独的二进制文件。

部署到 Cloudflare Pages 或 Netlify 时，站点根目录的 _headers 文件会让托管商附上这些响应头：

/*
 Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; upgrade-insecure-requests
 X-Content-Type-Options: nosniff
 Referrer-Policy: strict-origin-when-cross-origin
 Permissions-Policy: camera=(), microphone=(), geolocation=()

GitHub Pages 不能自定义响应头，所以页面里同时放了一份 <meta> 形式的 CSP，作用相同，只是少了 frame-ancestors。

评论可以交给邮件，或者干脆不要。少一个功能，就少一个要盯着打补丁的地方。

Golden Gate 改了什么

Mon, 05 Oct 2026 00:00:00 +0000

macOS 27 Golden Gate 没有推翻液态玻璃，而是把 Tahoe 里被吐槽最多的地方逐个收了回来。下面是我注意到的变化，以及它们在这个站点里对应的做法。

侧边栏贴边：Tahoe 的侧边栏是悬浮在窗口里的一块玻璃，Golden Gate 改回从窗口边缘铺满，只用一条细线和内容区分开。
统一圆角：所有窗口共用一个圆角，比 Tahoe 小得多。实测是 16 pt，没有为 Golden Gate 更新过的第三方应用也一样。
玻璃透明度滑块：系统设置里新增了从“清透”到“着色”的滑块。这里的控制中心和外观设置都有同样的滑块。
暗边和高光：玻璃外缘多了一圈压暗的边，镜面高光更亮，元素之间更容易分开。
彩色侧边栏图标：侧边栏图标重新用强调色着色。
红绿灯：beta 6 开始，窗口按钮带上了接近当年 Aqua 的玻璃质感。
活跃窗口：阴影调整后，当前窗口和背景窗口的区别更明显。
菜单图标变少：下拉菜单只给少数常用项配图标，这里的菜单完全不放图标。

苹果的壁纸、字体和图标都有版权，这里一样都没有用：壁纸是程序实时画的，图标是自己画的，字体直接用访问者设备上的系统字体。

发文章前的检查清单

Mon, 28 Sep 2026 00:00:00 +0000

每次发布前过一遍，五分钟以内。

标题能不能直接说出这篇讲了什么。
第一段有没有交代背景和结论。
代码块能不能直接复制运行，版本号写清楚没有。
图片有没有替代文本，尺寸是否压缩过。
外链是否还能打开。
删掉所有“其实”“基本上”“可以说”。

最后一条最难。