分层评论系统

Question

我正在进行前端设计，并且正在与几个后端程序员合作 - 这个过程对我来说很陌生。

我们正在尝试建立一个完整的评论系统，并提供回复层次结构。我认为设置不同级别的最简单方法是使用第n个子列表和嵌套列表，但我无法完全理解如何做到这一点。想法？

Answer 1

正如伊恩所说，n-child只能同时在一个层面上工作。如果您希望更好地了解n-child，请参考以下资源：

• http://reference.sitepoint.com/css/pseudoclass-nthchild
• http://css-tricks.com/how-nth-child-works/
• http://www.impressivewebs.com/css3-pseudo-class-expressions/
• http://lea.verou.me/demos/nth.html - 这个很棒，因为它是 交互式

在任何情况下，这都是你可能想要考虑的事情：在分层评论的情况下可能令人讨厌的一件事是，从某个层面来看，它们可以变得如此狭窄，看起来很糟糕，甚至会使阅读有点困难。这就是为什么我赞成限制级别的数量 - 上面提到的disqus提供了限制嵌套级别数量的选项。

如果您的级别数量有限，我们可以说三个或五个，您可以为每个级别（top-level，second-level，third-level添加类别，并以不同方式设置它们。您拥有的另一个选项，并且这个选项不依赖于限制级别数，而是通过在生成HTML时添加一些odd-level / even-level类来区分奇数和偶数级别。

基本上，你会有这样的事情：

<ul class="comments">
    <li class="comment first-level">
        <div class="comment-data">[date, time, comment author, link]</div>
        <div class="comment-body">[whatever is said in the comment]</div>
        <div class="comment-footer">[reply option, show/hide comment thread option]</div>
        <ul class="comment-thread">
            <li class="comment second-level">
                <div class="comment-data">[date, time, comment author, link]</div>
                <div class="comment-body">[whatever is said in the comment]</div>
                <div class="comment-footer">[reply option, show/hide comment thread option]</div>
                <ul class="comment-thread">
                    [... and so on...]
                </ul>
            </li>
        </ul>
    </li>
</ul>

如果我想的更好，您可以添加level-1，level-2等类，无论您有多少级别。