在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
- 以下为我的代码，请注意第一行的引用代码。引用的样式代码为上面的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'); ?>
这里是评论样式的测试#1
这里是评论样式的测试#2
酷