Typecho通用评论组件包含Css样式

泽泽社长 2023年10月01日编辑

一直以来我都不太喜欢写Typecho评论列表样式，那时候多说还没有死，就想着有没有大佬直接写好一套Typecho评论列表简单样式，然后别人就可以改改css和html结构就能diy自己的样式，不用考虑php啥的，于是乎昨天简单弄了下。

【202401：调整了下css，修复了下翻页按钮翻页后不跳转评论区的问题】

追加函数

在functions.php中加入如下两个函数，第一个函数是强制设置一些参数，其中楼层限制可根据需求改成自己需要的数量，第二个函数是评论@上级评论的功能。

function themeInit($archive)
{
// 强制用户文章最新评论显示在文章首页
 Helper::options()->commentsPageDisplay = 'first';
// 将较新的评论显示在前面
 Helper::options()->commentsOrder= 'DESC';
// 突破评论回复楼层限制
 Helper::options()->commentsMaxNestingLevels = 999;
}
function get_comment_at($coid)
{//评论@函数
    $db   = Typecho_Db::get();
    $prow = $db->fetchRow($db->select('parent')->from('table.comments')
                                 ->where('coid = ?', $coid));
    $parent = $prow['parent'];
    if (!empty($parent)) {
        $arow = $db->fetchRow($db->select('author')->from('table.comments')
                                     ->where('coid = ? AND status = ?', $parent, 'approved'));
if(!empty($arow['author'])){ $author = $arow['author'];
        $href   = '<a href="#comment-' . $parent . '">@' . $author . '</a> ';
        return $href;
}else { return '';}
    } else {
        return '';
    }
}

css样式

评论css样式代码如下

/*通用评论组件样式草案*/
#comments a {
    color: #3F51B5;
}
#comments li, #comments ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
#comments .comment-pagegroup {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
#comments a.content-page {
    color: #fff;
    background: #3F51B5;
    padding: 5px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 100ms;
}
#comments a.content-page:hover {
    background: #000;
}
#comments .content-page svg {
    width: 20px;
    height: 20px;
    display: block;
    vertical-align: middle;
}
#comments img.avatar {
    float: left;
    margin-right: 10px;
    border: 2px solid #e6e6e6;
    border-radius: 5px;
}
.comment-list .comment-col {
    padding: 10px;
    margin: 10px 0;
    border-bottom: 1px solid #dfdfdf;
    background: rgba(222,222,222,.3);
    border-radius: 8px;
}
.comment-author cite {
    font-weight: bold;
    font-style: normal;
}
#comments .comment-meta a {
    color: #999;
    font-size: .92857em;
}
#comments .comment-reply{
    float: right;
    font-weight: bold;
}
#comments .cancel-comment-reply button, #comments .comment-reply button {
    color: #3F51B5;
    font-size: small;
}
#comments input,.protected input{
    z-index: 10;
    padding: 5px;
    border-radius: 5px;
    border: 0;
    -webkit-box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
    box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
}
#comments p {
    margin-bottom: 8px;
}
#comments label {
    color: #3F51B5;
    font-size: small;
}
#comments .submit {
    background: #2196F3;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    float: right;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 100ms;
}
#comments .submit:hover {
    background: #3F51B5;
}
/*【添加评论】文字样式*/
#comments #response {
    font-size: 18px;
    font-weight: bold;
}
#comments .comment-body #response {
    display: none;
}
/*【评论框】文字样式*/
#comments #textarea {
    display: block;
    border: 1px solid #c2c2c2;
    width: 100%;
    border-radius: 5px;
    padding: 4px 8px;
    min-height: 100px;
}
@media (min-width: 768px){
#comments .inputgrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
}
#comments input {
    display: block;
    border: 1px solid #c2c2c2;
    width: 100%;
    border-radius: 5px;
    padding: 4px 8px;
}
/*二级评论缩进*/
.comment-children {
    margin-left: 25px;
}
.comment-children .comment-children {
    margin-left: 0;
}
.comment-clear{
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}

