蚂蚱教你自定义 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 的评论列表的样式》  发表时间:  最后更新时间:

谁来过

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

有 18 条评论

  1. 琛苏设计 琛苏设计

    请问一下css样式在哪个位置插入呢?

    1. 寒叶 寒叶

      你模版的样式文件中

  2. 晓波 晓波

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

  3. 木先森 木先森

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

    1. 寒叶 寒叶

      有评论功能啊

  4. 稜角沙砾 稜角沙砾

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

    1. 寒叶 寒叶

      有连接么

  5. My_Grow My_Grow
  6. 搞笑视频-videoclub.cn 搞笑视频-videoclub.cn

    还不是很懂哦

    1. 寒叶 寒叶

      需要一些 html css基础

  7. 蚂蚱 蚂蚱

    对了,你可以先复制带记事本,或者NPP++上,然后再复制剪贴就行了。

    1. 子曰去哪 子曰去哪

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

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

        确实很复杂

  8. 蚂蚱 蚂蚱

    我用 geshi 代码高亮插件来的

  9. 蚂蚱 蚂蚱

    代码已更新

    1. 子曰去哪 子曰去哪

      这里已更新,你code全用 html+css 囧。。。拷得我好辛苦

  10. 子曰去哪 子曰去哪

    似乎当前模版导致内容显示不完全,请点击文内引用信息,查看原文

    1. 子曰去哪 子曰去哪

      安装一个编辑器后,部分代码可以正常显示

添加新评论

captcha




博主推荐专题

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


关闭

标签云

一极乐 衷心接受你的建议

TOP