博客和个人网站中我喜爱的微特性

主要观点:作者受 Hillel Wayne 文章启发,分享自己博客中一些可提升用户体验的“微特性”,包括旁注、目录、可轻松链接的标题、系列文章分组、对话、带来源的代码块、外部链接标记、链接预览、RSS 订阅、指向其他站点的链接等,并介绍了各特性的实现方式和示例,还提到这些特性并非适用于所有博客,最后鼓励读者将其应用到自己的网站中。

关键信息:

  • 旁注:可在不打断主文章流的情况下提供额外信息或引用,如 Gwern 的写作大量使用旁注,其关于脑积水的页面有旁注示例,作者受其启发在 Hugo 中实现了旁注功能。
  • 目录:能让读者一眼看到文章内容结构,方便导航到感兴趣的部分,静态网站生成器可自动生成目录,如 Hugo 的TableOfContents,一些经常浏览的网站有目录展示,如 Faster than Lime 和 Lars Hupel 的网站。
  • 可轻松链接的标题:通过 HTML 的 ID 机制可将页面特定部分链接给朋友,简单方法是将想链接的元素直接设为链接,或在标题旁添加可点击链接,很多网站技术已提供相关工具,但仍有页面虽有 ID 却无可点击链接。
  • 系列文章分组:将长篇内容拆分为系列文章,可手动插入链接,也可配置网站自动添加“下一篇”“上一篇”按钮和系列概述导航,如 Chapel 语言博客和 Lars Hupel 的网站。
  • 对话:在技术写作中使用对话可从新手角度提问,表达读者可能的担忧,改变语气使页面更有趣,如在 Faster than Lime 和 Xe Iaso 的网站上看到。
  • 带来源的代码块:读者反馈作者在写编译器相关内容时代码块易让人迷失,作者添加装饰器标明代码来源和展示行,Crafting Interpreters 在线书也有类似做法,GitHub Gists 可帮助近似此功能。
  • 外部链接标记:一些网站用图标标记指向不同域名的链接,有些网站还会让此类链接在新标签页打开,Gwern 的网站进一步根据目的地更改图标,还展示链接预览。
  • 链接预览:将鼠标悬停在链接上时显示该页面的预览窗口,如 Gwern 的网站,起初可能会让人惊讶,习惯后可快速了解链接内容。
  • RSS 订阅:允许网站发布更新,用户通过 feed 阅读器自动聚合更新,作者展示了自己在 Feedbin 中的订阅列表。
  • 指向其他站点的链接:如 Drew DeVault 的博客底部有“我阅读的博客文章”部分,通过openring基于 RSS feeds 展示其他内容创作者的作品。

重要细节:

  • 文中多处提到各种网站的具体示例和截图,如 Gwern 网站的不同页面、Faster than Lime 的文章目录、Hugo 的文档等,以直观展示各特性的应用。
  • 对于一些复杂的特性,如 Agda 生成的可链接代码块、Gwern 的链接处理代码等,提供了相关链接或说明,但部分代码链接可能已过时,需参考其他文档。
  • 强调这些微特性并非适用于所有类型的内容和写作风格,应根据实际情况选择应用。
阅读 17
0 条评论