typecho 模板开发自定义评论样式

admin

撰写于 2022年 02月 10 日

官方变量

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

输出评论方法

    <?php function threadedComments($comments, $options) {
        $commentClass = '';
        $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
        ?>
        <li id="li-<?php $comments->theId(); ?>" 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 id="<?php $comments->theId(); ?>" class="comment-item">
                <div class="comment-author">
                    <?php $comments->gravatar('40', ''); ?>
                    <span class="fn">
                <?php $comments->author(); ?>
                <?php if ($comments->authorId) {
                    if ($comments->authorId == $comments->ownerId) {
                        echo "<span class='author-after-text'>[作者]</span>";
                    }?>
                <?php }?>
            </span>
                </div>
                <div class="comment-meta">
                    <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a>
                </div>
                <span class="comment-reply"><?php $comments->reply(); ?></span>
                <div class="comment-content">
                    <?php $comments->content(); ?>
                </div>
            </div>
            <?php if ($comments->children) { ?>
                <div class="comment-children">
                    <?php $comments->threadedComments($options); ?>
                </div>
            <?php } ?>
        </li>
    <?php } ?>

css样式

    <style>
    /*评论样式 start*/
    .comments-wrapper {
        border-top: 1px dashed #cccccc;
        padding-top: 1rem;
        margin-top: 3rem;
    }
    
    .comments-wrapper img.avatar {
        text-align: center;
        margin-right: 10px;
    }
    
    .comments-wrapper .comment-content p {
        font-size: 14px;
    }
    
    .comment-list, .comment-list li {
        list-style: none;
    }
    
    .comments-wrapper .comment-author {
        display: inline-block;
        font-weight: 600;
    }
    
    .comments-wrapper .comment-meta {
        display: inline-block;
    }
    
    .comments-wrapper .comment-meta a {
        color: #cccccc;
        font-size: 12px;
    }
    
    .comments-wrapper .comment-content {
        padding-left: 52px;
    }
    
    .comments-wrapper .comment-reply {
        display: inline-block;
        float: right;
        font-size: 12px;
    }
    
    .comments-wrapper .comment-item {
        border-top: 1px solid #dfdfdf;
        padding-top: 10px;
    }
    
    .comment-list, .comment-list li {
        list-style: none;
    }
    
    .comment-children {
        padding-left: 40px;
    }
    
    .comment-list {
        padding-left: 0;
    }
    
    .comments-wrapper .cancel-comment-reply {
        margin: 10px 0;
    }
    
    .comment-author .author-after-text {
        font-size: 12px;
        color: #0c5;
    }
    
    .add-comments {
        margin-top: 1rem;
    }
    
    #response {
        margin: 1rem 0;
    }
    </style>

然后你就可以借用官方文档的调用 自行布局了 把下面加到合适位置就可以了

    <h4><?php $this->commentsNum('没有评论', '一条评论"' . $this->title . '"', '%d 在 "' . $this->title . '"'); ?></h4>
    <ol id="comment_list">
        <?php $this->comments()->to($comments); ?>
            <?php while($comments->next()): ?>
        <li id="<?php $comments->theId(); ?>">
            <div class="comment_data">
                    <?php echo $comments->sequence(); ?>. 
                    <strong><?php $comments->author(); ?></strong>
                    on <?php $comments->date('F jS, Y'); ?> at <?php $comments->date('h:i a'); ?>
                </div>
            <div class="comment_body"><?php $comments->content(); ?></div>
        </li>
        <?php endwhile; ?>
    </ol>
    
    <!-- 判断设置是否允许对当前文章进行评论 -->
    <?php if($this->allow('comment')): ?>
     
        <h4 id="response">评论</h4>
     
        <!-- 输入表单开始 -->
        <form method="post" action="<?php $this->commentUrl() ?>" id="comment_form">
     
            <!-- 如果当前用户已经登录 -->
            <?php if($this->user->hasLogin()): ?>
                <!-- 显示当前登录用户的用户名以及登出连接 -->
                <p>登录用户： <a href="<?php $this->options->adminUrl(); ?>"><?php $this->user->screenName(); ?></a>. 
                <a href="<?php $this->options->index('Logout.do'); ?>" title="Logout">退出 &raquo;</a></p>
     
            <!-- 若当前用户未登录 -->
            <?php else: ?>
                <!-- 要求输入名字、邮箱、网址 -->
            <p><input type="text" name="author" class="text" size="35" value="<?php $this->remember('author'); ?>" /><label>昵称</label></p>
            <p><input type="text" name="mail" class="text" size="35" value="<?php $this->remember('mail'); ?>" /><label>邮箱</label></p>
            <p><input type="text" name="url" class="text" size="35" value="<?php $this->remember('url'); ?>" /><label>网址</label></p>
            <?php endif; ?>
     
            <!-- 输入要回复的内容 -->
         <p><textarea rows="10" cols="50" name="text"><?php $this->remember('text'); ?></textarea></p>
         <p><input type="submit" value="Submit Comment" class="submit" /></p>
        </form>
    <?php endif; ?>
                              
    <!--pingend-->