typecho评论模块入门

官方文档对这方面写的比较简洁,不利于主题修改者快速入门typecho,所以总结了一些经验,方便自己也方便主题修改者创建评论模块。

先写一个评论区的总的容器,id 为comments

<div id="comments">
  ...
</div>

评论区域分为两个部分:评论输出列表模块评论输入表单模块

评论输出列表模块

有两种方法:

  • 使用官方自带的函数输出,方便简单,只需要加点CSS控制就行
  • 自定义评论列表模块,更灵活满足我们需求

官方自带的函数输出评论

代码如下:

<?php $this->comments()->to($comments); ?>
<?php if ($comments->have()): ?><!--如果有评论的才会输出-->
   <!--显示评论总条数-->
<h3><?php $this->commentsNum(_t('暂无评论'), _t('仅有一条评论'), _t('已有 %d 条评论')); ?></h3>
    <!--输出评论列表-->
<?php $comments->listComments(); ?>
    <!--评论分页-->
<?php $comments->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>  
<?php endif; ?>

代码很好理解。不再赘述。

说明一下官方文档—快速入门—调用评论页 给出的代码示例是错误 的!代码示例只能实现简单输出评论,不能对每条评论回复,是个半残品 。但是里面的函数是可以在自定义评论模块中来使用的。

1758956747.png

我们这里输出评论模块使用的使用官方自带的函数 $comments->listComments(); 。输出的HTML结构也是写死的。所以,接下来是如何自定义评论输出列表模块

自定义评论输出列表模块

官方文档—自定义评论列表区域 这里面给出了很混乱的代码讲解,实质上是写了一个threadedComments 函数来替代系统自带的threadedCommentsCallback函数(在/var/widget/comments/archive.php内置)。

这个函数是php与html互写的形式。可以看出这个函数分为了两个部分:

  • php动态控制输出结构
  • html语句直接固定输出结构
<?php
  function threadedComments($comments, $options) {

    ... //动态控制结构
?>
    ... //html 固定结构
}

<?php } ?><!--}是函数的结束符-->

动态控制结构

    $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为子级,否则是父级
  • 如果是文章作者的评论添加 .comment-by-author 样式
  • 如果是评论作者的添加 .comment-by-user 样式
  • 通过判断$comments->_levels 来确定当前评论的是子级评论还是父级评论

这部分一般不需要更改的,即使修改也是增加语句。

HTML固定输出结构

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

大家马上会发现之前官方文档的错误示例代码提供的函数 ,在这里派上了用场!

代码很好理解,每条评论是一个<li>列表项目,包含了评论作者的头像 评论作者的信息子级评论 。子级评论和父级评论的HTML结构是相同的,只是CSS样式不同而已。

我们把两个部分组合在一起,就构成了我们的自定义评论输出模块

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

评论输入表单模块

这部分很简单,直接用HTML静态结构来固定输出内容。

先贴出官方文档给出的代码:

<!-- 判断设置是否允许对当前文章进行评论 -->
<?php if($this->allow('comment')): ?>

    <h4 id="response">Leave a Reply</h4>

    <!-- 输入表单开始 -->
    <form method="post" action="<?php $this->commentUrl() ?>" id="comment_form">

        <!-- 如果当前用户已经登录 -->
        <?php if($this->user->hasLogin()): ?>
            <!-- 显示当前登录用户的用户名以及登出连接 -->
            <p>Logged in as <a href="<?php $this->options->adminUrl(); ?>"><?php $this->user->screenName(); ?></a>. 
            <a href="<?php $this->options->index('Logout.do'); ?>" title="Logout">Logout &raquo;</a></p>

        <!-- 若当前用户未登录 -->
        <?php else: ?>
            <!-- 要求输入名字、邮箱、网址 -->
        <p><input type="text" name="author" class="text" size="35" value="<?php $this->remember('author'); ?>" /><label>Name (Required)</label></p>
        <p><input type="text" name="mail" class="text" size="35" value="<?php $this->remember('mail'); ?>" /><label>E-mail (Required *will not be published)</label></p>
        <p><input type="text" name="url" class="text" size="35" value="<?php $this->remember('url'); ?>" /><label>Website</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; ?>

看得懂注释,应该也能看的懂代码。注意以下两点:

  1. <?php if($this->allow('comment')): ?> 这个函数详见分离文章的评论和引用通告

  2. typecho 提供了 <?php $this->remember(''); ?>函数可以用来记住之前已经输入过的名称、邮箱地址和网址和评论内容。
最后修改:2017 年 02 月 05 日 12 : 42 AM
如果觉得我的文章对你有用,请随意赞赏

21 条评论

  1. essayforme

    Nicely put, Appreciate it!

  2. writeessay

    I'm still learning from you, while I'm improving myself. I certainly liked reading everything t[...]

  3. owen

    首次评论好像会有个空 @

    1. 友人C
      @owen

      测试不会呀

      ps:你修改后的挺好看哒~

      1. owen
        @友人C

        感谢大佬的辛勤付出 OωO

  4. 尚寂新

    问下instantclick你在适配的时候 评论区那块是如何处理的qwq 感谢

    1. 友人C
      @尚寂新

      footer.php
      有一个注释:comments.php 页面必需js
      那儿有关于评论部分的js

  5. 山小炮

    真的不错呀,请问评论加@是怎么搞的吗?

    1. 友人C
      @山小炮

      handsome主题的 function.php 里有相关注释哦

      1. 山小炮
        @友人C

        好的,研究一下,感谢分享。

  6. Token

    安装完handsome主题后,,首页上的文章都看不到,空白。。。是什么情况~~~~刚才才下载安装的。。。

    1. 友人C
      @Token

      程序必要插件是否按照完毕了呢?

      1. Token
        @友人C

        找到了,,刚才用的开发版。。。。

      2. Token
        @友人C

        不过,刚下载过来的主题文件夹中,并没有插件文件夹呢~~~

        1. 友人C
          @Token

          你是在github上面下载的吗?不可能没有啊~

          1. Token
            @友人C

            从Typecho那边推荐的过去的链接是Github上2.0.2的dev那个链接,是开发版,里面没有插件 文件夹,,, https://github.com/ihewro/typecho-theme-handsome-dev 。然后找到了2.0.0版的,里面有~~

            1. 友人C
              @Token

              你有一个文件:js/OwO.json 没有更新成 使用版的,会导致评论区的表情图片失效

            2. 友人C
              @Token

              你从哪个链接点进来的呢?可否发一下。

              开发版版本要比使用版落后一点,原因是我有点懒,没有及时更新开发版

      3. Token
        @友人C

        = = 原来还有必要插件呀并没有,刚搭建完,直接装了个主题·~好的,,,我看安装说明的文档去~~~~

  7. minuo

    搞的不错,借鉴中……

发表评论