标签 主题 下的文章

一，创建文件

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

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">
                <img class="avatar" src="<?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'); ?>