Thinkphp 评论组件 caozha 使用记录

前提

我要开发一个博客类的网站，在github上找到一个还挺好用的repo，代码写的很规范，而且满足我想要的功能。
贴一下地址：https://github.com/wolf-leo/Wolf-Blog ，是使用thinkphp 5.1开发的。

我想加评论功能进去，这个博客代码也给出了添加评论代码的地方。在application/index/view/info_index.php文件中。

<div class="comment" id="comments">
    <!--这里填写第三方评论代码-->
         <!-- 评论 结束 -->
     </div>
 </div>

评论组件

要找基于thinkphp开发，同样github上找到https://github.com/cao-zha/caozha-tp-comment，这个是基于thinkphp 6.x版本开发的，不过不影响，代码都是可以直接搬过来用的。

过程如下：
在上述添加第三方评论代码的地方，假如评论组件中app/index/view/comment/index.html中的代码。

<div style="max-width: 1110px;margin:8px auto 0px auto;text-align: left;padding: 0px;">
    <!-- 评论 开始 -->
    <script>
        cz_cmt_template="{:url('index/comment/template')}";//模板页接口
        cz_cmt_list="{:url('index/comment/list')}";//读取评论列表接口
        cz_cmt_doaction="{:url('index/comment/doaction')}";//发布评论接口
        cz_cmt_dolike="{:url('index/comment/dolike')}";//点赞或踩接口
        cz_cmt_userinfo="{:url('index/comment/userinfo')}";//获取会员信息
    </script>
    <div class="pinglun">
        <div class="pl-520am" data-cmtid="act_1" data-catid="0" data-pagesize="{$cmt_config.cmt_pagesize}" data-scrollload="{$cmt_config.is_scroll_load}" data-scrollbottom="{$cmt_config.bottom_scroll_load}" data-showhot="{$cmt_config.cmt_hot}" data-hotpagesize="{$cmt_config.cmt_hot}"></div>
        <script type="text/javascript" src="__CAOZHA-STATIC__/cz_cmt/api.js"></script>
    </div>
    <!-- 评论 结束 -->
</div>

最后引入的api.js中会接着引入caozha.js等文件，最终把app/index/view/comment/template.html引入进来。然后就可以了，也不需要修改前端界面。

其中遇到的问题：

1. 用的博客模版，template.php中，沿用了thinkphp 3.x版本的配置，使用的标签库标签为<和>来标识，而评论组件是采用了{和}，直接使用会报错vo未定义。

修改方式为：把template.html文件修改为：

<style type="text/css">
    <if $cmt_config.is_like==false>.is_like{display: none;}</if>
    <if $cmt_config.is_bad==false>.is_bad{display: none;}</if>
    <if $cmt_config.is_reply==false>.is_reply{display: none;}</if>
</style>
<script id="PlReplyTemplate" type="text/template" >
    <div class="pl-post pl-post-reply">
        <div class="pl-textarea"><textarea class="pl-post-word" id="pl-520am-f-saytext-reply" placeholder="@ <literal>{{username}}：</literal>"></textarea></div>
        <div class="pl-tools">
            <ul>
                <if $cmt_config.is_face><li onclick="caozha.showPickFace(event,1)"><i class="iconfont icon-face">&#xe60a;</i></li></if>
                <if $cmt_config.is_img><li onclick="caozha.showPickImg(event,1)"><i class="iconfont icon-img">&#xe610;</i></li></if>
                <if $cmt_config.is_captcha><li class="ShowPlKey">
                    <input type="text" id="pl-key-reply" class="pl-key" size="10" placeholder="验证码" />
                    <img src="{:url('index/comment/captcha')}" align="absmiddle" name="plKeyImg" class="plKeyImg" onclick="caozha.updateKey()" title="看不清楚,点击刷新" />
                </li></if>
                <li class="pl-tools-lastchild"><button class="pl-submit-btn" onclick="caozha.submitComment(this,<literal>{{plid}}</literal>)">发 布</button></li>
                <li  class="username"><i class="iconfont">&#xe613;</i><input type="text" id="pl-username-reply" class="pl-key" size="15" placeholder="你的昵称" value="" /></li>
            </ul>
        </div>
        <div class="pl-face-box"  id="pl-face-box-reply">
            <div class="pl-face-box-before"><a class="pl-icon icon-face"></a></div>
            <foreach $faces as $vo>
            <li  onclick="caozha.addplface('[/{$vo[0]}]',1)"><a href="javascript:;"><img width=20 border=0 height=20 src="__PUBLIC__/src/blog/js/cz_cmt/face/{$vo[1]}"></a></li>
            </foreach>
 </div>
        <div class="pl-img-box"  id="pl-img-box-reply">
            <div class="pl-img-box-before"><a class="pl-icon icon-img"></a></div>
            <div class="pl-img-file"><input placeholder="http://" type="text"> <button>添加图片</button></div>
        </div>
    </div>
    <div class="pl-showinfo pl-showinfo-reply">请先说点什么</div>
