在final中添加评论

一，创建文件

下面的文件均创建在主题文件夹中。

1. 创建样式代码 comments.css （你可以把下面的内容放到style.css中）

    .comment-container form{
        border: 0px;
        padding: 20px;
        border-radius: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: #f0f0f0;
    }

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    #comments {
        list-style-type: none;
        padding: 0;
    }

    .comment-body {
        padding: 15px 20px;
        list-style-type: none!important;
        border-radius: 10px;
        margin: 2.5rem 0px;
        background-color: #f0f0f0;
    }

    .comment-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .avatar {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
        margin-right: 10px;
    }

    .comment-author {
        font-weight: bold;
        color: #333;
    }

    .comment-by-author {
        color: #007bff;
    }

    .comment-by-user {
        color: #28a745;
    }

    .comment-content {
        background-color: #f0f0f0;
        border-radius: 10px;
        padding: 5px 20px;
        background-color: #fefefe;
        margin-bottom: 10px;
    }

    .comment-meta {
        font-size: 0.8em;
        color: #888;
    }

    .comment-reply {
        cursor: pointer;
        color: #007bff;
    }
    .comment-reply:hover {
        text-decoration: underline;
    }

    .comment-child {
        margin-left: 30px;
    }

    .comment-list{
        padding: 0px;
        margin: 20px 0px 0px 0px;
        font-size: 0.9rem;
    }

    .form-control {
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        border: 0px;
        background-color: #fefefe;
        box-sizing: border-box;
    }

    .submit {
      color: #090909;
      padding: 0.7em 1.7em;
      font-size: 18px;
      border-radius: 0.5em;
      width: 100%;
      background: #ffffff;
      cursor: pointer;
      border: 0;
    }

    .response {
        color: #888;
    }

    .lists-navigator {
        text-align: center;
        margin-top: 20px;
    }

    textarea {
        height: 10rem; 
        resize: none; 
        outline: none; 
    }

    form input,form textarea{
        font-family: 'Noto Sans SC',consolas,monospace;
        font-size: 0.8rem;
        border-radius: 10px;
        background: #ffffff;
    }

创建 comments.php

1. 以下为我的代码，请注意第一行的引用代码。引用的样式代码为上面的CSS样式.

如果你已经放置到style.css中，你可以删除下面代码的第一行代码。

如果你已经创建css文件，直接复制下面的内容即可。

    <link rel="stylesheet" href="/usr/themes/final/comments.css">
    <hr>
    <h3>评论</h3>
    <?php
    function threadedComments($comments, $options) {
        $commentClass = '';
        if ($comments->authorId) {
            if ($comments->authorId == $comments->ownerId) {
                $commentClass .= ' comment-by-author';
            } else {
                $commentClass .= ' comment-by-user';
            }
        }

        $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
        $depth = $comments->levels +1;

        if ($comments->url) {
            $author = '<a href="' . $comments->url . '"target="_blank"' . ' rel="external nofollow">' . $comments->author . '</a>';
        } else {
            $author = $comments->author;
        }
    ?>

    <li id="li-<?php $comments->theId(); ?>" class="comment-body<?php
    if ($depth > 1 && $depth < 3) {
        echo ' comment-child ';
        $comments->levelsAlt('comment-level-odd', ' comment-level-even');
    }
    else if( $depth > 2){
        echo ' comment-child2';
        $comments->levelsAlt(' comment-level-odd', ' comment-level-even');
    }
    else {
        echo ' comment-parent';
    }
    $comments->alt(' comment-odd', ' comment-even');
    ?>">
        <div id="<?php $comments->theId(); ?>">
            <?php
                $host = 'https://gravatar.loli.net';
                $url = '/avatar/';
                $size = '80';
                $default = 'mm';
                $rating = Helper::options()->commentsAvatarRating;
                $hash = md5(strtolower($comments->mail));
                $avatar = $host . $url . $hash . '?s=' . $size . '&r=' . $rating . '&d=' . $default;
            ?>
            <div class="comment-view" onclick="">
                <div class="comment-header">
                    ![](<?php echo $avatar ?)" width="<?php echo $size ?>" height="<?php echo $size ?>" />
                    <div style="display: grid;">
                        <span class="comment-author<?php echo $commentClass; ?>"><?php echo $author; ?></span>
                        <time class="comment-time"><?php $comments->date('Y-M-j'); ?></time>
                    </div>
                </div>
                <div class="comment-content"> <?php $comments->content(); ?></p>
                </div>
                <div class="comment-meta">
                    <span class="comment-reply" data-no-instant><?php $comments->reply('Reply'); ?></span>
                </div>
            </div>
        </div>
        <?php if ($comments->children) { ?>
            <div class="comment-children">
                <?php $comments->threadedComments($options); ?>
            </div>
        <?php } ?>
    </li>
    <?php } ?>

    <div id="<?php $this->respondId(); ?>" class="comment-container">
        <div id="comments" class="clearfix">
            <?php $this->comments()->to($comments); ?>
            <?php if($this->allow('comment')): ?>
            <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" class="comment-form" role="form" onsubmit ="getElementById('misubmit').disabled=true;return true;">
                <?php if(!$this->user->hasLogin()): ?>
                <div style="display: flex; gap: 10px;">

                <input type="text" name="author" maxlength="12" id="author" class="form-control input-control clearfix" placeholder="您的称谓(可选)" value="" required>

                <input type="url" name="url" id="url" class="form-control input-control clearfix" placeholder="站点地址(可选)" value="" <?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>>

                <input type="email" name="mail" id="mail" class="form-control input-control clearfix" placeholder="邮箱(可选)" value="" <?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?>>

                </div>

                <?php endif; ?>

                <textarea name="text" id="textarea" class="form-control" placeholder="地址：https://banzhuanriji.com/
    标题/称呼：搬砖日记
    副标题/自我介绍：我的生活记录
    icon/头像：https://banzhuanriji.com/img/icon.svg （可选）" required ><?php $this->remember('text',false); ?></textarea>

                <button type="submit" class="submit" id="misubmit">提交你的友链/评论</button>
                <?php $security = $this->widget('Widget_Security'); ?>
                <input type="hidden" name="_" value="<?php echo $security->getToken($this->request->getReferer())?>">
            </form>
            <?php else : ?>
                <span class="response">评论区暂时被关闭了</span>
            <?php endif; ?>

            <?php if ($comments->have()): ?>

            <?php $comments->listComments(); ?>

            <div class="lists-navigator clearfix">
                <?php $comments->pageNav('←','→','2','...'); ?>
            </div>

            <?php endif; ?>
        </div>
    </div>

二，使用

在你需要的地方添加 <?php $this->need('comments.php'); ?>