From 712f49fe20f6d12bfe10b69a2743f1dfecfcc86b Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Sun, 6 Apr 2025 02:53:50 +0100
Subject: [PATCH] chore: refine styling and update birth-of-retypeset article

- Remove view transitions for pin icon and desktop article timestamp
- Adjust scrollbar thickness
- Optimize apiflashKey path reference
- Reduce underline offset distance
---
 src/components/PostList.astro                 |  8 +---
 src/components/Widgets/Scrollbar.astro        |  4 +-
 .../posts/diaries/Birth of Retypeset-zh.md    | 43 ++++++++++---------
 src/layouts/Head.astro                        |  6 +--
 src/styles/heti.css                           |  6 +--
 5 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index bb5252c..6dc576a 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -45,6 +45,7 @@ function getPostPath(post: Post) {
           data-disable-transition-on-theme
         >
           {post.data.title}
+        </a>
 
           {/* pinned icon */}
           {pinned && (
@@ -58,7 +59,6 @@ function getPostPath(post: Post) {
               <path d="M16.5 23.6c.6-6.1 1.1-8.6 7.2-15.5L15.9.4C9 6.5 6.5 7 .4 7.5l7.4 7.4-6.4 7 .7.7 7-6.4zm-.8-21.3 6 6c-5 6.1-5.7 8.1-6.2 12.2L3.4 8.5C7.5 8 9.5 7.3 15.6 2.3Z" />
             </svg>
           )}
-        </a>
       </h3>
 
       {/* mobile post time */}
@@ -74,11 +74,7 @@ function getPostPath(post: Post) {
       </div>
 
       {/* desktop post time */}
-      <div
-        class="hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)"
-        transition:name={`time-${post.data.abbrlink || post.id}`}
-        data-disable-transition-on-theme
-      >
+      <div class="hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)">
         <PostDate
           date={post.data.published}
           minutes={post.remarkPluginFrontmatter.minutes}
diff --git a/src/components/Widgets/Scrollbar.astro b/src/components/Widgets/Scrollbar.astro
index bf34b24..1672a11 100644
--- a/src/components/Widgets/Scrollbar.astro
+++ b/src/components/Widgets/Scrollbar.astro
@@ -74,7 +74,7 @@ document.addEventListener('astro:after-swap', setupScrollbar)
 
 .scrollbar-body {
   --os-size: 0.8rem;
-  --os-padding-perpendicular: 0.1rem;
+  --os-padding-perpendicular: 0.15rem;
   --os-padding-axis: 0.2rem;
   --os-handle-border-radius: 99rem;
   --os-handle-perpendicular-size: 75%;
@@ -89,7 +89,7 @@ document.addEventListener('astro:after-swap', setupScrollbar)
 }
 
 .scrollbar-widget {
-  --os-size: 0.5rem;
+  --os-size: 0.35rem;
   --os-padding-perpendicular: 0;
   --os-padding-axis: 0;
   --os-handle-border-radius: 99rem;
diff --git a/src/content/posts/diaries/Birth of Retypeset-zh.md b/src/content/posts/diaries/Birth of Retypeset-zh.md
index 462641e..9265764 100644
--- a/src/content/posts/diaries/Birth of Retypeset-zh.md	
+++ b/src/content/posts/diaries/Birth of Retypeset-zh.md	
@@ -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)。
-
 ## 细节
 
 你可能会觉得，就这几个看起来很简单的页面，花了三个月？
diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro
index 2c0af8e..0ec4d44 100644
--- a/src/layouts/Head.astro
+++ b/src/layouts/Head.astro
@@ -14,7 +14,7 @@ interface Props {
 const { postTitle, postDescription, postSlug } = Astro.props
 const { currentLang } = getPageInfo(Astro.url.pathname)
 const currentUI = ui[currentLang as keyof typeof ui]
-const langCode = currentLang === defaultLocale ? '' : `/${currentLang}`
+const langCode = currentLang === defaultLocale ? '' : `${currentLang}/`
 
 const { title, subtitle, description, author, url, favicon, i18nTitle } = themeConfig.site
 const { mode, light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
@@ -33,8 +33,8 @@ const pageDescription = postDescription || siteDescription
 const pageImage = postSlug
   ? `${url}/og/${postSlug}.png`
   : apiflashKey
-    ? `https://api.apiflash.com/v1/urltoimage?access_key=${apiflashKey}&url=${url}${langCode}&format=png&width=1500&height=788&ttl=86400&wait_until=network_idle&no_tracking=true`
-    : `https://api.apiflash.com/v1/urltoimage?access_key=02a837b6188f4ba0a7fd9fbeff03a83e&url=https://retypeset.radishzz.cc${langCode}&format=png&width=1500&height=788&ttl=604800&wait_until=network_idle&no_tracking=true`
+    ? `https://api.apiflash.com/v1/urltoimage?access_key=${apiflashKey}&url=${url}/${langCode}&format=png&width=1500&height=788&ttl=86400&wait_until=network_idle&no_tracking=true`
+    : `https://api.apiflash.com/v1/urltoimage?access_key=02a837b6188f4ba0a7fd9fbeff03a83e&url=https://retypeset.radishzz.cc/${langCode}&format=png&width=1500&height=788&ttl=172800&wait_until=network_idle&no_tracking=true`
 ---
 
 <head>
diff --git a/src/styles/heti.css b/src/styles/heti.css
index 8419f7c..6f38cad 100644
--- a/src/styles/heti.css
+++ b/src/styles/heti.css
@@ -6,10 +6,10 @@
 
  /* Global Styles */
 .heti {
-  --at-apply: 'leading-1.55em break-words hyphens-auto tracking-0.02em';
+  --at-apply: 'leading-1.5em break-words hyphens-auto tracking-0.02em';
 }
 .heti:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
-  --at-apply: 'leading-1.5em tracking-0';
+  --at-apply: 'tracking-0';
 }
 
 /* Article Title */
@@ -19,7 +19,7 @@
 
 /* Links */
 .heti :where(a) {
-  --at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
+  --at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.08em lg:underline-0.1em';
   --at-apply: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/80) ';
 }