mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-17 12:01:33 +02:00
style: add image to figure plugin
- Improve styles for images, blockquotes, tables and more - Fix unexpected line breaks
This commit is contained in:
radishzzz
parent
018f1c9b6c
commit
4ff44f9ac4
14 changed files with 126 additions and 59 deletions
|
|
@ -14,7 +14,7 @@ Retypeset 是一款基于 Astro 框架的静态博客主题，中文名为重新
|
|||
|
||||
去年入坑博客以后，就很喜欢刷别人的博客。一来是可以看看别人的博客主题，二来是能刷到别人分享的故事。
|
||||
|
||||
|
||||
|
||||
|
||||
几个月前，我偶然在 V2 刷到 [活版印字](https://astro-theme-typography.vercel.app/) 这个主题，简约的风格直接戳中我的审美。再加上之前的 Hexo 博客性能太差，我一直想换来着，于是就决定迁移博客到这个主题。
|
||||
|
||||
|
|
@ -27,14 +27,8 @@ Retypeset 是一款基于 Astro 框架的静态博客主题，中文名为重新
|
|||
- 桌面端的部分区域无法滚动
|
||||
|
||||
|
||||
<figure>
|
||||
<figcaption>匀速淡入淡出，略显生硬</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/birth-of-retypeset/different-margins.webp" alt="移动端左边距为四格，右边距为六格" />
|
||||
<figcaption>移动端的左边距为四格，右边距为六格</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
不过这些倒是小事。对我来说，最大的问题是主题不支持 i18n 功能。我指的 i18n 不是简单地更换 UI 语言，而是支持多语言路径。
|
||||
|
||||
|
|
@ -45,20 +39,18 @@ i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优
|
|||
于是我开始给主题添加 i18n 功能。既然要加，不能只支持中英两种语言，肯定得支持多种语言。根据 Astro 官方指南，我需要给每种语言都新建一个文件夹，这也太麻烦了。
|
||||
|
||||
|
||||
|
||||
接着我找到官方推荐的 i18n 插件，都试了一遍，效果都不理想，而且很麻烦。后来刷到一个推特帖子，我发现这个方案不错，非常地巧妙，而且不需要安装额外的插件。
|
||||
|
||||
|
||||
|
||||
于是我按照这个思路，花了一周时间终于是弄出一套方案。本地测试成功，非常开心。虽然我看不懂 Cursor 是怎么实现的，但能跑起来就行了。
|
||||
|
||||
结果问题就来了。部署网站到 Netlify 时一直报错，我也看不懂报错信息，给 AI 修也修不好。当时感觉心灰意冷，搞了这么久，还是失败了嘛…
|
||||
|
||||
无奈之下，我想到了向作者 Moeyua 发邮件求助。
|
||||
|
||||
## 转折
|
||||
|
||||
|
||||
|
||||
## 转折
|
||||
|
||||
没想到作者很快回复了我，并帮忙提交 PR 修复了报错问题。但是我发现 i18n 的实现方式被改成了 301 重定向，这显然不是我想要的效果。也不好意思再去麻烦人家作者，试着自己改改吧。
|
||||
|
||||
|
|
@ -68,7 +60,7 @@ i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优
|
|||
|
||||
三个月过去了，也就有了现在你所看到的样子。
|
||||
|
||||
|
||||
|
||||
|
||||
## 细节
|
||||
|
||||
|
|
@ -90,27 +82,15 @@ i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优
|
|||
|
||||
二是因为视觉风格。你所看到的字体、颜色、排版、图标、动画等，都是我精心推敲之后的结果。由于篇幅限制，不适合在此展开介绍。不过我相信，你应该能感受到主题背后，那一股优雅的气质。下面分享一些设计过程中的草图：
|
||||
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/birth-of-retypeset/draft-01.webp" alt="草图" />
|
||||
<figcaption>初稿</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/birth-of-retypeset/draft-04.webp" alt="草图" />
|
||||
<figcaption>尝试在标题上添加一些线条装饰</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/birth-of-retypeset/draft-03.webp" alt="草图" />
|
||||
<figcaption>尝试不同配色，包括渐变</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/birth-of-retypeset/draft-05.webp" alt="草图" />
|
||||
<figcaption>主题切换按键，其实是旋转 90 度的字母 O</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
### Webkit
|
||||
|
||||
|
|
@ -120,9 +100,9 @@ iPhone 上总是会出现一些奇怪的 BUG，例如切换页面时背景会闪
|
|||
|
||||
以下图片均为慢动作拍摄。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
为了解决这些奇怪的问题，我也是花了不少时间，好在最后都完美解决了。如果你在仓库中搜 ios，你可以看到不少注释，那些就是我的解决办法。
|
||||
|
||||
|
|
@ -154,9 +134,4 @@ iPhone 上总是会出现一些奇怪的 BUG，例如切换页面时背景会闪
|
|||
- [Moeyua](https://github.com/moeyua) 原主题作者，提供 PR 与故事的开始
|
||||
- [Xat](https://github.com/withxat) 热心老哥，在发帖求助两个月后主动联系我，提供 PR 与意见参考
|
||||
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/birth-of-retypeset/xat-help.webp" alt="草图" />
|
||||
<figcaption>世上还是好人多啊。<del>也不多，就一个</del></figcaption>
|
||||
</figure>
|
||||
|
||||
完。
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Markdown Style Guide
|
||||
published: 2025-03-08
|
||||
updated: 2025-03-23
|
||||
tags:
|
||||
tags:
|
||||
- Guide
|
||||
pin: 98
|
||||
toc: false
|
||||
|
|
@ -66,7 +66,7 @@ To add an image, add an exclamation mark `!`, followed by alt text in brackets `
|
|||
|
||||
### Output
|
||||
|
||||
|
||||
|
||||
|
||||
## Blockquotes
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ Para agregar una imagen, añada un signo de exclamación `!`, seguido de texto a
|
|||
|
||||
### Resultado
|
||||
|
||||
|
||||
|
||||
|
||||
## Citas en Bloque
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ abbrlink: markdown-style-guide
|
|||
|
||||
### 効果
|
||||
|
||||
|
||||
|
||||
|
||||
## 引用ブロック
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
|
|||
|
||||
### Результат
|
||||
|
||||
|
||||
|
||||
|
||||
## Цитаты
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ abbrlink: markdown-style-guide
|
|||
|
||||
### 效果
|
||||
|
||||
|
||||
|
||||
|
||||
## 區塊引用
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Markdown 样式指南
|
||||
published: 2025-03-08
|
||||
updated: 2025-03-23
|
||||
tags:
|
||||
tags:
|
||||
- 指南
|
||||
pin: 98
|
||||
toc: false
|
||||
|
|
@ -66,7 +66,7 @@ abbrlink: markdown-style-guide
|
|||
|
||||
### 效果
|
||||
|
||||
|
||||
|
||||
|
||||
## 块引用
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
|
||||
## 鸦青
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue