Nuxt Content v3 中数组字段的筛选困境与性能优化
Nuxt Content 是 Nuxt 生态中用于处理 Markdown、YAML 等内容的强大模块。最近，我在使用 Nuxt v4 + Nuxt Content v3 重构博客（原为 Hexo）时，遇到了一个棘手的问题：v3 版本的默认查询 API 并未直接提供对数组字段进行“包含”（$contains）操作的支持。例如，这是我的正在写的这篇博客的 Front Matter：--- title: Nuxt Content v3 中数组字段的筛选困境 date: 2025-10-20 21:52:59 sticky: tags: - Nuxt - Nuxt Content - JavaScri...后 OCSP 时代，浏览器如何应对证书吊销新挑战
2023 年 8 月，CA/Browser Forum 通过了一项投票——不再强制要求 Let’s Encrypt 等公开信任的 CA 设立 OCSP Server2024 年 7 月，Let's Encrypt 发布博客，披露其计划关闭 OCSP Server同年 12 月，Let's Encrypt 发布其关闭 OCSP Server 的时间计划表，大致情况如下：2025 年 1 月 30 日 - Let’s Encrypt 不再接受新的包含 OCSP Must-Staple 扩展的证书签发请求，除非你的账号先前申请过此类证书2025 年 5 月 7 日 - Let's Encrypt 新...初试 Github Action Self-hosted Runner，想说爱你不容易
在今年八月的时候，我这边所在的一个 Github Organization 在私有项目开发阶段频繁触发 CI，耗尽了 Github 为免费计划 (Free Plan) 提供的每月 2000 分钟 Action 额度（所有私有仓库共享，公有仓库不计）。大致看了下，CI 流设置得是合理的，那么就要另寻他法看看有没有办法去提供更宽裕的资源，因此也就盯上了文章标题中所提到的 Github Action Self-hosted Runner。对于这个 Self-hosted Runner，与 Github 官方提供的 runner 相比，主要有以下几个优势针对私有仓库，拥有无限制的 Action 运行时...DNS 解析时长毁了我精心设计的图床网络架构
去年夏天，我兴致勃勃地写了好几篇博文，详细讲述了我如何搭建博客图床。核心目标很明确：分地区解析 DNS，让国内外的访客都能嗖嗖地加载图片，体验拉满。想法嘛，绝对是走在技术前沿的，堪称完美！然而……现实它总是喜欢给你来点小惊喜，对吧？955 毫秒！ 看到这个 DNS 解析时长的时候，我差点把刚喝下去的霸王茶姬喷在屏幕上。这简直就是一个隐形刺客，在我精心设计的图床网络架构背后，悄咪咪地给了致命一击。想象一下，访客满怀期待地点开你的博客，结果光是为了搞清楚图片服务器在哪，就要等上差不多一秒钟？这体验优化了个寂寞啊！为啥之前没发现？这得“感谢”DNS 缓存这位老好人。它勤勤恳恳地帮后来的访客记住了答案...Vue Markdown 渲染优化实战(下)：告别 DOM 操作，拥抱 AST 与函数式渲染
上回回顾：当 morphdom 遇上 Vue在上一篇文章中，我们经历了一场 Markdown 渲染的性能优化之旅。从最原始的 v-html 全量刷新，到按块更新，最终我们请出了 morphdom 这个“终极武器”。它通过直接比对和操作真实 DOM，以最小的代价更新视图，完美解决了实时渲染中的性能瓶颈和交互状态丢失问题。然而，一个根本性问题始终存在：在 Vue 的地盘里，绕过 Vue 的虚拟 DOM (Virtual DOM) 和 Diff 算法，直接用一个第三方库去“动刀”真实 DOM，总感觉有些“旁门左道”。这就像在一个精密的自动化工厂里，引入了一个老师傅拿着锤子和扳手进行手动修补。虽然活干...Vue Markdown 渲染优化实战(上)：从暴力刷新、分块更新到 Morphdom 的华丽变身
需求背景在最近接手的 AI 需求中，需要实现一个类似 ChatGPT 的对话交互界面。其核心流程是：后端通过 SSE（Server-Sent Events）协议，持续地将 AI 生成的 Markdown 格式文本片段推送到前端。前端负责动态接收并拼接这些 Markdown 片段，最终将拼接完成的 Markdown 文本实时渲染并显示在用户界面上。Markdown 渲染并不是什么罕见的需求，尤其是在 LLM 相关落地产品满天飞的当下。不同于 React 生态拥有一个 14k+ star 的著名第三方库——react-markdown，Vue 这边似乎暂时还没有一个仍在活跃维护的、star 数量不...node-sass 迁移至 dart-sass 踩坑实录
更新目标node-sass -> sass ( dart-sass )减少影响面，非必要不更新其他依赖的版本在前两条基础上，看看能否提升 node.js 的版本抛弃 node-sass 的理由node-sass 已经停止维护，dart-sass 是 sass 官方主推的继任者node-sass 在 windows 下的安装非常麻烦，npm 安装时需要开发机上同时装有 python2 和 Microsoft Visual C++在安装 node-sass 时，需要从 Github 拉取资源，在特定网络环境下成功率并不高项目依赖版本现状node@^12vue@^2webpack@^3vue-loa...前端中的量子力学——一打开 F12 就消失的 Bug
前端「量子态」现象的首次观测这事说来也邪乎，半个月前吃着火锅唱着歌，在工位上嘎嘎写码，发现一个诡异的 bug。作为如假包换的人类程序员，写出 bug 是再正常不过的事情了，但这 bug 邪门就邪门在我一打开 F12 的 DevTools 观察相关的 dom 结构，这 bug 就自动消失了；再把 DevTools 一关，Ctrl + F5 一刷新页面，Bug 又出现了。下面是使用 iframe 引入的 demo这 Bug 给我整得脑瓜子嗡嗡的，我又不是物理学家，写个前端怎么量子力学的观察者效应都给我整出来了（？观测者效应（Observer effect），是指“观测”这种行为对被观测对象造成一定...2025 年，如何为 web 页面上展示的视频选择合适的压缩算法？
事情的起因是需要在网页上展示一个时长约为 5 分钟的产品展示视频，拿到的 H264 编码的原文件有 60MB 大。高达 1646 Kbps 码率的视频文件通过网络传输，烧 cdn 流量费用不说，对于弱网环境下的用户体验也绝对不会好。因此必须在兼顾浏览器兼容性（太好了不用管 IE）的情况下，使用更现代的视频压缩算法进行压缩。哪些压缩算法是目前的主流？AV1AV1 作为目前压缩效率最高的主流视频编码格式，在 2025 年的今天已经在 YouTube、Netflix、Bilibili 等视频网站全面铺开，毫无疑问是最值得优先考虑的选择；除了优异的压缩效率以外，AV1 免版税的优势使得各硬件厂商和浏览...el-image 和 el-table 怎么就打架了？Stacking Context 是什么？
这是精弘内部的图床开发时遇到的事情，大一的小朋友反馈说 el-image 和 el-table 打架了。demo 的 iframe 引入看到后面的表格透出 el-image 的预览层，我的第一反应是叫小朋友去检查 z-index 是否正确，el-image 的 mask 遮罩的 z-index 是否大于表格。经过我本地调试，发现 z-index 的设置确实没问题，但后面的元素为什么会透出来？谷歌搜索一番，找到了这篇文章给 el-table 加一行如下代码即可.el-table__cell { position: static !important; } 经本地调试确认，这一方案确实能解决问题，...