在上一篇文章 使用 YubiKey 解密 LUKS 分区 之后我发现了两个问题：

• 使用 Yubikey FIDO2 解密并不稳定，有时候还算要使用密码解密
• 有时候强制使用 Yubikey 解密，不支持回退到密码解密

最近又查看了一下 ArchWiki[^2]，最终解决了以上两个问题。写下这篇文章以作记录。

去年11月我写了一篇ArchLinux安装GNOME桌面，也正是那时候我将电脑的主要系统从Windows转到了ArchLinux。诚然， gnome 很好，如果你需要一个不需要折腾就能用的桌面环境，那么 gnome 是一个不错的选择。

我一开始也是这么想的，直到……今年 KDE Plasma 6 发布了。我不得不说，KDE Plasma 6 的演示视频真的很吸引人，所以我决定尝试一下，于是我又折腾了一遍系统，这次安装的是 KDE Plasma 桌面。新的大版本发布，肯定有大量的问题，尤其是搭配 NVIDIA 和 Wayland 这两个离谱的玩意。Wayland 由于 x11 历史包袱太重，经常出现兼容问题（尤其是 Chromium），而 NVIDIA 一直以来都是 Linux 用户的痛点，Linus 骂的一点都不冤。

现在新系统用了也有一段时间了，是该动笔记录一下，免得下次装又到处找资料。这次文章分两部分：安装 KDE Plasma 桌面和常见问题解决。欢迎大家在评论区补充。

@scope 可以让我们精确的定位 DOM 子树中的元素，而无需编写难以覆盖的过于特定的选择器，并且不会将选择器与 DOM 结构耦合得太紧密。

在 JavaScript 里，可以使用 CSSScopeRule 访问 @scope 规则。

最近在写一个碧蓝档案学生 Pixiv 收藏数统计的网站，想要实现两个炫酷的功能：模仿碧蓝档案游戏内什亭之匣的页面切换动画和圆形扩散的明暗主题切换动画（就像 Android 版 Telegram 那样）。

本来已经把 SVG 和动画的关键帧画好了，忽然发现一个问题，我的网站是基于 Next.js App Router 的，但是 App Router 不支持监听 Router 事件，也就是说，我并不知道下一个页面什么时候完成加载，也就没办法选择合适的时机播放页面进入的动画。

一搜 Google，千篇一律全是使用 Framer Motion 或者 React Transition Group，但是我 CSS 的 @keyframes 动画已经写好了，不想再重写一遍，难道只用纯 CSS 不能实现？

正好昨天在 MDN 上看到了 View Transitions API 的介绍，这个 API 拿来做动画是真的方便，于是去 Can I use 查了一下，发现现在只有 Chrome 支持，不过也没关系，先实现再说。

经过一番尝试，终于实现了两个动画效果，本文就来介绍一下 View Transitions API 的基本用法。

年前入手了两枚 YubiKey 5C NFC，一开始只是用于一些网站的双因素认证，后来发现 YubiKey 还可以用于解密 LUKS 加密的分区。这样就可以实现在启动时需要插入 YubiKey 才能解锁硬盘，在虚拟机了试了一下，发现效果很好！今天来记录一下如何使用 YubiKey 解密 LUKS 加密的分区。

首先准备材料：

• 一个安装好的 Arch Linux 系统
• 一枚支持 FIDO2 的 YubiKey

理论上任何 Linux 发行版都可以，但一些包名可能不一样。而且由于是基于 Linux 内核，是可以实现加密整个根分区的。

如果你只使用密码解密 LUKS 加密的分区，也可以不需要 YubiKey。这篇文章也包含了使用密码解密 LUKS 加密的分区的方法。

总结一下 WireGuard 的配置方法，以免长时间不用忘记。

主要包含以下内容：

• 关键概念
• 使用 wg-quick
• 实际场景例子

文章基于 Arch Linux，理论上适用于所有 Linux 发行版。

今天在 medium 看到一篇关于 Google Photos 的文章，里面详细的介绍了谷歌的一名工程师是如何设计 Google Photos 的布局的，文章地址：Building the Google Photos Web UI。

观察了一下 Google Photos 的布局，发现它的布局非常的有意思，有以下特点：

• 一行图片的宽度始终刚好占满容器宽度
• 图片全部保持原始比例，不会被拉伸
• 图片的高度不一，但是每一行的高度是一样的
• 图片顺序不会被改变

感觉很神奇，但是那篇文章里的实现方法太过复杂，虽然性能非常好，但是我觉得可以用更简单的方法来实现，于是就有了这篇文章。

不知道大家有没有遇到过这样的问题，就是在 Next.js 中使用暗黑模式时，页面会闪烁一下，这是因为 Next.js 会在服务端渲染时并不知道用户是否选择了黑暗模式（比如我一般将这个变量存在 window.localStorage 里），所以所以在用户接收到页面之前，页面会先显示一下默认的样式，然后再根据用户的选择来渲染暗黑模式的样式，这样就会导致页面闪烁。

在使用 CSS in JS 的时候这种闪烁尤为明显，例如 MUI 的官网。一般网站都会默认使用亮色主题，但我又倾向于使用暗黑模式，所以经常看到这种闪烁。我认为这真的很影响用户体验，至少我自己看得很难受。