我的博客设计

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

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

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

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

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

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

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

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

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

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

行间距

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

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

行宽

文本太宽的问题，可以固定内容的宽度，让内容居中。这样在阅读时，基本 不用左右移动眼睛，读起来会比较舒适。至于多宽合适，不要太宽导致眼睛需要移动，不要太窄导致内容过少就好。

字体

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

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

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

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

对比度

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

颜色

一般来说，应该有一个主色，搭配一些和主色相辅相成的辅助色，以及一些中性色。（感兴趣可以看看 The color system）

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

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

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

背景可以考虑设置一个背景图，让博客看起来不那么单调，但也不要太花里胡哨。如果是纯色，则避免纯黑和纯白，可以稍微降低一些对比度，使得看起来柔和一些。

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

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

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

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

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

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

域名

考虑使用一个容易记忆域名，并长期持有它，避免轻易改动已发布的 URL。这样可以确保有人引用了博客的链接后，不会轻易失效。

提供一个订阅流 RSS/Atom feed

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

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

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

提供一个索引页

给读者一个所有文章的索引页（有的博客框架里叫「归档」），让他可以快速查阅你的博客。

优化小屏的阅读体验

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

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

支持亮色主题和暗黑主题

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

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

另见 给博客添加 dark mode。

增强脚注

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

可以考虑使用 littlefoot，使得可以直接查看脚注，不用来回跳转。如果屏幕比较大，也可以考虑使用旁注，将脚注展示在文章的旁边，点击都省了。

另见 关于 "Give footnotes the boot" 的思考。

增加「返回顶部」

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

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

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

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

代码块增强

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

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

一些无障碍增强

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

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

设置页面的 lang 属性，这样如果有读者用屏幕阅读器来阅读文章时，阅读器可以 识别正确的语言。（你甚至可以考虑 给页面添加语音播报功能。）

考虑添加搜索功能

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

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

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

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

适当增加过渡效果

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

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

缓存

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

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

标签分类

标签分类后，读者可以通过标签过滤文章。这块是我一直很想添加的功能，但目前的博客系统还不太清楚怎么搞。

资源优化

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

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

优化打印样式

如果把文章打印成纸质，里面的链接是无法点击的，可以在打印时将其显示出来。有的样式，打印时也是不必要的，可以考虑隐藏。

可以参考 关于页面打印、Printing。

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

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

列举一些我平时会比较注意的（整理并写下来，可以避免自己纠结，保持统一）：

• 中文和英文、数字、链接之间应该有一个空格。
• 标点符号的使用
  • 偏好使用 「」 而不是 “”
  • 破折号我一般会用 ⸺ ，并且前后添加空格
  • 中文省略号应该用 …… 而不是 。。。 或者 ...
  • 避免中英文符号混合，中文里的逗号应该都是 ， 而不是 , ；分号应该是 ； 而不是 ;
  • 并列的内容，只要出现在中文句子中，不管是中文还是英文，都统一使用 、 ；如果是出现在英文句子中，则用 , 。
• 注意专有名词的大小写拼写，例如是 GitHub 而不是 github 、 Github 、 GITHUB 。
• 使用缩写的时候，在第一次提及的时候补充全称。
• 注意区分「的」、「地」、「得」。

• 图片尽可能使用 figure 对内容进行描述；如果不使用 figure，应该使用 alt 描述，原因是： 1.图片可能加载失败；2.方便使用屏幕阅读器的读者，他们可能看不到图片。

  关于 Alt Text，可以看看：

  • Zine#18::Alt Text: Not Always Needed
  • Zine#35::Finding the Joy in Alt Text
• 考虑在 figcaption 中给图片标注序号，如图 1、图 2 等，然后在涉及图片时，用这个序号代指图片。
• 引用应该标注来源，我一般会使用 Copy Link To Highlight，这样读者跳转过去的时，可以通过高亮，快速看到我引用的部分。由于我不少内容是翻译过来的，可能无法转译作者原意，所以我认为指向原文是很重要的。 2 ²
• 引用的时候应该尽可能保留原格式，因为可能是作者刻意组织的。 3 ³
• 对于一些较长的，不是很重要的内容，可以考虑用 details 进行折叠 4 ⁴，用户感兴趣可以自行点开；或者考虑用脚注。
• 一些希望突出的内容，可以考虑用粗体，但有时粗体和其他字体对比不够强烈的时候，可以考虑使用下划线或者增加颜色。
• 链接应该有下划线（参考 Style your underlines），而不只是通过颜色和正文区分，考虑一些颜色不敏感的用户，有可能在他们的眼中是区分不出来的。下划线能更好地区分链接和正文，也很符合直觉。

• 我不太喜欢很长的段落，一大段的读起来有些费劲，我会一定程度控制段落的长度。

  可以参考 一个句子写一行 和 Semantic Line Breaks，会给写作带来一定好处。

  需要注意的事，文章中的「一个句子写一行」不是说 发布时 一个句子一行，而是在写作时。一般博客是用 Markdown 写，然后转换成 HTML，一个句子一行是指在写 Markdown 的时候。

• 分享音视频的时候，考虑添加时长信息。
• 引用链接的时候，我会移除那些跟踪的标记，除非我没留意到；同样的，我的博客也不会跟踪你。
• 书籍、影视、歌曲可以考虑使用 《》 包裹，包裹时 《》 作为链接的一部分，例如 《如何阅读一本书》 (注意符号前后空格）。如果是英文书名等，可以考虑用斜体，例如 How to Read a Book: The Classic Guide to Intelligent Reading 。

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

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

• 隐藏滚动条的博客

  关于滚动条

  手机上有滚动条的话，可以长按滚动条拖动到底部，没有滚动条只能一直往下翻，体验很差。

  滚动条本身也可以作为当前位置的一个提示，而不需要额外显示一个进度百分比。

  如果是在电脑上阅读，除了滚动条，还可以使用 HOME 回到页面顶部，END 去到页面底部。

如果设计得不好，阅读体验或许都不如一个只有文字的 HTML。

/* 自适应用户当前的主题 */
html {
  color-scheme: light dark;
}

/* 设置一个通用的字体、适当的字体大小和行高，避免字体太小和拥挤 */
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

/* 避免图片视频溢出屏幕 */
img,
svg,
video {
  max-width: 100%;
  display: block;
}

/* 设置内容最大宽度并居中，避免一行文字过长，具体的值可能要根据自己喜欢调整一下 */
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

我喜欢相对简洁一些的设计，比较有个性的设计我也喜欢。

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

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

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

_​(:3 」∠)_