记录一下 Blog 自去年 11 月至今的一些变化

记录一下 Blog 自去年 11 月至今的一些变化

在看到 DouLog 后，发现 web 设计真是太有趣了，于是想要做一个自己的 Blog。先从模仿开始吧，然后就做了个类似的卡片：

当然没有他的好看的说（记录于 24-04-18）：

做的时候我发现让这个卡片居中其实挺麻烦的，因为我有个 footer 嘛，然后如果直接用绝对定位的话，view 高度小于卡片时，页面会无法滚动，footer 也会被挡住。所以图上实际上并没有完全居中（指在 view 的正中间），如果既需要能够滚动又希望在屏幕正中得话，可以考虑算一下 footer 的高度，然后给个 margin 偏移。而且这里还有个小坑就是对移动设备的适配，应当使用 100dvh（而不是 100vh），因为会有个导航栏。

我还做了一些动画，是用 Nextjs Layout 实现的，就不展示了，现自己看看感觉呆呆地。

随后闲置了很长一段时间（跑去改文章了）。

第二版

后来发现，首页呈现的有效内容太少了，Blog 嘛，先整点内容。于是在网上冲浪时看到了 JoshWComeau 的 Blog，遂花了点时间在今年三月改成了下面这样：

文章部分：

这有个非常有趣的部分就是它的 Header sticky 实现：

其实在文章的上面有一个同样大小的白色 sticky 块，同时 header 自身是透明的，在有颜色的区域是后面是一个绝对定位的 div，在它下面也有一个有颜色的 sticky 块，这里处理的时候要注意 z-index 的处理。

后来优先实现了评论区，并用 WebAuthn 实现了评论区的登录。

第三版

再后来就是现在 Blog 的样子，我在 About 里有写，参考了 fuwari 的设计，虽然在写这篇文章时有些动画还没有实现。它之后应该就是现在这样了，之后应该会再优化一些 UI 的表现和添加暗黑模式。记录一下 (2024-04-18)：

主页：

内容页：

当然此 Blog 的 MDX 渲染部分大量参考了 xiaojun Blog 的设计，再次表示感谢。