评论组件

在comments.php文件中填入如下代码，然后在文章页面中引用这个文件即可

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; 
//如果你想使用其他评论头像插件，请注释下面这行代码！
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cravatar.cn/avatar/');
?>
<?php function threadedComments($comments, $options){
 $commentClass = '';
        if ($comments->authorId) {
            if ($comments->authorId == $comments->ownerId) {
                $commentClass .= ' comment-by-author';
            } else {
                $commentClass .= ' comment-by-user';
            }
        }

   if ($comments->url) {
        $author = '<a href="' . $comments->url . '" target="_blank" rel="external nofollow">' . $comments->author . '</a>';
    } else {
        $author = $comments->author;
    }
        ?>
        <li itemscope itemtype="http://schema.org/UserComments" class="comment-body<?php
        if ($comments->levels > 0) {
            echo ' comment-child';
            $comments->levelsAlt(' comment-level-odd', ' comment-level-even');
        } else {
            echo ' comment-parent';
        }
        $comments->alt(' comment-odd', ' comment-even');
        echo $commentClass;
        ?>">
            <div class="comment-col" id="<?php $comments->theId(); ?>">
            <div class="comment-author" itemprop="creator" itemscope itemtype="http://schema.org/Person">
                <span
                    itemprop="image">
                    <?php $comments->gravatar(50); ?>
                </span>
                <cite class="fn" itemprop="name"><?php echo $author; ?></cite>
                <div class="comment-reply">
                <button onclick="return TypechoComment.reply('comment-<?php $comments->coid(); ?>', <?php $comments->coid(); ?>);">回复</button>
                </div>
            </div>
            <div class="comment-meta">
                <a href="<?php $comments->permalink(); ?>">
                    <time itemprop="commentTime"
                          datetime="<?php $comments->date('c'); ?>">
                          <?php $comments->date('Y年m月d日'); ?></time>
                </a>
                <?php if ('waiting' == $comments->status) { ?>
                    <em class="comment-awaiting-moderation">您的评论正等待审核!</em>
                <?php } ?>
            </div>
            <div class="comment-content" itemprop="commentText">
<?php
    $content = preg_replace('/<p>(.*)/', '<p>'.get_comment_at($comments->coid).'$1', $comments->content);
    echo $content;
?>
            </div>
            </div>
            <?php if ($comments->children) { ?>
                <div class="comment-children" itemprop="discusses">
                    <?php $comments->threadedComments(); ?>
                </div>
            <?php } ?>
        </li>
        <?php
    }
?>

<div id="comments" data-no-instant>
    <?php $this->comments()->to($comments); ?>

    <?php if ($this->allow('comment')): ?>
        <div id="<?php $this->respondId(); ?>" class="respond">
            <div class="cancel-comment-reply">
                <button id="cancel-comment-reply-link" style="display:none" data-no-instant onclick="return TypechoComment.cancelReply();">取消回复</button>
            </div>

            <h3 id="response"><?php _e('添加新评论'); ?></h3>
            <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
                <?php if ($this->user->hasLogin()): ?>
                    <p><?php _e('登录身份: '); ?><a
                            href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>. <a
                            href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> &raquo;</a>
                    </p>
                <?php else: ?>
                <div class="inputgrap">
                    <p>
                        <label for="author" class="required"><?php _e('称呼'); ?></label>
                        <input type="text" name="author" id="author" class="text"
                               value="<?php $this->remember('author'); ?>" required/>
                    </p>
                    <p>
                        <label
                            for="mail"<?php if ($this->options->commentsRequireMail): ?> class="required"<?php endif; ?>><?php _e('Email'); ?></label>
                        <input type="email" name="mail" id="mail" class="text"
                               value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
                    </p>
                    <p>
                        <label
                            for="url"<?php if ($this->options->commentsRequireURL): ?> class="required"<?php endif; ?>><?php _e('网站'); ?></label>
                        <input type="url" name="url" id="url" class="text" placeholder="<?php _e('http://'); ?>"
                               value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
                    </p>
                </div>
                <?php endif; ?>
                <p>
                    <label for="textarea" class="required"><?php _e('内容'); ?></label>
                    <textarea rows="8" cols="50" name="text" id="textarea" class="textarea"
                              required><?php $this->remember('text'); ?></textarea>
                </p>
                <p>
                    <button type="submit" class="submit"><?php _e('提交评论'); ?></button>
                    <div class="comment-clear"></div>
                </p>
            </form>
        </div>
    <?php else: ?>
        <h3><?php _e('评论已关闭'); ?></h3>
    <?php endif; ?>
    
