#111：构建评论线程

评论的设计可能看起来非常简单。确实如此！但我认为在这种情况下，简单有效。评论是 CSS-Tricks 中非常重要的部分，我希望它们非常易读且舒适。

现在，我们将跳转到 WordPress 并使这个评论线程成为现实。我们首先要做的是找到一个我们将显示评论的模板。single.php 可能是最重要的（单个博客文章）。我们发现在这个模板中，函数 comments_template() 是我们用来获取整个评论区域所需调用的所有内容。本质上，该函数的作用是获取文件 comments.php 并将其放在那里。因此，我们开始查看该文件。

该文件中的代码以 <section id="comments"> 开头。这非常合适。评论当然是一个部分，它应该有一个标识符。请记住，我们不会根据 ID 进行任何样式设置，但将评论包装在 ID 为 comments 的元素中是很好的，因为

1. 您可以始终通过将 #comments 附加到 URL 来链接到评论。
2. 讨厌评论的人可以通过可猜测的 ID 在他们的用户样式表中隐藏它们。

我们继续浏览此文件中的代码。我们删除了一些我们确定不会使用的东西。我们更改了一些内容以匹配我们在 Photoshop 中设计的内容。

然后我们遇到函数 wp_list_comments()，该函数负责输出整个评论线程。然后它继续输出诸如评论表单之类的内容。同时，逻辑到位以在不同情况下显示内容，例如评论关闭时或评论打开但没有评论时。

我们发现一个名为 cancel_comment_reply_link() 的奇怪函数，我们查看它并发现它处理了在点击“回复”链接并表单向上移动的情况下将表单移回底部的功能，但我们不希望它这样做。

然后我们深入研究从 wp_list_comments() 获得的 HTML。在不进行任何操作的情况下，我们将从此函数获得完全合理的 HTML。但是，它就是它，并且不会适合所有可能的 ​​设计。就个人而言，我更喜欢完全控制标记。因此，我们不是仅仅接受它提供的内容，而是通过在我们的 functions.php 文件中使用自定义函数来控制它，该函数覆盖默认标记。

现在我们有了 HTML 控制权，我们可以进入某种“设计模式”，在 CSS 和 HTML 之间来回切换以完成我们的设计。评论 CSS，就像此项目中的任何其他小型模块化 CSS 一样，我们将委托给一个 _comments.scss 文件，我们可以将其包含在全局中。将 CSS 分离到它自己的文件中是一个完美的案例。尽管如此，我们应该尽可能多地使用全局样式。例如，每个评论当然都是一个 .module，名称的标题样式应该在这里完美地适用，而一般的排版应该直接来自全局排版样式。

我们甚至在评论中使用我们的网格系统，因为每个评论本质上都是一个两列网格。其他小东西完全是评论的自定义，例如我们在哪里以及如何放置回复链接。

在屏幕录像的最后，我们发现我们的 Photoshop 设计存在一个致命缺陷。嵌套评论位于父评论内，并且很难使我们的嵌套模块看起来像是分开的。我们可能需要在这里做出一些妥协。