这段时间陆陆续续把博客打磨了一遍。都是不大的改动,但是细节决定成败啊(也不知道成败在哪)。
参考的是飞书、Kimi Code doc等设计,现在看这些文档博客看得越多,越喜欢简约。简约风格才是适合阅读的。就是要加在那种很细节的地方,而不是设计各种颜色、icon等。不过我还是想作为一个自己的网站,所以还是有一些特别的设计。
代码块
复制按钮。
自动换行。默认不换行、横向滚动;点一下切换成软换行。
语言标签,和换行、复制按钮并排,只有悬停代码块时才出现。
红绿灯。红灯折叠整个代码块,只剩一条标题栏;黄灯最小化成一小段淡出的预览;绿灯在文内完整展开。
标题
标题可以折叠。箭头平时藏在标题左侧,悬停标题行才出现;一旦折叠就常显。
锚点 # 跟在标题文字后面。
目录
默认全部展开。
手动折叠。带子级的条目右侧有一个小箭头,点一下折叠/展开子章节。
当前位置高亮:如果当前滚到的三级标题正处于折叠状态,高亮会落到它可见的祖先条目上,不会出现目录里没有任何选中的尴尬情况。
选中态简化:只有左侧一条指示条加文字加粗。
层级筛选:默认显示前三级标题,可以调成更深的层级;还有一个编号开关,切换成 1. / 1.1 / 1.1.1 的层级编号。
滚动条:目录太长时,为了保持选中项居中,滚动条会不停跳动。修改为上下15%才会滚动,参考的是VSCode的滚动策略。移动端目录移到了正文上方,默认折叠,序号去掉改用缩进圆点区分层级。
排版细节
- 断点续读:关掉页面再回来,会回到上次读到的位置。
- 中英文之间自动加空格(pangu)
- 引用块去掉了左侧竖线,四角圆润
- 表格去掉了灰白相间,纯白底,圆角处不再露灰色边线
- 正文的英文换成了 Georgia,中文还是思源宋体;标题统一用思源宋体自带的拉丁字形,不再混搭
站名和侧栏
菜单固定在视口约 35% 高度处,随窗口自适应;选中项的图标描边会微微加粗(1.9 → 2.3),替代了原来的小圆点,图标和站名、底部按钮严格左对齐。
站名换了手写体 Gloria Hallelujah,并且只加载子集用在「ionfeather’ Log」这一处。
构建和杂项
RSS 只输出摘要。rssFullContent: false 之后,构建时间 3.1s → 1.3s,feed 从 2.5MB 瘦到 46KB。代价是 RSS 阅读器里看不到全文,得点进来。
标签显示名和 URL 分离。tags 里直接写 C++ 是不被允许的,+ 在 URL 里无法存在。解决方法是front matter 写 Cpp,再给 content/tags/cpp/_index.md 写上 title: C++:链接是 /tags/cpp/,显示出来还是 C++。