Skyone Blog

备注

本文是 MDN | @scope 的翻译，并根据我自己的理解进行了适当地修改和补充。采取与原文相同的许可证。

截至 2025 年 5 月，Firefox 仍然不支持 @scope 规则，但是 Chrome 与 Safari 已经支持。详情查看 Can i use @scope。

@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 的官网。一般网站都会默认使用亮色主题，但我又倾向于使用暗黑模式，所以经常看到这种闪烁。我认为这真的很影响用户体验，至少我自己看得很难受。

本文主要介绍如何使用 Traefik 作为 Docker 的反向代理，以及如何使用 Traefik 配置自动 HTTPS。但是，在写这篇文章时有感而发，先聊聊我对建网站，或者说自学 linux 的一些历程吧。想直达重点的点这里跳转。

还记得最开始使用云服务器的时候，租了个阿里云的学生机，当时就想建个博客玩玩，一顿搜索，发现网上全在推荐使用 WordPress。但是当时还是小白啊，只会 ls cat 的那种，安装 PHP 和 Apache 几乎是不可能的，再加上网上一堆教程动不动就手动编译安装，我当时连 yum 都不会用，怎么可能编译安成果嘛。

一直很好奇 React 官网的在线编辑器是如何实现的，于是稍微研究了一下，通过 TypeScript 和 Babel 实现在浏览器中编译 React。

这个项目本身也是使用 TypeScript, Webpack 和 Babel 构建的，源码在 react-online - Skyone Git。

在上一篇文章中，我记录了如何安装ArchLinux，这篇文章写一下如何安装GNOME桌面，以及一些常用软件。

众所周知，ArchLinux是一个滚动更新的发行版，所以在安装完系统后，需要手动安装桌面环境和一些常用软件。

Linux下的桌面环境有很多，比如GNOME、KDE、Xfce、LXDE、LXQt等等， 这里我选择安装GNOME桌面，因为GNOME不需要太多配置，而且我也比较喜欢GNOME类似的设计风格。此外，GNOME还包含一个基于flatpak的应用商店，当想使用一些基于KDE的应用又不想破坏系统的时候，可以使用flatpak安装。

除了桌面环境，还需要安装一些常用软件，比如浏览器、音乐播放器、视频播放器、输入法等等。

话不多说，让我们开始吧。

Windows 10 用了也有好几年了，最近用的有点腻了，这次折腾一下 ArchLinux。搞个双系统，也顺便检验一下自己的 Linux 水平。

都说 ArchLinux 安装有点难度，需要手动安装所有系统组件，但是我觉得还好，只要按照 Wiki 上的步骤一步一步来，就不会出什么问题。之前一直拿 ArchLinux 的 LiveCD 模式在虚拟机里面折腾，这次直接在实体机上安装 ArchLinux 并包含桌面环境。