我的博客设计

我的博客受到 This is a motherfucking website 影响比较多：

• 比较轻量，加载相对较快，减少不必要的资源
• 支持响应式，在不同屏幕上都容易阅读
• 合适的行间距、行宽、对比度、字体、字体大小、颜色、排版
• 不包含追踪服务
• 考虑可访问性
• …

总体来说就是一种极简风格。

---

我是用 org-mode 写博客，然后 通过 org-publish 转换成 HTML。

转出来的 HTML 没有引入 JS，只包含一些预设的 CSS，相当的轻量。

HTML 默认是 Flow Layout，从左到右，从上到下，按照 HTML 标签顺序排列元素，默认就是响应式的，窗口小了，文字就会自动换行。

如果不考虑样式，这样一份 HTML 1 ¹ 就可以作为静态文件，丢到 GitHub Page 或者 Netlify 之类的平台托管，让别人访问了。

当然，仅仅是 HTML，阅读体验上还不够好，会存在几个问题：

• 行间距相对拥挤
• 文本太宽，如果屏幕比较大，阅读起来就得来回移动眼睛，看起来比较累
• 文字有点小，字体是默认字体，也不够好看
• 对比度可能会比较高，一些颜色可能比较不那么好看

针对这些问题，就需要写一些 CSS，在每个 HTML 文件中引用。

行间距

对于行间距，或者说 行高，可以稍微大一些，使得行与行之间不要过于拥挤，但也不要太大，要能看得出来是属于一个段落的，不能过于分散。

至于多少合适，就仁者见仁了。

行宽

文本太宽的问题，可以固定内容的宽度，让内容居中 2 ²。

这样在阅读时，基本 不用左右移动眼睛，读起来会比较舒适。

至于多宽合适，不要太宽导致眼睛需要移动，不要太窄导致内容过少就好。

字体

文字我更倾向与偏大一些，这样看起来没有那么费劲，默认的字号尽管能看清，但更大的字号可以看得更舒服。 3 ³

字体可以选一个自己喜欢的，不过有一些地方是需要考虑的：

• 字体文件的大小
• 字体好看固然很好，但不能好看到让人过于注意字体，而忽视内容，否则就喧宾夺主了
• 考虑字体粗细的对比度是否足够，不然可能加粗后看不出来区别
• 考虑一些字符是否容易区分，例如 0,O,o,i,I,l,1 这些字符是否都能区分开 4 ⁴
• 英文字体和中文字体是否和谐
• 考虑字体加载失败的情况，在 设置 font-family 的时候应该始终包含一些通用的系统字体
• 字体版权问题

目前我都是用的 霞鹜文楷。 5 ⁵

对比度

我目前遵循的是 APCA (Accessible Perceptual Contrast Algorithm) 6 ⁶，要保证对比度足够高，使得阅读起来能看清且不费劲，也要确保对比度不要太高，尤其是暗色主题下，对比度过高会看着刺眼。

颜色

一般来说，应该有一个主色，搭配一些和主色相辅相成的辅助色，以及一些中性色。 7 ⁷

主色是网站的主色调，是最常使用的颜色；有的地方想和主色区分，就可以用一些辅助色，一般没有主色那么突出；而中性色则主要是用于文字。

颜色太少可能会让博客显得单调，太多又会显得凌乱。

目前我没有一个很喜欢的调色板，所以还是中性色为主，我主要设置背景、正文、引用、链接、选中、高亮、边框的颜色。

背景可以考虑设置一个背景图，让博客看起来不那么单调，但也不要太花里胡哨。

如果是纯色，则避免纯黑和纯白，可以稍微降低一些对比度，使得看起来柔和一些。

至于正文、引用、边框等颜色，也是基于 APCA，用不同的对比度区分它们的关系，一般引用文字要比正文对比度会浅一些。

选中和高亮我用了比较突出的颜色，毕竟需要明显一些。 8 ⁸

因为支持了暗色主题，还需要针对暗色主题适配颜色，同样也是基于 APCA 对比度设置的颜色。

由于颜色会在很多地方重复使用，一般来说会定义成 CSS variables 9 ⁹，便于复用。

---

完成上面那些配置，页面阅读起来应该就不错了。

