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

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

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

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

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

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

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

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

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

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

行间距

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

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

行宽

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

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

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

字体

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

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

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

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

对比度

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

颜色

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

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

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

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

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

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

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

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

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

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

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

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

优化小屏的阅读体验

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

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

支持亮色主题和暗黑主题

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

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

增强脚注

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

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

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

增加「返回顶部」

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

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

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

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

代码块增强

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

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

一些无障碍增强

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

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

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

考虑添加搜索功能

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

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

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

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

提供一个订阅流 RSS/Atom feed

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

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

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

适当增加过渡效果

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

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

首页设计

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

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

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

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

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

缓存

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

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

标签分类

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

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

资源优化

减少不必要的第三方 JS 依赖，使用第三方意味着你要信任第三方，相信他不会干坏事，依赖得越多，风险就越高。

压缩图片等资源的大小，减少带宽占用。

不过我比较懒，有时图片并没有处理，主要是目前的操作比较手动，后面想办法搞成自动的。