#108：构建单个代码片段页面

我们首先回顾了一些幕后工作，例如完善了一些需要完成的任务。比如，添加了剩余的 wp_list_pages() 调用以输出每个类别中剩余的代码片段列表。此外，还添加了 CSS 来更改用于区分类别和代码片段列表的分割线的颜色。我们还修改了类别悬停效果，使其颜色变亮而不是使用我们临时添加的笨拙的白色边框。实际上，我们使用了 Sass 中的 lighten() 函数来完成这项工作。

不过，本集视频的重点是为单个代码片段设计视图。如果我最近创建了网站的这个区域，代码片段可能是一个自定义帖子类型（就像单一图库截图一样），但当我开始做这件事的时候，这些类型还不存在。因此，它们只是“页面”，并且都使用自定义页面模板。这并不重要，尤其是在现在，拥有大量页面不再是性能问题的时候。

单个代码片段页面将与博客文章非常相似。标准的 2/3 1/3 网格结构和一个正常的侧边栏。不过也有一些区别。代码片段之间存在明显的层级关系，例如：

首页 » 代码片段 » 代码片段类别 » 代码片段名称

这非常适合这个网站上不断演变的“黑色条”子导航。我们的 Yoast SEO 插件提供了面包屑功能，因此这很简单，只需要调用一个函数即可。

另一个区别是我们输出 the_modified_time() 而不是发布日期。这样一来，人们就知道代码片段最后一次更新的时间，这比发布日期更相关。这也激励我定期重新审视代码片段。

我们还花了一些时间更新了一个旧的代码片段，只是为了好玩。

最后，我们编写了一些 JavaScript 代码，让我们的子类别视图能够正常工作。这些视图本质上看起来与我们的代码片段首页非常相似，只是如果你在 /snippets/javascript/ 页面，JavaScript 代码片段将默认显示，并且 JavaScript 类别会被高亮显示。信不信由你，只有几行隐秘的 URL 窥探 JavaScript 代码，也许本身就应该是一个代码片段。