在 RSS 阅读器中有效的脚注

Feedbin 是我目前使用的 RSS 阅读器。 前几天我在阅读 Harry 的博客文章 时，注意到 Feedbin 中有一个很酷的小交互式触控。 那里有一个看起来像按钮的元素，上面写着数字 1，结果发现它是一个脚注。 我将鼠标悬停在上面，它就显示出了笔记。

博客文章本身的脚注 HTML 代码如下所示

<p>...they’d managed to place 27.9MB of images onto the Critical Path. 
Almost 30MB of previously non-render blocking assets had just been 
turned into blocking ones on purpose with no escape hatch. Start 
render time was as high as 27.1s over a cable connection<sup id="fnref:1">
<a href="#fn:1" class="footnote">1</a></sup>.</p>

只是一个指向 #fn:1 的锚链接，而 <sup> 使它看起来像一个脚注链接。 这是默认情况下样式的外观

博客文章底部脚注列表的 HTML 代码如下所示

<div class="footnotes">
  <ol>
    <li id="fn:1">
     <p>5Mb up, 1Mb down, 28ms RTT.&nbsp;<a href="#fnref:1" class="reversefootnote">&#x21a9;</a></p>
    </li>
  </ol>
</div>

作为一个小小的旁注，我注意到 Harry 正在使用 scroll-behavior 来平滑滚动。 他还在其中添加了一些不错的 :target 样式。

总而言之，我们有

1. 一个向下阅读笔记的链接
2. 一个弹回的链接

那里没有什么特别的。 没有花哨的库或任何东西。 只是语义 HTML。 它应该可以在任何 RSS 阅读器中工作，假设他们不会乱动哈希链接，并保持元素上已编写的 ID。

Feedbin 能够识别这种标记模式，并决定进行额外的 UI 样式和花哨的交互。 通过检查正在发生的事情，看起来它们隐藏了原始内容，并用自己的特殊内容替换了它们

啊哈！ 发现了 Bigfoot！ 它就在他们的源代码中 这里。

这意味着他们在加载文章时触发 Bigfoot，它会完成这项工作。 就像这样

查看 CodePen 上的
Bigfoot Footnotes，作者是 Chris Coyier (@chriscoyier)
在 CodePen 上。

也就是说，它是基于一个已经可用的基础。 我将用相同的标记模式结束这篇内容，并尝试在不同的 RSS 阅读器中查看它们的表现。 如果您选择的 RSS 阅读器有任何反应，请随时在评论中报告它在您选择的 RSS 阅读器中的表现。

---

Azul 是一款抽象棋盘游戏，由 Michael Kiesling 设计，并由 Plan B Games 于 2017 年发布¹。 两到四名玩家收集瓷砖，以填满 5×5 的玩家棋盘。 玩家通过从库中取走一种颜色的所有瓷砖，并将它们排成一行来收集瓷砖，轮流进行，直到本轮的所有瓷砖都被取走。 到那时，每行填满的瓷砖中的一块瓷砖将移到每位玩家的 5×5 棋盘上，而行中剩余的瓷砖将被丢弃。 每块瓷砖的得分基于它放置在棋盘上其他瓷砖的位置。 轮次持续进行，直到至少一名玩家在他们的 5×5 棋盘上形成一行瓷砖。