蚂蚱教你自定义 Typecho 的评论列表的样式

蚂蚱发表在使用中的自定义 Typecho 的评论列表

把以下代码放在 comments.php

假如我们要实现一段这样的评论的 html 代码,效果当然要综合 css 样式来看

<li id="li-comment-250" class="comment-body comment-parent comment-odd">
    <div id="comment-250">
        <div class="comment-author">
            <img class="avatar" src="avatar.png" alt="" width="40" height="40"><!-- 评论者头像 -->
            <cite class="fn"><a href="评论者主页">评论者名字</a></cite>
        </div>
        <div class="comment-meta">
            <a href="评论地址">评论时间</a>
            <span class="comment-reply">回复按钮</span>
        </div>
        <p>我是评论内容</p>
    </div><!-- 评论者信息及内容 -->
    <div class="comment-children">
        <!-- 嵌套评论相关 -->
    </div>
</li>

如何去实现呢?首先要打开模板文件夹里的 comments.php 文件,做好修改准备。

一、把上面的代码,也即你要自定义的单条评论的 html 代码,复制到这个文件的最上面

二、在这段代码的外围加入自定义评论样式的函数

<?php function threadedComments($comments, $options) {
    $commentClass = '';
    if ($comments->authorId) {
        if ($comments->authorId == $comments->ownerId) {
            $commentClass .= ' comment-by-author';  //如果是文章作者的评论添加 .comment-by-author 样式
        } else {
            $commentClass .= ' comment-by-user';  //如果是评论作者的添加 .comment-by-user 样式
        }
    } 
    $commentLevelClass = $comments->_levels > 0 ? ' comment-child' : ' comment-parent';  //评论层数大于0为子级,否则是父级
?>    //自定义评论函数开始
 
//这里是上面的 html 代码
 
<?php } ?>  //自定义评论函数结束

三、在 li 的 css 样式中判断不同层次的、不同 ID 的评论,并添加 css 样式

注意区别下面两句的不同地方

<li id="li-comment-250" class="comment-body comment-parent comment-odd">

加入判断代码之后,第一处是判断评论 ID,后者是判断当前评论是父级评论还是子级评论,且判断评论 ID 的奇偶数

<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="comment-250">
    <div class="comment-author">
        <img class="avatar" src="avatar.png" alt="" width="40" height="40"><!-- 评论者头像 -->
        <cite class="fn"><a href="评论者主页">评论者名字</a></cite>
    </div>
    <div class="comment-meta">
        <a href="评论地址">评论时间</a>
        <span class="comment-reply">回复按钮</span>
    </div>
    <p>我是评论内容</p>
</div>

更改后代码,注意各个信息的代码是什么

<div id="<?php $comments->theId(); ?>">  <!-- 评论 ID -->
    <div class="comment-author">
        <?php $comments->gravatar('40', ''); ?>  <!-- 评论者头像,相关参数请参照下文 -->
        <cite class="fn"><?php $comments->author(); ?></cite>  <!-- 评论作者及连接,连接可在后台设置是否开启 -->
    </div>
    <div class="comment-meta">
        <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a>  <!-- 时间及该评论连接 -->
        <span class="comment-reply"><?php $comments->reply(); ?></span>  <!-- 回复按钮 -->
    </div>
    <?php $comments->content(); ?>  <!-- 评论内容 -->
</div>

相关参数及说明:

<?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 if ($comments->children) { ?>  //是否有嵌套评论判断开始
<div class="comment-children">
    <?php $comments->threadedComments($options); ?>  //嵌套评论所有内容
</div>
<?php } ?>  //是否有嵌套评论判断结束

更改后如下:

<?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';
?>
 
<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(); ?>">
        <div class="comment-author">
            <?php $comments->gravatar('40', ''); ?>
            <cite class="fn"><?php $comments->author(); ?></cite>
        </div>
        <div class="comment-meta">
            <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a>
            <span class="comment-reply"><?php $comments->reply(); ?></span>
        </div>
        <?php $comments->content(); ?>
    </div>
<?php if ($comments->children) { ?>
    <div class="comment-children">
        <?php $comments->threadedComments($options); ?>
    </div>
<?php } ?>
</li>
<?php } ?>

到这里整个自定义评论样式到这里就结束了,最终得到的便是以下代码

<?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';
?>
 
<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(); ?>">
        <div class="comment-author">
            <?php $comments->gravatar('40', ''); ?>
            <cite class="fn"><?php $comments->author(); ?></cite>
        </div>
        <div class="comment-meta">
            <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a>
            <span class="comment-reply"><?php $comments->reply(); ?></span>
        </div>
        <?php $comments->content(); ?>
    </div>
<?php if ($comments->children) { ?>
    <div class="comment-children">
        <?php $comments->threadedComments($options); ?>
    </div>
<?php } ?>
</li>
<?php } ?>

注意:上面的自定义评论代码输出的就是本来评论页里的这段代码,所以你就不用对原来的这段代码做任何更改了。

<?php $comments->listComments(); ?>

SVN 版本更新:首次评论审核提示,在自定义评论代码的适当地方添加以下语句,否则将看不到审核提示语句。

<?php if ('waiting' == $this->status) { ?>  //$this 对应整个评论自定义函数第一个变量,如这里是 $comments
<em class="awaiting"><?php $singleCommentOptions->commentStatus(); ?></em>  //$singleCommentOptions 对应函数的第二个变量,如这里是 $options
<?php } ?>

蚂蚱整理于 2012.03.16

当然最后你还得定制你的 CSS 样式,这才是关系到你评论的展示效果至关重要的。同样的 HTML 布局,不同 CSS 有不同的效果。

转载请注明转自:一极乐https://yijile.com/log/158.html


话题相关文章

话题标签

代码TypechoTypecho模版代码蚂蚱

一极乐 为乐趣而生

《蚂蚱教你自定义 Typecho 的评论列表的样式》  发表时间:  最后更新时间:

谁来过

寒叶邀请你对本文不足说出你的看法!

有 16 条评论

  1. 晓波 晓波

    typecho还是不适合我等小白使用啊,,还是换回wp吧。。。

  2. 寒叶 寒叶

    有连接么

  3. 寒叶 寒叶

    有评论功能啊

  4. 木先森 木先森

    我也想转战typecho,听说这个系统没有自带评论系统,好忧桑。

  5. 稜角沙砾 稜角沙砾

    按照这些代码修改后评论框消失,源代码并没有发现评论框的踪迹,请问这是什么原因?

  6. My_Grow My_Grow

  7. 搞笑视频-videoclub.cn 搞笑视频-videoclub.cn

    确实很复杂

  8. 寒叶 寒叶

    需要一些 html css基础

  9. 搞笑视频-videoclub.cn 搞笑视频-videoclub.cn

    还不是很懂哦

  10. 子曰去哪 子曰去哪

    问题是,
    code标签下是纯代码,
    然后我没有用编辑器插件
    所有内容代码要保留,而per里面要反译成php源代码然后加到code..

添加新评论

captcha




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP