typecho文章页评论样式修改

需求

使用 typecho 进行模板开发的时候，默认评论样式很难看。

因此需要评论需要重新输出或进行样式设定。

默认的评论模板文件路径是：comments.php

主要使用的相关变量

<?php $comments->gravatar('40', ''); ?> //头像，有两个参数，大小、默认头像？
<?php $comments->author(); ?> //评论作者
<?php $comments->permalink(); ?> //当前评论的连接地址
<?php $comments->date('Y-m-d H:i'); ?>//评论时间，可在括号里设置格式
<?php $comments->reply(); ?> //回复按钮，可在括号里自定义评论按钮的文字
<?php $comments->content(); ?> //评论内容

自定义评论输出

1、threadedComments 方法

如果要自定义评论输出内容，则需要重写 threadedComments($comments, $options) 方法，这个方法需要放在模板文件中 <?php $this->comments()->to($comments); ?> 的前面，因为实际上 $this->comments()->to($comments); 会调用 threadedComment 模板。

2、我自己写的一个代码

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php function threadedComments($comments, $options) {?>
<div class="comment-list-item" >
<div class="item">
<img class="avatar" src="https://thirdqq.qlogo.cn/g?b=qq&amp;nk=<?php echo empty($comments->mail)?'16':$comments->mail; ?>&amp;s=100" alt="头像">
<div class="comment-content">
<div class="user">
<span class="author">
<?php $comments->author(); ?>
<time class="date"><?php $comments->date('Y-m-d H:i'); ?></time>
</span>
<div  class="handlebox">
<?php ob_start(); 
$comments->reply(); 
$content = ob_get_contents();
ob_end_clean();
$content = preg_replace("/<a href=\"(.*?)\" rel=\"nofollow\" onclick=\"(.*?)\"+>(.*?)<\/a>/sm", '<a onclick="$2" class="revertcomment">$3</a>', $content);
echo $content;
?>
</div>
</div>
<div class="substance">
<div  id="<?php $comments->theId(); ?>" ></div>
<?php $comments->content(); ?><label id="AjaxComment<?php $comments->theId(); ?>"></label>
<?php if ($comments->children) { ?>
<div class="item-level">
<?php $comments->threadedComments($options); ?>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<?php } ?>
<div id="comments" class="page-comment">
    <?php $this->comments()->to($comments); ?>
    <div class="title"><?php $this->commentsNum(_t('评论'), _t('已有1条评论'), _t('已有 %d 条评论')); ?></div>
    <?php if($this->allow('comment')): ?>
    <div id="<?php $this->respondId(); ?>" class="page-comment-box reply-frm">
        <form id="frmSumbit" method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
        <div class="page-comment-head" style="">
        <?php if($this->user->hasLogin()): ?>
        <?php else: ?>
<input type="text" name="author" id="author" class="text" placeholder="* 怎么称呼" value="<?php $this->remember('author'); ?>" required />
<input type="email" name="mail" id="mail" lay-verify="email" class="text" placeholder="<?php if ($this->options->commentsRequireMail): ?>* <?php endif; ?>邮箱(放心~会保密~.~)" value="<?php $this->remember('mail'); ?>" <?php if ($this->options->commentsRequireMail): ?>required<?php endif; ?> />
<input type="url" name="url" id="url" lay-verify="url" class="text" placeholder="<?php if ($this->options->commentsRequireURL): ?>* <?php endif; ?><?php _e('http://您的主页'); ?>" value="<?php $this->remember('url'); ?>" <?php if ($this->options->commentsRequireURL): ?>required<?php endif; ?> />
<?php endif; ?>
</div>

<div class="page-comment-body">
            <textarea name="text" id="txaArticle" placeholder="难道不说点什么？"></textarea>
</div>
<div class="page-comment-foot">
    <div class="meta">
        <a href="javascript:;" id="daka" onclick="javascript:SIMPALED.Editor.daka();"><i class="icon-pencil-square"></i></a>
    </div>
    <div class="submit">
        <?php $comments->cancelReply(); ?>
        <button type="submit"><?php _e('发表评论'); ?></button>
    </div>
</div>
<div class="page-comment-verify">
</div>
</form>
</div>



<?php else: ?>

<div class="commentmsg">已关闭评论!</div>

<?php endif; ?>

<div class="page-comment-list">
        <label id="AjaxCommentBegin"></label>
        <?php if ($comments->have()): ?>
        <div class="page-comment-list">
        <label id="AjaxCommentBegin"></label>
        <?php $comments->listComments(); ?>
        <label id="AjaxCommentEnd"></label>
        </div>

<?php endif; ?>
</div>

</div>

首页是threadedComments($comments, $options)方法的重写，重写主要是输出样式的自定义写法，写完后，判断是否是允许评论，然后在进行评论相关的输出。

3、评论js回复功能的使用
因为我不懂js代码，所以我就直接将就默认给出的js代码进行书写。

首先是comments->reply(); 代码输出默认js回复按钮，然后点击回复按钮会自动向表单插入隐藏表单，同时输入框会回到id为<?php $this->respondId(); ?>的div盒子下面

判断是否是作者本人的评论或者回复

如果要显示是否是本人发表的评论，则需要进行一次判断。

typecho 官方文档给的方式通过设置 class 的方式，如下：

$commentClass = '';
    if ($comments->authorId) {
        if ($comments->authorId == $comments->ownerId) {
            $commentClass .= ' comment-by-author';
        } else {
            $commentClass .= ' comment-by-user';
        }
    }

但是我在使用的时候，并不是很好用，反而会经常出现问题，样式控制也不好控制，于是我直接在作者名字上进行判断：

判断的代码放在作者输出之前或者之后都可以。

首先判断是否有 authorId 属性，如果有，则判断 authorId 和 ownerId 是否一致即可。

<?php $comments->author(); ?>
<?php if ($comments->authorId) {
    if ($comments->authorId == $comments->ownerId) {
        echo "<span class='author-after-text'>[作者]</span>";
    }?>
<?php }?>