这篇博客很短,主要就是展示下我这几天折腾博客的一些小成果,如果有人感兴趣,我再把这些功能拆分出来,单独写成博客。
时间展示
- 日期时间转换成了 ISO 字符串,对于处于东八区的我的博客来说,展示上存在问题,我就都修改成了 toLocalDateTime,转换成东八区时间展示。
- AstroPaper 的日期时间展示逻辑是,如果存在修改时间,并且修改时间大于发布时间,则只展示更新时间。我修改成了同时展示创建时间和更新时间。
- 和第二点类似,因为 AstroPaper 只展示了一个时间,全部文章页面就按照第二点获取的时间进行排序。也就是说,如果我在一月一号发布了一篇博文,在一月十号那天修改了文章内容,这边文章的时间就是一月十号。我的需求是只按照创建时间排序,更新时间展示在后头,显示什么时候修改过就可以了。
热力图
真的就是用 Cursor,全程指挥,写出了第一版的博客文章编写热力图。我的职责更多是提出产品需求和测试验收。第一版的展示是下面这样的:

这版的展示实际上基本是没有什么问题了,我的想法需要让热力图居中展示,并且设计了一套颜色适配我当前正在使用的博客主题的热力图主题颜色。于是第二版出现了:

在归档页面可以看到这版的实际交互。
图片展示
原版主题的图片展示永远是居中,宽度和文章相同。我的大部分图片的宽度都比文章长,就占满了文章,不是很没美观。还有竖版的图片,宽度占满文章展示,实在也不够友好。
优化后现在的展示是图片默认宽度最大 80%,高度 600px,鼠标悬浮放大,点击全屏展示。
阅读时长和自动更新文章时间
这两个优化的点,官方文章都有提到,按照文章操作就可以实现。不过我不是很理解为什么是单独编写文章,而不是提供成配置项。
- How to use Git Hooks to set Created and Modified Dates | AstroPaper
- How to add an estimated reading time in AstroPaper | AstroPaper
LaTeX 行间公式展示
官方有给出如何给文章加上 LaTeX 数学公式的展示,不过行间公式存在展示上的问题。花了好几个小时尝试排查后,总算是解决了问题。
Astro 使用 tailwindlabs/tailwindcss-typography 来样式化富文本内容,这些内容通常是从非 HTML 格式转换而来的。 大多数内容可以正确渲染,因为这些元素具有明确的语义,例如链接
<a>
、列表<li>
、段落<p>
,排版会正确渲染这些元素,因为 AstroPaper 已经在src/styles/base.css
中配置了这些元素的样式。 问题在于块方程没有被包装在已正确样式化的元素中。
修改完成后,还给官方提了个 PR,不过不知道官方是否考虑合并了。
博客主题颜色和字体
备注 2025-02-15 更新:
对暗色模式下的博客主题颜色和字体进行了调整,调整后的颜色更加柔和,字体处理了中英文混排的展示问题。中英文混排时,中文使用 serif 字体,英文使用 mono 字体,希望整体能看起来更舒服一些。
最后
这两天折腾的成果基本就是这些了。我还想做的事情是,在博客编写好 md 文件后,使用命令上传的微信公众号和飞书文档,这样能简化一些备份和发布流程。不过这个功能最近估计不会打算开发,过一段时间再考虑。