</script>
<literal>
<script id="NewsCommentTemplate" type="text/template" >
    {{#if data}}
    {{#data }}
    <div class="pl-area pl-show-box" id="pl-show-box-{{plid}}">
        <div class="pl-area-userpic">
            <img id="pl-userpic" src="{{userpic}}">
        </div>
        <div class="pl-area-post">
            <div class="pl-show-title"><span>{{plusername}}</span> <span class="pl-show-time pl-fr">{{formattime}}</span></div>
            <div class="pl-show-saytext">{{{saytext}}}</div>
            <div class="pl-show-tools"><a id="pl-err-info-{{plid}}"></a> <a href="javascript:;" onclick="caozha.doForPl({{plid}},1,this)" class="is_like"><i class="caozha-iconfont caozha-good1"></i><span id="pl-1-{{plid}}">{{zcnum}}</span></a> <a href="javascript:;" onclick="caozha.doForPl({{plid}},0,this)" class="is_bad"><i class="caozha-iconfont caozha-bad1"></i><span id="pl-0-{{plid}}">{{fdnum}}</span></a> <a class="pl-reply is_reply" onclick="caozha.showReply({{plid}},'{{plusername}}')" href="javascript:;"><i class="iconfont">&#xe61c;</i></a></div>
            <div class="pl-show-replay"></div>
        </div>
        <div class="pl-clr"></div>
    </div>
    {{/data}}
    {{else}}
    <div class="lgy_no_data">
        <p><i class="iconfont icon-comment"></i></p>
    </div>
    {{/if}}
</script>
</literal>

       <!--div class="pl-area-userpic">
        <img id="pl-userpic" src="__PUBLIC__src/blog/js/cz_cmt/assets/nouserpic.gif">      </div-->
<div class="pl-area-post">
    <div class="pl-post">
        <div class="pl-textarea"><textarea class="pl-post-word" id="pl-520am-f-saytext" placeholder="写下你想说的，开始我们的对话"></textarea>
        </div>
        <div class="pl-tools">
            <ul>
                <if $cmt_config.is_face><li onclick="caozha.showPickFace(event,0)"><i class="iconfont icon-face">&#xe60a;</i></li></if>
                <if $cmt_config.is_img><li onclick="caozha.showPickImg(event,0)"><i class="iconfont icon-img">&#xe610;</i></li></if>
                <if $cmt_config.is_captcha><li class="ShowPlKey">
                    <div style="margin-top:5px;">
                        <input type="text" id="pl-key" class="pl-key" size="10" placeholder="验证码" />
                        <img src="{:url('index/comment/captcha')}?" align="absmiddle" name="plKeyImg" class="plKeyImg" onclick="caozha.updateKey()" title="看不清楚,点击刷新" />
                    </div>
                </li></if>
                <li class="pl-tools-lastchild"><button class="pl-submit-btn" id="pl-submit-btn-main" onclick="caozha.submitComment(this)">发 布</button></li>
                <li  class="username"><i class="iconfont">&#xe613;</i><input type="text" id="pl-username" class="pl-key" size="15" placeholder="你的昵称" value="" /></li>
            </ul>
        </div>
        <div class="pl-face-box" id="pl-face-box">
            <div class="pl-face-box-before"><a class="pl-icon icon-face"></a></div>
            <foreach $faces as $vo>
            <li  onclick="caozha.addplface('[/{$vo[0]}]',0)"><a href="javascript:;" title="{$vo[0]}"><img width=20 border=0 height=20 src="__PUBLIC__src/blog/js/cz_cmt/face/{$vo[1]}" alt="{$vo[0]}"></a></li>
            </foreach>
</div>
       <div class="pl-img-box"  id="pl-img-box">
            <div class="pl-img-box-before"><a class="pl-icon icon-img"></a></div>
            <div class="pl-img-file"><input placeholder="http://" type="text"> <button>添加图片</button></div>
        </div>
    </div>
</div>

<div class="pl-clr"></div>
<div class="pl-showinfo">请先说点什么</div>
<div class="pl-clr"></div>
<div class="pl-show-hot-list">
    <div class="pl-title">热门评论</div>
    <div class="pl-show-list" id="pl-show-hot"></div>
</div>
<div class="pl-clr" id="pl-start"></div>
<div class="pl-header"><em id="pl-joinnum">0</em>人参与，<em  id="pl-totalnum">0</em>条评论<span class="pl-userinfo" id="pl-userinfo"></span></div>
<div class="pl-show-list" id="pl-show-all"><div class="pl-null NewsComment_loading"><i class="pl-loading"></i>正在载入评论列表...</div></div>
<div id="pl-pagination"></div>
<button onclick="caozha.getNewsComment(0,this);" class="showAllComment buttonGray">查看更多</button>

主要是修改了内置的一些标签，把{}改为<>即可。
同时看了一下{literal}这个标签是标识不解析其中的标签，在这个文件中{literal}{/literal}包含了{{#if data}} {{#data}}等，也就是说在解析的时候不会解析他们。

查了一下，{{#if data}} {{#data}}是js的相关的一些逻辑操作定义。以前都没有接触过。包括thinkphp的标签也没有接触过，用起来还是非常方便好用的。

然后就结束啦。

如果要针对具体文章评论、读取评论，只需要对应修改
<div class="pl-520am" data-cmtid="act_1" data-catid="0" data-pagesize="{$cmt_config.cmt_pagesize}" data-scrollload="{$cmt_config.is_scroll_load}" data-scrollbottom="{$cmt_config.bottom_scroll_load}" data-showhot="{$cmt_config.cmt_hot}" data-hotpagesize="{$cmt_config.cmt_hot}"></div>中的data-cmtid即可。

其他

我想让页面有xss，代码在controller/comment.php文件中的doaction里。

$action_data["saytext"] = isset($action_data["saytext"]) ? strip_tags($action_data["saytext"]) : "";//评论内容

改为

$action_data["saytext"] = isset($action_data["saytext"]) ? ($action_data["saytext"]) : "";//评论内容