令人啧啧称赞的博客微特性

更新于: at 02:44

内容目录

博客微特性

本文探讨现代博客可具备的微特性，在本文中提到的微特性并不表明我在任何时候都会采用，但至少表明我认为它们在某种场景之中是有用的。

对编程语言微特性的探讨，启发 Daniel 讨论博客的微特性。

当 Daniel 将这篇文章动态发布在 HN 后，吸引了很多人讨论后，该主题登上了 HN 热门，被全世界看到。

从我的观察来看，在某种程度上，这些特性会成为实现现代个人网站的“共识”，本文计划先对此话题的讨论进行回顾，然后逐个讨论，其次我会列举我在本博客已实现的部分。

但在开始之前，我想先探讨为什么会有这些创新，如何更好发现这些创新，以及如何评价这些创新。

至于实现这些创新，在我们这个时代，确实变得更容易了。

内容领域的微创新

这些微特性本质上是指在博客功能中进行某种创新，以实现更好的内容消费过程。

这里说消费是广义的，并不一定指支付费用。内容传递价值，而所有获取内容的人至少都支付了时间，所以，增加微特性的意义大概率是为价值服务。

内容创作者，往往也是微特性的主动使用者、创造者和阅读者，创作者们在博客中呈现自己的观点，并希望博客文章更广泛的传播，以让观点更充分地影响世界。

从仅阅读者角度来说，可能是被动使用者，阅读者们消费博客文章，并希望获得更多内容（价值）。

从内容创作者和消费者视角思考，微创新的本质算是一种内容认知效率工具，因此，评价这些创新，应围绕内容创作者、消费者的视角，及以认知科学为基础进行评价。

Daniel列表及进一步探讨

  1. Sidenotes 旁注
  2. Tables of Contents 目录
  3. Showing Page Progress 显示页面进度
  4. Easily Linkable Headings 易于链接的标题
  5. Grouping Series of Posts 对系列帖子进行分组
  6. Dialogues 对话
  7. Code Blocks with Origin 带有起源的代码块
  8. Code Blocks with Clickable Links 带有可点击链接的代码块
  9. Markers for External Links 外部链接标记
  10. Different Markers for Different Destinations 不同目的地有不同标记
  11. Link Preview 链接预览
  12. RSS Feeds RSS 源
  13. Links to Other Sites 其他网站的链接

本站已实现其中 10 个特性，下面我将详细讨论它们。

Sidenotes 旁注

Sidenotes，旁注，即在正文旁边呈现的注释。它的使用场景是，当你想对正文中某个点加以说明，而又不想采用正文括号来表达时（正文括号是旁注的一种比较常见的退化形式），就可以采用这种在正文旁边展示一句补充，它是实体书 margin 的批注的模拟。因此，我更愿意称之为 margin notes。而 margin notes 和 footnotes 的差别是明显的，后者更可能引出一个引用出处、一段值得延申阅读的文本素材，或另外一个不相关但也重要的主题。而旁注就是一种一闪而过的火花，为让内容更连续且完备的呈现。

我在给 Astro Paper 增加 margin note 特性一文实现了它。

Tables of Contents 目录

Tables of Contents 对于一两屏可以完整展示的短文来说，并非必要特性，作为内容框架 Astro 天然支持。

遗憾的有两点：

  1. Astro 的实现需要文章撰写者维护目录内容一节和文章实际目录之间的统一性。
  2. 且内容展示区域并不像 Hugo 某些主题和 docusaurus 中的实现，它并没有始终固定在视觉范围内。

Showing Page Progress 显示页面进度

本条建议是上述 TOC 的锦上添花，呈现目录所在的章节位置，让阅读过程更加清晰，这一点实现前提是实现固定位置显示目录。

Easily Linkable Headings 易于链接的标题

作为现代内容框架的 Astro 内置支持。

Grouping Series of Posts 对系列帖子进行分组

我理解的是一个手工整理的专题，比如本文本站已实现部分的总结一节

Dialogues 对话

由于现在非常多的播客节目，以及 Discord、Slack 等应用，当你打算在博客整体引用它们时，如果你的博客支持 Dialogues 呈现，则会更加生动地还原。

另外，实现可转发的 Dialogues 也是一种 Meme。#TODO in 时间旅行

Code Blocks with Origin 带有起源的代码块

实现这一点，可以在代码块内部使用注释，或者代码块之前加入一个链接来实现。

  1. 需要将代码片段放在某个源码管理系统
  2. 该源码管理系统需支持在线引用。

这点对于大多数博客主来说都是棘手的，甚至对于大部分程序员都难以实现。一个可替代方案是跳转到已实现该特性的系统中浏览代码。

可以区分内部和外部跳转，这个特性带来的好处，我理解为内容信度。阅览者熟悉网站A及创作者，但对于外部跳转，对于其内容的信度是未知的。

当标识了外部链接，相当于树立了一块信息地图的边界牌，“请注意，您已准备跃迁到新的宇宙。”

Different Markers for Different Destinations 不同目的地有不同标记

对于不同网站的链接加上唯一的标识符，这点我并没有很强的感知。

链接预览，对于已实现 TOC 特性的内部内容来说非常容易实现，但外部内容就不容易，因为要获取到外部内容的标题，然后进行展示，存在跨域问题，会依赖服务端或 API。

RSS Feeds RSS 源

RSS 是大多数内容系统的默认配置，但支持分类 RSS，或关键词 RSS 的则非常少。

