这是博客的第一篇帖子，用来测试整个页面的排版与组件是否正常工作。后续的文章都会以这种卡片的形式展示在主页上。
这一篇特别长，是为了让顶部的阅读进度指示器能跑起来。滚动页面时，你会看到顶栏底部的彩色横条随着阅读进度缓慢增长，颜色会跟随当前的调色板变化。
为什么需要进度指示器
长文章需要一个视觉锚点，让读者知道自己在文章中的位置，还剩多少没读。Material 3 提供了两种进度指示器：线性（Linear）和环形（Circular）。对于顶部阅读进度这种场景，线性进度条最合适。
搜索功能
点击右上角的搜索按钮，或者按 Ctrl + K（Mac 上是 Cmd + K）即可打开搜索面板。输入关键词，会实时过滤文章标题和摘要，点击结果跳转到对应文章。
调色板与背景
点击左上角菜单按钮，抽屉底部有一个「调色板」入口。点击它会弹出一个 Bottom Sheet，里面提供十二种主题色和三种背景。
玻璃拟态
顶部 App Bar 使用半透明背景配合高斯模糊，滚动时下方内容会被柔和地模糊透出，形成一种类似于 frosted glass 的视觉效果。
阅读量和点赞
标题下方有两个胶囊按钮，左边是阅读量，右边是点赞。每次打开文章页，阅读量会加 1。点击点赞按钮，心形会变实心并弹跳一下。
小结
Material 3 的组件库还在不断完善，很多常用的模式需要开发者按规范手动组合。但只要理解每个组件的语义和令牌系统，实现起来并不复杂。
滚动一下试试吧。感谢阅读。