Typecho评论模块个性化

typecho教程 2020-08-25

  来源:彼岸雨云

  老早就想研究下这部份,一直拖到现在。 主题设计时,评论模块希望设计得独特,富有个性,就需要修改评论结构,而 typecho 默认模板中提供给我们的只有一行简单代码:

  listComments(); ?>

  把结构都写死了。当然,其实官方的博客中有一篇文章已经声明可以自定义评论结构,只是不太详细,有点摸不着头脑~

  于是今天抽空折腾了下,总的来说是 在 comments.php 开头部份加入如下方法即可实现自定义。

  

  $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’;

  ?>

  

  • 评论和作者类的,下面的才是需要修改的,根据需要修改吧, php部份不需要 修改,只需要修改 HTML 部分,下面是我现在用的

      ?>”>

      

      gravatar($singleCommentOptions->avatarSize, $singleCommentOptions->defaultAvatar); //头像 只输出 img 没有其它标签 ?>

      

      beforeAuthor();

      $comments->author();$singleCommentOptions->afterAuthor(); //输出评论者 ?>

      

      

      permalink(); ?>”>beforeDate();

      $comments->date($singleCommentOptions->dateFormat);

      $singleCommentOptions->afterDate(); //输出评论日期 ?>

      

      

      

      reply($singleCommentOptions->replyWord); //输出 回复 链接?>

      

      

      content(); //输出评论内容,包含

    标签 ?>

      children) { ?>

      

      threadedComments($singleCommentOptions); //评论嵌套?>

      

      

      

  •   

      }

      ?>

      下面是我所用的CSS,这就不需要注释了吧~

      .comment-list{margin:0;list-style:none; padding: 5px 0}

      ol.comment-list li{ margin: 10px 0;padding: 10px 10px 5px;border:1px solid #e3e3e3;background-color:#FAFAFA;-moz-border-radius:5px; -webkit-border-radius:5px;}

      ol.comment-list li.comment-odd{background-color: #F4F9FF; border-color: #D0DDF6; }

      ol.comment-list li.comment-even{background-color:#fff; border-color: #E3E3E3;}

      ol.comment-list li.comment-by-author{border-color: #b8cdf6;}

      ol.comment-list li.comment-by-user {}

      ol.comment-list li .comment-reply{float: right; margin-top: -3px;}

      ol.comment-list li .comment-reply a{font-size:12px;border:none;color:#aaa;}

      ol.comment-list li .comment-reply a:hover{color:#444;}

      .comment-body{overflow:hidden;}

      .comment-body p{ margin: 5px 0}

      .comment-author{border-bottom: 1px solid #ECECEC;height: 36px;padding-bottom: 5px;width: 100%;}

      ol.comment-list li.comment-odd .comment-author { border-bottom-color:#D0DDF6}

      .avatar{float:left;border:1px solid #E3E3E3; padding: 2px; background-color: #fff;}

      .comment-info {color: #888;float: left;line-height: 16px;padding-left: 5px;}

      .comment-info .fn{font-style:normal; display: block; margin-top: 4px}

      .comment-info .comment-meta{color:#999;font-size:10px;}

    评论 (0)
      Top