#123:构建视频档案,第二部分(导航)

我们刚刚完成了这个重新设计的一个激动人心的部分,我们能够丢弃视频档案页面中一大堆糟糕的标记,并用新的、智能的、干净的、自动生成的标记替换它。但我们还需要在这些档案页面上做更多工作。因为档案将被自动生成到组中,我们需要导航(实际上是分页)来访问较旧的屏幕截图组。

过去,由于我们手动编写所有标记,因此我们可以将该分页作为页面的静态部分。我通常不介意这一点,但这现在根本不可能了。现在,当我们发布新的屏幕截图时,它会将一个屏幕截图从第一页的末尾推到第二页。因此,在静态代码中说类似“#115 – #95”的内容只会在一小段时间内准确。

首先,我们使用在其他地方(例如在单个代码片段页面上)使用的一些黑色导航栏类来使样式正确。

然后我们开始使分页真正工作。在 WordPress 中,您可以向 URL 添加类似“/page/2”的内容,它仍然会呈现之前呈现的相同页面,只是它会让您访问一个名为 $paged 的全局变量,该变量将设置为“2”。我们可以在查询中使用该数字来调整我们显示的视频。但是,与其这样做,WordPress 有一种更智能的方法来处理它,那就是将 'paged' => $paged 添加到查询中。这解决了当我们尝试自己处理偏移量时发生的一些奇怪的数学运算。

我们调整静态导航中的 URL 以反映这些新的分页样式链接。现在的问题是链接中的数字不再准确。我们首先尝试一些简单的东西,比如“5、4、3、2、1”。但这感觉有点乏味和无聊,而且也很混乱,因为这些数字与实际的分页数字不匹配。

我们发现了一些视频的奇怪排序,这有点令人担忧。我们调整了查询中它排序的方式,但仍然存在一些问题。最终,我们决定必须按日期排序它们,并且在网站上线后必须对屏幕截图的发布日期进行一些调整。繁琐的工作,但对长期有利。

最终(我认为是在视频之外),我们最终使用了希腊风格的分页(Alpha、Beta、Gamma),它在其任意性中起作用(有点像我们对媒体查询的任意三只熊命名)。也就是说,“Zeta”听起来比较晚,而且颜色更深,因此“更旧”的隐喻就完整了。