博客主题完工啦～

[radishzz]

书接上文，为爱发电，花俩月时间做的博客主题 完工啦～

始于 V2 ，终于 V2 。最后再发这一次。

Retypeset 是一款基于 Astro 框架的静态博客主题，中文名为重新编排。本主题以 活版印字 为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。

• 预览地址：重新编排
• 仓库地址：Retypeset
• 小作文：Retypeset 博客主题诞生记

[kneep]

挺好看的，不过，标题那个动画感觉有点多余，帧率好像很低，卡顿，按 back 键卡一下很明显。
能不能来个 hugo 版本？

[radishzz]

@kneep 你是说站点标题吗？我确实有考虑删掉这个动画。

掉帧的话，我猜你是不是 iOS 设备？ iPhone 上的 view transition 动画帧率特别低，其它设备上都挺流畅的。

移植 hugo ，我没有这个技术和精力啊 🥲

[katwalk]

可否移植到 hugo ？

[kneep]

@radishzz macOS 和 iOS 上都明显卡，换了浏览器也一样。

[Plumbiu]

astro 就是快啊

[radishzz]

@kneep #4 我在旧 Mac 上试一下，确实有点卡。

主要为了演示所有功能，我开了评论和 KaTeX ，它俩的 JS 不小。还有自定义中文字体的 CSS ，也有十几 KB ，导致动画就有比较卡了。自用的话，完全可以优化掉这些。

你试试 [astropaper]( https://astro-paper.pages.dev/)，同样的动画效果，只是它几乎没有任何 JS ，你看是不是流畅多了。

[radishzz]

@Plumbiu 确实快，性能杠杠的

[65r4Zgm364TDg652]

相对于这么漂亮的博客，我更希望找到个展示+联系表单的漂亮内容体，比如介绍自己，跳转自己的业务和服务，虚拟主机或者 cf 上就能部署最好。博客什么的写不动啊，ai 大潮一来，也没必要写了，要啥木有🤣

[radishzz]

@huguadao 我明白你的意思，就是一上来 “Hi ，我是 xxx 👋”，然后放几个社交图标那种。

怎么说呢，需求不同。你看我也不是程序员，也没有什么业务，也没想着打造个人形象。就单纯想有个载体，偶尔写点文章可以记录下。可能我这个主题更适合于生活、随笔、文学这种风格？

另外，有个老哥把我页面魔改了，就改成你说的那样了😂 https://www.sidhantdhar.com/about/

[metrue]

我也基于开源缝缝补补做了一个.

https://imgur.com/qsxpsMX

<img alt="blog.minghe.me" src="https://imgur.com/a/9OW4Att">

[OWLS]

汉字没有 20px 以上的我都看不下去；

[OWLS]

整体感觉舒适。

[radishzz]

@OWLS 到底是看不下去还是舒适啊😂，标题够大了吧，有 32px

[chengnuo0905]

很棒~

[KevinKL]

OP 是设计师吗？同为码字爱好者，自己还做了一个 app 写东西，最近正在改进内容排版，楼主有兴趣的话可以交流一下写博客的经验 bWV0YW5vdGUudGVhbUBnbWFpbC5jb20K

[lynan]

正文是不是也用 宋体 的话感觉上会比较统一

[radishzz]

@lynan 好问题。是这样的，我在标题中用的字体，叫初夏明朝体，它有很多不寻常的笔画。作为标题字体很合适，它会让人感觉有些不一样的小细节。但如果作为正文字体，本身宋体就不是最佳的屏显字体，再加上大量的异常笔画，会给阅读带来障碍。具体效果可以看： https://imgur.com/a/4pnxEJv

最适合的屏显宋体是思源宋体，但我已经在主题中内置了一套完整的初夏明朝体，包含简、繁、日[三种语言]( https://github.com/radishzzz/astro-theme-retypeset/blob/master/public%2Ffont%2FCommon%20Characters.txt)。如果再内嵌一套完整中文字体，主题就很臃肿了。虽然我有设置一个配置项，可以正文字体改成初夏明朝体，但考虑到阅读体验，我还是选择用黑体。

[radishzz]

@lynan 补下链接。

初夏明朝体预览效果： https://imgur.com/a/4pnxEJv

简、繁、日常用字： https://github.com/radishzzz/astro-theme-retypeset/blob/master/public%2Ffont%2FCommon%20Characters.txt

[lynan]

我的博客是用的
```css
@font-face {
font-family: "source han serif cn";
src: local("Source Han Serif CN"), local("Source Han Serif SC"),
local("Source Han Serif TC"), local("Source Han Serif TW"),
local("Source Han Serif"), local("Noto Serif CJK SC"), local("Songti SC"),
local("SimSong"), url(/fonts/SourceHanSerifCN-Regular.woff2) format("woff2");
font-display: swap;
unicode-range: U+4E00-9FFF;
}
```

`SourceHanSerifCN-Regular.woff2` 字体是用 https://github.com/ecomfe/fontmin 提取出用到的中文字符简化的文件，目前大小为 343 KB ，还在可接受范围内

[lynan]

Fallback 的字体也是 思源宋体

[lynan]

为什么会提到 宋体，是因为 OP 的主题给我一种 Kindle 界面的感觉，Kindle 的中文字体因该是 宋体 吧（或者类似的）

[radishzz]

@lynan 还是有点区别的。我是 VF 可变字体 + 三种语言，有 7 种字重 + 8000 多个字符。你是 SF 静态字体 + 一种语言，体积自然会小很多。fontmin 我也用过，它只能提取静态字体，可变字体得用 pyftsubset + cn-font-split 来提取子集和字体切片。

考虑到字体体积，CJK 的 Korean 韩语我都没加。我在想后面要不要再加上。

[radishzz]

@lynan 太棒了！很高兴能听到你这样说，我的目标是模拟书页质感。我一开始是考虑加入纸张肌理，效果参考 [https://medium.com/@erikritter/css-snippets-add-a-texture-overlay-to-an-entire-webpage-b0bfdfd02c45]，后来发现不行，效果很老土、很低级。于是我转换思路，去模拟 Kindle 的阅读体验。你在 Kindle 上不可能看到 [https://antfu.me/posts] 这样在文章标题下放一个年份（我一开始是考虑这样做的，后来把年份简化成一根短线客），也不会有背景肌理。在文章页面也不会有 sticky 固定位置的站点标题和交互按键。再加上我用了 heti 来优化中文字体排版，才会有这种效果。这些都是主题背后看不到的小细节。所以我的目标其实就是模拟 kindle 的阅读体验！

[radishzz]

@lynan 还有主题的配色。我一开始也是想搞点花哨的、渐变的，你可以在小作文里看到草图。后来改成黑白灰了，颜色也都是在 oklch 中特挑的。黑不是纯黑，白也不是纯白。同时在亮色和暗色模式下，文字与背景的对比度也是保持一致的，阅读效果非常统一。

[Azad01]

很棒很好看

[w4ngzhen]

楼主做的很好！毛遂自荐一个自己编写的一个 Hexo 博客主题，预览地址： https://brief-example.zhen.blog ；另外，本人的博客也使用的该主题： https://zhen.blog 。