写了很多 Next.js 的代码，总结了一下 Server Component 和 Client Component 的规律，希望对后来者有用。如果有错误，欢迎大佬指正！

备注

本文是 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 的基本用法。

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

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

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

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

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

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

Markdown是一种几乎万能的标记语言，它能让我们以简单的语法写出很好看的文章。但是markdown源码只是一串纯文本字符串，我们需要将他渲染成HTML、word、PDF等格式才能更好的供人阅读。下面我将记录一下我是如何使用 remark 一系列的库实现将 markdown 渲染成 HTML，并提供自定义标记。

Lua 是一个小巧的解释型语言，优点很明显：非常小，因此很适合嵌入一些编译型语言中，使之可拓展性大大增强。

但是网上许多文章都是基于 lua 5.1 ，而且不支持 Windows 平台，于是我准备使用 CMake 弄一个全平台的。

提示

如果不需要编译 lua 库文件，windows 下只需要把代码全拖进VS直接编译即可，但这样就不能使用MinGW编译了

在 Android 开发中，可以使用 Intent 来在两个 Activity 之间传递数据。通过在 Intent 中添加键值对，然后在下一个 Activity 中使用 getIntent() 方法获取 Intent 对象，再使用 getXXXExtra() 方法获取数据。可以使用 putExtra() 传值，使用 getXXXExtra() 取值。

让然其他办法也很多：全局变量啦、单例啦、依赖注入感觉更好用，但不在本文讨论范围内。

在 Android 项目中加入的每一项资源，构建工具均会定义唯一的整型(Long) ID，通过这个 ID 来引用资源。例如，有一张叫 logo.png 的图像文件保存在 res/drawable/ 目录中，则构建工具会生成名为 R.drawable.logo 的资源 ID。

资源文件的存放位置

首先来看一下Android工程的目录结构：

装饰器(Decorators)是 Python 的一个重要部分。举一个不太恰当的比方，装饰器是一个函数，它以函数为参数，先执行一些操作，再调用作为参数的函数，然后再执行以下操作，例如下面的函数：

def my_decorator(func):
    print("Do something before call func.")
    func() # 调用func()
    print("Do something after call func.")

没错，就像C语言里的回调函数一样

备注

开始写这篇文章时，我也是啥也不懂，啥也不会，因此文章中一定会有许多不足甚至错误！欢迎大家批评指正！

另外，此文章参考了许多文档、教程等，都在引用出贴出了链接，但如果侵犯了作者著作权，请联系我，我会在第一时间删除。

四大组件

• 活动Activity
• 服务Service
• 广播接收器BroadcastReceiver
• 内容提供程序ContentProvider