在这个基础上，可以开始做一些 渐进式增强。

优化小屏的阅读体验

在手机上屏幕比较小，为了能够阅读更多的内容，可以考虑移除一些不必要的缩进，充分利用手机的屏幕。 10 ¹⁰

同时应该 避免出现横向滚动条 11 ¹¹，因为手机上主要是触摸滑动页面，往下滑动的时候很容易触发横向的滑动，需要来来回回地调整位置，体验很不好。

支持亮色主题和暗黑主题

我个人是比较喜欢亮色主题的，但有的读者可能会更喜欢暗色主题，也可能是因为生理原因，暗色主题会看着更舒适，所以最好可以提供一个选项。 12 ¹²

如果手机或电脑设置的是自动调节系统的明暗主题，一般在夜晚的时候，网站也会自动切换成浏览器默认的暗色主题，只是可能没有自己适配的好看。

增强脚注

脚注一般都在文章的最底部，如果读者想查看，就要在内容之间来回跳转，体验不好。

可以考虑使用 littlefoot，使得可以直接查看脚注，不用来回跳转。

如果屏幕比较大，也可以考虑使用旁注，将脚注展示在文章的旁边，点击都省了。

增加「返回顶部」

博客文章一般会比较长，如果导航栏不是固定在某个地方可以随时访问的，那么可以考虑增加一个「返回顶部」的按钮，让读者可以快速回到顶部进行导航。

返回顶部按钮可以放在文章边上，而不是浏览器的右下角，因为屏幕大的时候，鼠标移动到右下角可能有点远。

返回顶部按钮也可以考虑在文章比较靠后的地方才出现，让读者多阅读足够的内容后再出现，算是一些小心机。

在手机上，由于空间少，返回顶部按钮往往会和内容重叠，因此可以考虑让按钮过一阵时间就隐藏，只有用户滚动的时候才出现。也可以适当设置 透明度。

代码块增强

有的技术文章会嵌入一些代码片段，这些片段有的可能比较长，可以考虑提供一个复制按钮，让读者快速复制代码内容，而不必拖拽选择后再复制。

有的人可能是用语音操作页面的，用语音命令来高亮代码块并复制是极其困难的，因此 提供一个复制按钮会让他们轻松很多。

一些无障碍增强

有的读者可能主要使用键盘浏览网页，会用 tab 去移动，可以考虑添加 Skip Navigation，让读者可以快速跳过导航 13 ¹³，直接跳转到内容部分。

通过调整 :focus-visible 的样式，例如让 outline 更粗更明显，可以让读者更清楚当前焦点的位置。

设置页面的 lang 属性，这样如果有读者用屏幕阅读器来阅读文章时，阅读器可以 识别正确的语言。 14 ¹⁴

考虑添加搜索功能

搜索功能可以让读者快速搜索博客的内容，例如我写了不少 Zine，里面分享不少文章和资源，或许某天有读者 15 ¹⁵会想起在我的博客上看到的什么，有搜索就很方便。

如果你的博客被搜索引擎索引了，可以直接使用搜索引擎的搜索功能。

例如我用 Kagi，我可以提供一个输入框，让用户输入关键字，把关键字拼接成 Kagi 的搜索链接： https://kagi.com/search?q=site%3Ataxodium.ink+keyword ，这样就可以直接利用搜索引擎进行搜索。

你也可以考虑集成一些第三方工具，例如 使用 pagefind 添加博客搜索功能。

提供一个订阅流 RSS/Atom feed

提供一个订阅流方便读者订阅，相比邮件订阅，我会更喜欢 RSS/Atom feed，我可以在一个统一的工具订阅和阅读，取消起来也相当方便，而邮件取消起来感觉稍显麻烦，还容易收到垃圾邮件。

订阅地址应该容易让读者找到，而不是藏在某个地方，甚至需要读者自己猜订阅流的地址。

另外可以考虑 美化你的 RSS/Atom feed ，会比光秃秃的 XML 阅读体验更好。

适当增加过渡效果

例如鼠标 hover 的效果，页面之间切换的效果 16 ¹⁶，页面滚动效果 等。

不过要注意加上 prefers-reduced-motion 检测，当读者希望关闭这些过渡效果时，尊重他的选择。