<?php if ($comments->have()): ?>
        <h3><?php $this->commentsNum(_t('暂无评论'), _t('仅有一条评论'), _t('已有 %d 条评论')); ?></h3>

<?php $comments->listComments(); ?>
        <div class="comment-pagegroup">
<?php

$npattern = '/\<li.*?class=\"next\"><a.*?\shref\=\"(.*?)\"[^>]*>/i';
$ppattern = '/\<li.*?class=\"prev\"><a.*?\shref\=\"(.*?)\"[^>]*>/i';
ob_start();
$comments->pageNav();
$con = ob_get_clean();
$n=preg_match_all($npattern, $con, $nextlink);
$p=preg_match_all($ppattern, $con, $prevlink);
if($n){
$nextlink=$nextlink[1][0];
}else{
$nextlink=false;
}

if($p){
$prevlink=$prevlink[1][0];
}else{
$prevlink=false;
}
?>
<?php if($prevlink): ?>
    <a href="<?php echo $prevlink; ?>" class="content-page">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
            </svg>
            <span>
                上一页
            </span>
    </a>
<?php else: ?>
<div></div>
<?php endif; ?>
<?php if($nextlink): ?>
    <a href="<?php echo $nextlink; ?>" class="content-page">
            <span>
                下一页
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
    </a>
<?php endif; ?>

    </div>
<?php endif; ?>

</div>

freewind自由之风主题

simplicity纯文字极简主题

Fosays单栏主题

Fosays单栏Typecho主题

prohibitIP

禁止国外IP访问的安全插件

Carbon极简主义

极简主义单栏纯文字Typecho主题

Eston简洁双栏模板

Eston一个比较简单的模板，移植自wp模板。

NEWCITY2018简单双栏

NEWCITY2018简单的typecho主题

TeConnect

Typecho社会化登录（QQ和微博）插件

移动，联通，电信，广电超实惠流量卡套餐，19元185G或235G流量，29元265G或275G流量，流量卡数量有限先到先得！

哔哩哔哩UID靓号，短位7位哔哩哔哩uid出售中

评论区

酷小呵

找了一个教程，已经把评论区解决了🙃🙃欢迎大佬评论！

14天前
酷小呵

我点击提交评论后。他就直接给我退出登录了，这是怎么回事呀？谢谢！

21天前
zizdog

任何刚开始折腾这些的人，评论区都是头大的地方。

04月12日
1. 叶开
  
  @zizdog
  我已经开始折腾评论区了
  
  07月19日
永恒末匕

代码已经加入咋评论不了呢

2023年11月05日
1. 泽泽社长
  
  @永恒末匕
  pjax主题的话需要自行处理下兼容问题
  
  2023年11月07日
  1. 木子小鱼
    
    @泽泽社长
    收藏了，感谢分离~
    
    06月30日
SEN

测试一下图片

2023年10月04日
1. 泽泽社长
  
  @SEN
  评论设置本站没开允许html语法
  
  2023年10月05日
  1. SEN
    
    @泽泽社长
    哈哈，ok
    
    2023年10月05日