一个健康的博客——有系统的输入和输出——会应尽可能多的相互引用。

本站已实现部分的总结

  1. Sidenotes 旁注：给 Astro Paper 增加 margin note 特性
  2. Tables of Contents 目录：给 Astro 增加 TOC 功能
  3. Showing Page Progress 显示页面进度：Astro Paper 内置
  4. Easily Linkable Headings 易于链接的标题：Astro 内置
  5. Grouping Series of Posts 对系列帖子进行分组：手工整理
  6. Dialogues 对话：给 Astro 增加对话功能
  7. Code Blocks with Origin 带有起源的代码块：手工添加
  8. Code Blocks with Clickable Links 带有可点击链接的代码块：跳转 GitHub
  9. Markers for External Links 外部链接标记：CSS 实现
  10. Different Markers for Different Destinations 不同目的地有不同标记：无实现计划
  11. Link Preview 链接预览：计划实现后更新
  12. RSS Feeds RSS 源：Astro 内置
  13. Links to Other Sites 其他网站的链接：手工添加

从 HN 帖子中摘录的部分

截至 2024 年 8 月 21 日的摘录，这个帖子反复阅读会有非常多的收获，我会在此持续更新。

其中比如，关于人们对于网站滚动条和浏览习惯的思考，有有相当一部分人反对增加或减少原生滚动条，值得C端产品人仔细思考。

  1. 每个页面具有 og 元数据：不了解的人可以搜索 og
  2. 主要内容须以纯 HTML 形式访问：可能是希望内容程序友好，但这完全取决于作者的分享偏好和态度。
  3. 使用排版和分割元素表达结构：这点我只是有一点同意，不过我并不认为内容结构需要有所限制。
  4. 自定义导航、专题：自定义导航代表作者对于内容的思考，专题是一种比Tag更显示的内容组织方式，值得推荐。
  5. 嵌入内容的描述：嵌入内容的描述，比如图片的描述，视频的描述，音频的描述，等等，对于内容理解很有帮助。
  6. 对上下文提供额外的信息：我感觉这点就很适合用我实现的 margin note 实现。
  7. 脚注（带有返回引用文本的链接）：脚注的增强我已实现 给 Astro 增加脚注跳回时的引用位置提示 。
  8. 带摘要的索引页（主要博客索引和每个标签的索引）：这对忙碌的读者友好，有助于提前判断文章是否值得阅读。
  9. 当扩展名从“.html”更改为“.txt”时，提供一个纯文本形式，可以方便读者将整个帖子复制/粘贴到电子邮件或 Reddit 提交：我感觉切换扩展名只有高级用户理解，但它提供了一种灵感，可以埋入一种转化内容格式的彩蛋，而功能本身，可以以按钮的形式提供。
  10. 每篇文章都提供一个“查看源代码”链接
  11. 客户端全文搜索：这个功能比较依赖现代浏览器，或者网络带宽（以 js 实现时）。
  12. CSV 导出。除了 RSS 之外，您还可以将我的网站下载为 CSV (https://breckyunits.com/posts.csv)
  13. 键盘导航。例如，使用左/右箭头键浏览我网站上的页面。
  14. 有用的 404：如果您输入错误的网址，404 页面会将其与工作网址进行比较，并显示最接近的匹配项。全部使用客户端 JS 完成（不需要 Web 服务器）。例如： https://breckyunits.com/pcr.html
  15. 下载整个网站并离线阅读。一切都设计为在本地正常工作，您可以将整个内容下载为 zip 文件。
  16. 可打印。一切都经过精心设计，印刷得看起来不错。当您进行打印时，导航元素会通过 CSS 隐藏。
  17. 底部生成 PDF。
  18. 按需显示的脚注。当您阅读时，在屏幕底部优雅地显示最相关的引文，参见：https://redsails.org/really-existing-fascism/
  19. 使用系统、亮、暗 UI：Astro Paper 已支持，遵循系统设置。
  20. 每篇文章（带有描述、作者信息、发布日期等）都按时间顺序显示在主页上，没有分页，非常适合 Ctrl-F。
  21. 提供作者精选。
  22. 移动友好：整个网站非常快速且轻量级，以文本为中心，没有多余的 JavaScript 或 CSS，良好的排版，在移动设备上运行良好等。
  23. 单击链接时闪烁/突出显示片段，添加一些填充以确保标头没有覆盖片段的一部分：前者本网站已实现，后者看起来像一个 Bug，需要被修复，即锚链需要考虑固定头部的高度，我已在 时间旅行 中实现。
  24. 内联 css、js 和 svgs，以便可以将其保存为单个 html 文件。
  25. 侧边栏目录突出显示当前部分：Hugo 很多模板中有实现。
  26. 在 popup 中打开的术语表链接。
  27. 从 tl;​​dr 开始：可以留住没有高效阅读的读者。
  28. 在内容由计算器取代。这是您计算税款的方法，这是一个可以为您完成计算的计算器小部件。
  29. 桌面上更大、更易读的字体；移动设备上的页边距较窄，以获得更长的行。
  30. 索引页面不分页，以便您可以一次查看所有页面。
  31. uses 页面，创建者列出他们使用的工具和他们拥有的设置。
  32. 数字花园的非时间索引页：我喜欢逐渐改进的内容，以及最好的部分。

欢迎引用或留言，并从内容认知或其它有建设性角度进行讨论。

参考