记录一下 Blog 自去年 11 月至今的一些变化
记录一下 Blog 自去年 11 月至今的一些变化
在看到 DouLog 后,发现 web 设计真是太有趣了,于是想要做一个自己的 Blog。先从模仿开始吧,然后就做了个类似的卡片:
![卡片首页](/_next/image?url=%2Fimages%2F2024-04-18-blog-change%2F%25E5%258D%25A1%25E7%2589%2587%25E9%25A6%2596%25E9%25A1%25B5.webp&w=3840&q=75)
当然没有他的好看的说(记录于 24-04-18):
![DouLog 24-04-18 截图](/_next/image?url=%2Fimages%2F2024-04-18-blog-change%2FDouLog.webp&w=3840&q=75)
做的时候我发现让这个卡片居中其实挺麻烦的,因为我有个 footer 嘛,然后如果直接用绝对定位的话,view 高度小于卡片时,页面会无法滚动,footer 也会被挡住。所以图上实际上并没有完全居中(指在 view 的正中间),如果既需要能够滚动又希望在屏幕正中得话,可以考虑算一下 footer 的高度,然后给个 margin 偏移。而且这里还有个小坑就是对移动设备的适配,应当使用 100dvh(而不是 100vh),因为会有个导航栏。
我还做了一些动画,是用 Nextjs Layout 实现的,就不展示了,现自己看看感觉呆呆地。
随后闲置了很长一段时间(跑去改文章了)。
第二版
后来发现,首页呈现的有效内容太少了,Blog 嘛,先整点内容。于是在网上冲浪时看到了 JoshWComeau 的 Blog,遂花了点时间在今年三月改成了下面这样:
![第二版展现内容为主](/_next/image?url=%2Fimages%2F2024-04-18-blog-change%2F%25E7%25AC%25AC%25E4%25BA%258C%25E7%2589%2588%25E5%25B1%2595%25E7%258E%25B0%25E5%2586%2585%25E5%25AE%25B9%25E4%25B8%25BA%25E4%25B8%25BB.webp&w=3840&q=75)
文章部分:
![第二版展文章部分](/_next/image?url=%2Fimages%2F2024-04-18-blog-change%2F%25E7%25AC%25AC%25E4%25BA%258C%25E7%2589%2588%25E6%2596%2587%25E7%25AB%25A0%25E9%2583%25A8%25E5%2588%2586.webp&w=3840&q=75)
这有个非常有趣的部分就是它的 Header sticky 实现:
其实在文章的上面有一个同样大小的白色 sticky 块,同时 header 自身是透明的,在有颜色的区域是后面是一个绝对定位的 div,在它下面也有一个有颜色的 sticky 块,这里处理的时候要注意 z-index 的处理。
后来优先实现了评论区,并用 WebAuthn 实现了评论区的登录。
第三版
再后来就是现在 Blog 的样子,我在 About 里有写,参考了 fuwari 的设计,虽然在写这篇文章时有些动画还没有实现。它之后应该就是现在这样了,之后应该会再优化一些 UI 的表现和添加暗黑模式。记录一下 (2024-04-18):
主页:
![第三版主页](/_next/image?url=%2Fimages%2F2024-04-18-blog-change%2F%25E7%25AC%25AC%25E4%25B8%2589%25E7%2589%2588%25E4%25B8%25BB%25E9%25A1%25B5.webp&w=3840&q=75)
内容页:
![第三版](/_next/image?url=%2Fimages%2F2024-04-18-blog-change%2F%25E7%25AC%25AC%25E4%25B8%2589%25E7%2589%2588%25E5%2586%2585%25E5%25AE%25B9%25E9%25A1%25B5.webp&w=3840&q=75)
当然此 Blog 的 MDX 渲染部分大量参考了 xiaojun Blog 的设计,再次表示感谢。