Typecho article page comment style modification

demand

When using typecho for template development, the default comment style is ugly.

Therefore, comments need to be re-output or styled.

The default comment template file path is: comments.php

Mainly used related variables

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

Custom comment output

1. threadedComments method

If you want to customize the comment output content, you need to override the threadedComments($comments, $options) method. This method needs to be placed in front of <?php $this->comments()->to($comments); ?> in the template file, because in fact $this->comments()->to($comments); will call the threadedComment template.

2. A code I wrote myself

<?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>

The home page is a rewrite of the threadedComments($comments, $options) method. The rewrite is mainly a custom writing of the output style. After writing, it is judged whether comments are allowed, and then the comment-related output is performed.

3. Use of comment js reply function
Because I don't understand js code, I just wrote the js code given by default.

First, comments->reply(); code outputs the default js reply button, and then clicking the reply button will automatically insert a hidden form into the form, and the input box will return to the div box with the ID <?php $this->respondId(); ?>

Determine whether the comment or reply is from the author himself

If you want to show whether the comments are made by yourself, you need to make a judgment.

The method given in the official documentation of typecho is to set the class as follows:

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

But when I used it, it was not very easy to use. Instead, problems often occurred, and the style control was not easy to control, so I made a judgment directly on the author's name:

The judgment code can be placed before or after the author's output.

First determine whether there is an authorId attribute. If so, then determine whether authorId and ownerId are consistent.

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