reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: refine styling and update birth-of-retypeset article

Browse source 
- Remove view transitions for pin icon and desktop article timestamp
- Adjust scrollbar thickness
- Optimize apiflashKey path reference
- Reduce underline offset distance
This commit is contained in:
radishzzz 2025-04-06 02:53:50 +01:00
parent abdcd76a80
commit 712f49fe20
5 changed files with 32 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/content/posts/diaries/Birth of Retypeset-zh.md
View file

@ -3,25 +3,28 @@ title: Retypeset 博客主题诞生记
published: 2025-04-04
tags:
- 博客主题
toc: false
lang: zh
abbrlink: birth-of-retypeset
---
[Retypeset](https://github.com/radishzzz/astro-theme-retypeset) 是一款基于 Astro 框架的静态博客主题，中文名为重新编排。作为一名编程小白，我花三个月时间开发了这款主题，感受颇多。这篇文章，就来分享一下 Retypeset 诞生的故事。
## 初遇
去年入坑博客以后，就很喜欢刷别人的博客。一来是看看别人的博客主题，二来是能刷到别人分享的故事。
去年入坑博客以后，就很喜欢刷别人的博客。一来是可以看看别人的博客主题，二来是能刷到别人分享的故事。
![活版印字主题](https://image.radishzz.cc/birth-of-retypeset/typograph.webp)
几个月前，我在 V2 偶然刷到 [活版印字](https://astro-theme-typography.vercel.app/) 这个主题，简约的风格直接戳中我的审美。再加上之前的 Hexo 博客性能太差，我一直想换来着，于是就决定把博客迁移到这个主题。
几个月前，我偶然在 V2 刷到 [活版印字](https://astro-theme-typography.vercel.app/) 这个主题，简约的风格直接戳中我的审美。再加上之前的 Hexo 博客性能太差，我一直想换来着，于是就决定迁移博客到这个主题。
但上手之后，拥有强迫症的的我，发现了不少细节问题，例如：
但上手以后，有强迫症的我发现了不少细节问题，例如：
- 淡入淡出的动画速率不自然
- 页面跳转后会自动滚动
- 手势返回后没有过渡动画
- 移动端的内容边距，左窄右宽
- 桌面端部分区域无法上下滚动
- 动画速率不自然
- 页面跳转后会快速滚动
- 返回没有过渡动画
- 移动端的左右边距不一致
- 桌面端的部分区域无法滚动
![匀速淡入淡出，略显生硬](https://image.radishzz.cc/birth-of-retypeset/unnatural-animation-rate.gif)
<figure>
@ -30,26 +33,26 @@ abbrlink: birth-of-retypeset
<figure>
<img src="https://image.radishzz.cc/birth-of-retypeset/different-margins.webp" alt="移动端左边距为四格，右边距为六格" />
<figcaption>移动端左边距为四格，右边距为六格</figcaption>
<figcaption>移动端的左边距为四格，右边距为六格</figcaption>
</figure>
不过这些倒是小事，自己改下就行。对我来说，最大的问题是主题不支持 i18n 功能。我指的 i18n 不是简单地更换 UI 语言，而是支持多语言路径。
不过这些倒是小事。对我来说，最大的问题是主题不支持 i18n 功能。我指的 i18n 不是简单地更换 UI 语言，而是支持多语言路径。
i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优化指南](https://radishzz.cc/posts/d88c9984/)，结果收到了好几个 Bro 的私信感谢，表示对他们很有帮助。我感觉这挺有意义的，所以我打算以后都发布双语文章，还能锻炼一下英语水平。
i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优化指南](https://radishzz.cc/posts/d88c9984/)，结果收到好几个 Bro 的私信感谢，表示文章对他们很有帮助。我觉得这挺有意义的，所以我打算以后都要发布双语文章，还能锻炼一下英语水平。
## 困境
于是我开始给主题添加 i18n 功能。既然要加，不能就只支持中英两种语言，肯定得支持多种语言。根据 Astro 官方指南，我得给每个语言都新建一个文件夹，这也忒麻烦了…
于是我开始给主题添加 i18n 功能。既然要加，不能只支持中英两种语言，肯定得支持多种语言。根据 Astro 官方指南，我需要给每种语言都新建一个文件夹，这也太麻烦了。
![Astro 官方的 i18n 指南](https://image.radishzz.cc/birth-of-retypeset/astro-i18n-guide.webp)
接着我把官方推荐的所有 i18n 插件都试了一遍，效果都不理想，而且很麻烦。后来刷到一个推特帖子，我发现这方案不错，非常地巧妙，而且不需要额外的插件。
接着我找到官方推荐的 i18n 插件，都试了一遍，效果都不理想，而且很麻烦。后来刷到一个推特帖子，我发现这个方案不错，非常地巧妙，而且不需要安装额外的插件。
![推特 i18n 截图](https://image.radishzz.cc/birth-of-retypeset/twitter-i18n.webp)
于是我按照这个思路，在 Cursor 的帮助下花了一周时间，终于是弄出一套方案。本地测试成功，非常开心。虽然我看不懂 Cursor 是怎么实现的，但能跑起来就行了。
于是我按照这个思路，花了一周时间终于是弄出一套方案。本地测试成功，非常开心。虽然我看不懂 Cursor 是怎么实现的，但能跑起来就行了。
结果问题就来了。部署网站到 Netlify 时一直报错，我也看不懂报错信息，给 AI 修也修不好。当时就感觉心灰意冷，搞了这么久，还是失败了吗…
结果问题就来了。部署网站到 Netlify 时一直报错，我也看不懂报错信息，给 AI 修也修不好。当时感觉心灰意冷，搞了这么久，还是失败了嘛…
无奈之下，我想到了向作者 Moeyua 发邮件求助。
@ -57,18 +60,16 @@ i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优
![邮件截图](https://image.radishzz.cc/birth-of-retypeset/mail-to-moeyua.webp)
没想到作者很快回复了我，并提交 PR 修复了报错问题。问题是解决了，但我发现 i18n 的实现方式被改成了重定向，“/” 根路径会跳转到 “/zh” 路径，这显然不是我想要的效果。也不好意思再去麻烦人家作者，试着自己改改吧。
没想到作者很快回复了我，并帮忙提交 PR 修复了报错问题。但是我发现 i18n 的实现方式被改成了 301 重定向，这显然不是我想要的效果。也不好意思再去麻烦人家作者，试着自己改改吧。
当时我还看不懂语法，面对着主题原代码，AI 生成的代码，再加上作者修改的八百行代码，那可太难了，我感觉自己在看一本天书，实在是无从下手。没办法，我终于放弃了…
但当时我还看不懂语法，面对着主题原代码，AI 生成的代码，再加上作者修改的八百行代码，那可太难了，我感觉自己在看一本天书，实在是无从下手。没办法，我决定放弃了…
此时一个念头突然萌芽。要不我自己搞一个博客主题？
此时一个念头突然萌芽。要不我自己搞一个博客主题？开玩笑，我都没学过代码，算了吧。但想法一旦出现，就在脑海中挥之不去了。在兴趣的强烈驱动下，我开始自学网页三件套，并画了几张 [草图](https://www.v2ex.com/t/1100131)。在 V2 发帖求助无果之后，毅然开始搭建自己想象中的博客主题。
开玩笑，我都没学过代码，可拉倒吧。但是想法一旦出现，就在脑海中挥之不去了。在兴趣的强烈驱动下，我开始自学网页三件套，并画了几张草图，在 V2 [发帖求助](https://www.v2ex.com/t/1100131) 无果之后，毅然开始搭建自己想象中的博客主题。
三个月过去了，也就有了现在你所看到的样子。
![主题图片](https://image.radishzz.cc/birth-of-retypeset/retypeset-en-desktop.webp)
三个月过去了，也就有了现在你所看到的 [Retypeset](https://github.com/radishzzz/astro-theme-retypeset)。
## 细节
你可能会觉得，就这几个看起来很简单的页面，花了三个月？