[{"content":"这个网站最早只是一个很普通的想法：家里已经有一个 huangqixuan.com 域名，与其一直空着，不如拿来写教程。\n我以前也试过免费建站。当时用 InfinityFree 的免费空间和 wuaze.com 子域名，做过带评论区的网站，甚至还折腾过论坛。后来账号因为长时间没有使用被暂停并删除，子域名也出现了 DNS 解析错误。那次经历让我明白，网页文件、域名和服务器其实是三件不同的东西。免费平台一旦收回空间，网站内容和网址都有可能一起失效。\n这一次我想把源文件留在自己电脑里。托管平台可以换，域名也可以重新解析，但文章不能跟着平台一起消失。\n先决定网站该怎么运行 博客常见的方案大致有两类。\n动态网站会在访问时查询数据库，再生成页面。WordPress、论坛和带用户系统的网站通常属于这一类。它适合登录、发帖、后台管理和复杂评论，但也需要长期运行的服务器、数据库、更新和安全维护。\n静态网站则提前把文章生成成 HTML。读者访问时，服务器只需要发送已经做好的文件。教程博客不需要注册和数据库，静态方案更省事，也更不容易因为服务器配置出错而打不开。\n最后我选了：\nMarkdown 文章 ↓ Hugo 生成 HTML ↓ Cloudflare Pages 发布 ↓ www.huangqixuan.com GitHub 在这里不是必须的服务器。它更像一个代码仓库，可以保存修改历史并触发自动部署。当前网站即使不依赖 GitHub，也能用 Wrangler 命令直接发布到 Cloudflare Pages。以后要换成 GitHub 自动构建，文章源文件也不需要重写。\n为什么用了 Hugo Stack 我看过几个教程博客，比较喜欢 Hugo Stack 的三栏布局：左边放头像和导航，中间是文章，右边放搜索、分类和标签。它在桌面上信息密度合适，缩到手机后也能改成单栏。\nHugo 本身只负责把内容生成网页，Stack 提供基础模板。文章依然是普通 Markdown，例如：\n--- title: \u0026#34;文章标题\u0026#34; date: 2026-08-28 categories: [\u0026#34;建站笔记\u0026#34;] tags: [\u0026#34;Hugo\u0026#34;] --- 正文写在这里。 这样做的好处很直接。网站样式可以重做，文章本身不用搬家。哪天不想用 Stack，甚至不想用 Hugo，这些 Markdown 文件仍然能打开。\n第一版为什么看起来不像液态玻璃 一开始，我只知道自己喜欢苹果的 Liquid Glass 风格，于是先找有没有现成的 Skill。最初找到的是 apple-design、frontend-design 一类设计规范，它们能说明层级、动效和控件应该怎么组织，但不能自动带来真实折射。\n第一批 Demo 主要用了这些 CSS：\nbackground: rgba(255, 255, 255, 0.12); backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.2); 它能做出漂亮的毛玻璃，却没有改变背景像素的位置。玻璃下面的线条不会弯，边缘也没有凸透镜感。看起来像一张半透明塑料片，而不是有厚度的玻璃。\n后来我把判断标准改成了下面几项：\n背景细节在玻璃边缘发生位移。 曲面边缘有连续折射，不只是模糊。 色差和高光要克制，不能像霓虹描边。 控件移动时要重新采样它下面的画面。 内容仍然清楚，按钮和输入框也必须能点。 把六个原项目放在一起比较 只看截图很容易误判，所以我把六个公开项目下载到本地，保留原引擎和默认参数，再做了一页统一入口。对比对象包括：\n项目 实现路线 我最后记住的特点 ybouane/liquidglass WebGL Shader 折射、色差和光照完整，适合独立按钮和工具栏 archisvaze/liquid-glass SVG + WebGL 像一个光学实验台，适合理解厚度、IOR 和边缘宽度 xanaxknight/liquid-glass-css-svg SVG displacement 单文件也能做出可见位移，适合研究位移图 el-gladiador/liquid-glass-react React + WebGL2 共享 WebGL 上下文，适合 React 项目中的多层玻璃 deepika-builds/liquid-glass JavaScript + SVG 中心清楚、边缘折射，普通 DOM 内容仍可交互 dpawlikowski/liquid-glass CSS + SVG 不依赖 WebGL，也能组合折射和色差 这一步推翻了我最早的做法。不同引擎里的参数不能硬凑成一套。例如，一个项目里的 IOR 并不能直接换算成另一个项目的 refraction。原项目调好的默认值通常比随手改出来的数字更平衡。\n我最后最喜欢的是 1 号的 WebGL 光学和 5 号的可读窗口。5 号 Demo 还有一套很特别的果冻拖动：窗口用 stiffness = 0.12 和 damping = 0.72 追赶鼠标，再根据速度沿移动方向拉长，最大形变约 8%。折射和拖动其实是两套机制，一个负责看起来像玻璃，一个负责动起来像有弹性。\n把研究结果写成自己的 Skill 原项目解决的是效果，建站还需要一套选择规则。于是我把研究结果整理成 liquid-glass-webgl-jelly Skill，让以后修改页面时先判断组件职责，而不是看到一个框就加玻璃。\n现在这套规则大致是：\n可读窗口、搜索框和信息面板使用边缘位移方案，中心尽量保持清楚。 独立按钮和紧凑工具栏可以使用 WebGL，但不能在一页堆几十个 Canvas。 长文章、表格和重复列表不做强折射，阅读比材质展示重要。 玻璃后面必须有可辨认的壁纸、线条或网格，否则无法确认折射是否真的存在。 选中、按下和成功状态不能只靠折射，还要有文字、边框或圆点提示。 prefers-reduced-motion 和降低透明度设置必须有对应降级。 其中一条是被实际 Bug 逼出来的。早期 Demo 在玻璃导航条里又放了一层透明 WebGL 选中透镜。它没有填充色，却会重新折射下面的竹林背景。点击标签后，看起来不像胶囊移动，而像背景突然换了一块。后来我删除了第二层折射，只保留清晰的选中状态。\n这个经验后来又用在网站分类卡上。外层窗口已经有真实折射，里面的卡片就不应该再套一层光学滤镜。内层只需要稳定的浅色衬底、细边框和很小的悬浮变化。玻璃叠玻璃不仅容易变脏，还会拖慢滚动。\n把 Stack 改成现在的样子 网站没有直接照搬某个 Demo。我保留了 Stack 熟悉的三栏结构，然后逐项修改。\n左栏删掉了多余介绍，只留下头像、标题、首页、归档、关于和暗色模式。中间仍然是普通文章流，整张文章卡都可以点击。右栏把多个搜索入口合并成一个苹果式搜索框，避免顶部按钮、侧栏输入框和导航菜单重复出现。\n背景最终用了 Tahoe 亮色壁纸。原图是 6016 × 6016 的 PNG，直接放进网页会太大，所以压成了 2560 像素的 WebP。页面仍能看到足够的线条和色彩变化，文件却只剩几十 KB。\n当前站点加载的主要光学方案是 SVG 位移滤镜。脚本会给头像区、导航、工具栏、搜索面板、文章卡和正文窗口初始化折射；不支持 SVG backdrop-filter 的浏览器使用磨砂降级。研究时准备的 WebGL 和果冻拖动代码还保留着，但这一版没有把它们同时铺满页面。滚动流畅比多几个 Shader 更重要。\n页面样式前后改了很多次，比较明显的问题有：\n整页套了暗色滤镜，导致亮壁纸变灰，文字也发闷。 搜索框沿用了暗色主题背景，变成一块纯黑矩形。 某些文字为了显得精致被缩得太小，在手机上很难看清。 卡片静止时完全透明，鼠标移上去才突然出现一大块底色。 移动端背景高度计算错误，页面底部出现黑色区域。 每次切页都重新加载全部效果，滚动和跳转显得卡。 这些问题没有靠一个“大改版”解决，而是对照截图逐个修。现在卡片的静止和悬浮状态是连续的，正文有稳定的对比度，手机端也不会再露出黑底。\n发布到 Cloudflare Pages 本地写文章时先启动 Hugo：\nhugo server -D 浏览器可以在本地立即看到修改。确认页面正常后，再生成用于发布的静态文件：\nhugo --minify --cleanDestinationDir --destination .cloudflare-dist 最后用 Wrangler 上传到已有的 Pages 项目：\nnpx wrangler pages deploy .cloudflare-dist ` --project-name huangqixuan-blog ` --branch main Cloudflare Pages 会生成一个版本地址，同时把生产版本更新到 huangqixuan-blog.pages.dev。项目目前绑定了 www.huangqixuan.com，Hugo 的 baseURL 也使用这个地址。\n我的发布流程现在固定成了四步：写 Markdown，本地构建，视觉和功能检查，同步到 Cloudflare 后再确认生产部署状态。托管平台只保存生成后的网页，真正需要长期保存的仍然是 Markdown、模板、样式和脚本。\n现在回头看 这个网站并不是先选好一套技术，然后一次搭成的。它从一个闲置域名开始，绕过免费空间、GitHub Pages、闲置电脑服务器和动态博客，最后才落到 Hugo 与 Cloudflare Pages。\n液态玻璃也走了同样的弯路。先做出毛玻璃，再发现不对；下载原项目对比之后，又遇到玻璃叠加、背景突变、文字对比度和性能问题。最后留下来的不是一个夸张 Demo，而是一套知道什么时候该用、什么时候该停的规则。\n这篇文章本身就是下一次测试。以后网站哪里改坏了，我可以回来看看当时为什么这样选，而不是重新从十几个标签页和聊天记录里找答案。\n","date":"2026-08-28T00:00:00+08:00","image":"/img/tahoe-light-2560.webp","permalink":"/p/liquid-glass-blog-build/","title":"从毛玻璃到液态玻璃：这个博客是怎么搭起来的"},{"content":"我想给自己留个能长期写东西的地方。以后遇到值得记下来的问题，就把过程和最后能用的办法放在这里，不再只丢进聊天记录或收藏夹。\n这里会写什么 大多是软件怎么用、电脑出了问题怎么查，还有搭这个网站时踩过的坑。偶尔也会放一点我不想忘掉的东西。\n📝 备注 现在还是个刚搭起来的空架子，内容会慢慢补。\n一段示例代码 教程里可以直接放命令。比如查看网络配置：\nipconfig /all 搜索和分类已经能用。下一步是把真正遇到过的问题整理成文章。\n","date":"2026-08-26T00:00:00Z","permalink":"/p/hello/","title":"你好，欢迎来到我的博客"}]