首页设计

如你所见，博客的首页就是一个 sitemap，罗列了我目前写的所有博客文章。

我将 list-style 设置成了decimal-leading-zero，比黑点要稍微有趣一点，也方便我看看目前写了多少文章。

本来文章后面一般会有一个日期，但因为在手机屏幕上对不齐，我干脆隐藏了，日期好像也不是很重要。

首页很简单，没有分页，一眼看到底，如果读者愿意探索我写的内容，一直滚动找感兴趣的内容就好了。

我觉得博客最重要的就是博客文章，所以我把最重要的部分作为首页 17 ¹⁷。

缓存

我的博客部署在 Netlify，可以通过配置指定一些静态文件的缓存时间。

通过缓存，一方面可以减少 Netlify 上的带宽消耗；另一方面，像是字体、图片这些基本不会变的内容，缓存过后，博客也会加载得更快。

标签分类

标签分类后，读者可以通过标签过滤文章。

这块是我一直很想添加的功能，但目前的博客系统还不太清楚怎么搞。

中文写作规范，我主要参考：

• 中文技术文档的写作规范
• 中文文案排版指北

列举一些我平时会比较注意的：

• 中文和英文、数字、链接之间应该有一个空格
• 标点符号的使用
  • 偏好使用 「」 而不是 “”
  • 破折号我一般会用 ⸺ ，并且前后添加空格
  • 中文省略号应该用 …… 而不是 。。。 或者 ...
  • 避免中英文符号混合，中文里的逗号应该都是 ， 而不是 , ；分号应该是 ； 而不是 ; 。
• 注意专有名词的大小写拼写，例如是 GitHub 而不是 github 、 Github 、 GITHUB 。
• 使用缩写的时候，在第一次提及的时候补充全称
• 注意区分「的」、「地」、「得」
• 图片尽可能使用 figure 对内容进行描述；如果不使用 figure，应该使用 alt 描述 18 ¹⁸。原因是： 1.图片可能加载失败；2.方便使用屏幕阅读器的读者，他们可能看不到图片。
• 引用应该标注来源，我一般会使用 Copy Link To Highlight，这样读者跳转过去的时，可以通过高亮，快速看到我引用的部分。
• 对于一些较长的，不是很重要的内容，可以考虑用 details 进行折叠 19 ¹⁹，用户感兴趣可以自行点开；或者考虑用脚注。
• 一些希望突出的内容，可以考虑用粗体，但有时粗体和其他字体对比不够强烈的时候，可以考虑使用下划线或者增加颜色。
• 链接应该有下划线，而不只是通过颜色和正文区分，考虑一些颜色不敏感的用户，有可能在他们的眼中是区分不出来的。下划线能更好地区分链接和正文，也很符合直觉。
• 我不太喜欢很长的段落，读起来有些费劲，大多数情况下我会遵循 一个句子写一行。

除此之外，应该持续优化和编辑 20 ²⁰已发布的文章，修复一些看到的错别字，坏掉的图片或链接；如果有更好的表达也可以改进一下。

• 一打开网页就弹窗，除非我对内容很感兴趣，或者内容比较有价值，否则这样的网站我多半会直接关闭
• 有的博客内容很丰富，像是一个数字花园，固然很棒，但我会觉得有些迷失方向，甚至有些信息焦虑感
• 明显是 LLM 生成的内容、简单复制的内容、看不出来作者思考、打磨的内容
• 到处都是广告的博客
• 资源太多，加载很慢的博客
• 排版很差、排版像 CSDN 的博客
• 错别字、拼写错误太多
• 太多花里胡哨的元素
• 对比度太高或者不足，要么看得刺眼，要么看不清，都难受
• 响应式支持很差的，在手机上阅读体验很差的

总的来说，我会喜欢那些相对简洁一些的设计。

比较有个性的设计我也喜欢。

好的设计应该注重读者的阅读体验。

设计不是一尘不变的东西，以上是我目前的一些考量，随着接触到东西更多，设计也会持续迭代，你也可以通过 CHANGELOG 看看博客的变化。

我想我早期的文章估计也有不少毛病，以后看到了再慢慢改了。

_​(:3 」∠)_