目前市面很多APP都可以看到 评论内可以再子评论回复  此功能是很实用的  

子评论 比回复引用更出色 如果评论多了 引用回复会变得乱七八糟 

2.1版本已经加入了 子评论功能 在此规范一下 子评论的模板开发

首先先参考一下HYBBS2018新模板的子评论开发 "thread_index" 文件

在评论列表循环时输出此代码

id 以及 class 必须使用 post-- 

子评论分为5个部分  

• 按钮 (显示或隐藏 子评论框)
  

• 子评论框代码

• 分页按钮

• JavaScript控制代码

• 多出一个 thread_post 模板 用于另开页面显示 子评论列表  ( 此处参考 HYBBS2018新模板写法 )

按钮 必须加入的标签属性

id="post--start-{$v.pid}" 

data-str0="默认排序" 

data-str1="最新回复" 

data-sort="0" 

data-posts="{$v.posts}" 

data-state="hide" 

data-pid="{$v.pid}" 

onclick="show_post_post_box(this)"

子评论框代码

id="post--ul-{$v.pid}"  用于插入评论列表的容器元素 可见下面代码的  <ul id="post--ul-{$v.pid}">

当你点击显示子评论框按钮时 触发 show_post_post_box() 会把评论数据 插入 li标签  到(<ul id="post--ul-{$v.pid}">)容器中

发表子评论

<span id="post--{$v.pid}" type="text" class="input-text" contenteditable="true">编写评论内容</span>

<button id="post--btn-{$v.pid}" class="btn btn-primary" onclick="post_post({$v.pid})">发表</button>

当你点击发表按钮时 触发post_post() 将 span#post--{$v.pid}提交到服务器 完成发送

分页按钮

<div id="post--btns-{$v.pid}" class="post--page-btns">

</div>

Ajax API:

//发表子评论

post_post(评论PID,成功返回,失败返回);

使用例子:

post_post(评论PID,function(e){
    if(e.error){
        alert('发表成功');
    }else{
        alert('发表失败 原因:' + e.info);
    }
},function(e){
    alert('服务器出错 或 客户本地网络原因')
});

//可能大家看到 为什么不需要输入其他参数  只需要输入 PID . 这就是之前的 post--PID 规范

//获取子评论列表

get_post_post(评论PID,分页ID,排序方式)  排序方式 0=默认沙发  1=最新(最后评论)

get_post_post(评论PID,1,0); 获取评论PID 第1页 默认排序 

//自动插入<ul id="post--ul-{$v.pid}"> 中

说了那么多废话 估计大家也看不懂  还是来点直观的

将下面的代码复制到  评论列表循环中

就是复制到

{foreach $PostList as $k => $v}

~~~~~~~~ 这里是原本默认评论列表的代码

把下面的代码复制在这里

{/foreach}

<button id="post--start-{$v.pid}" class="btn btn-link" data-str0="默认排序" data-str1="最新回复" data-sort="0" data-posts="{$v.posts}" data-state="hide" data-pid="{$v.pid}" onclick="show_post_post_box(this)">
    <i class="iconfont icon-commentalt2fill"></i> 显示子评论框
</button>

<div id="post--box-{$v.pid}" class="post--box">
    <h2 id="post--pos-{$v.pid}">
		评论列表
		<button class="btn btn-link post--sort pull-right">
			<span id="post--sort-s{$v.pid}">{if X('get.order')=='desc'}{$_LANG['最新回复']}{else}默认排序{/if}</span> <i class="iconfont icon-sort"></i>
		</button>
		<div class="select-pop wrap-box">
			<button onclick="$('#post--start-{$v.pid}').data('state','hide').data('sort','0').click()" class="btn select-option">默认排序</button>
			<button onclick="$('#post--start-{$v.pid}').data('state','hide').data('sort','1').click()" class="btn select-option">{$_LANG['最新回复']}</button>
		</div>
	</h2>
    <ul id="post--ul-{$v.pid}">
        <li>
            <img src="{#WWW}View/hybbs/loading.gif" style="margin: 0 auto;display: block;">
            <p style="text-align: center;color: #a3a3a3;">加载数据中...</p>
        </li>
    </ul>
    <div id="post--btns-{$v.pid}" class="post--page-btns">
    </div>
    <div class="post--foot">
        <div id="post--loading-{$v.pid}" class="loading"></div>
        <span id="post--{$v.pid}" onfocus="if(this.textContent=='编写评论内容')this.textContent=''" onblur="if(this.textContent=='')this.textContent='编写评论内容'" type="text" class="input-text" contenteditable="true">编写评论内容</span>
        <button id="post--btn-{$v.pid}" class="btn btn-primary" onclick="post_post({$v.pid})">发表</button>
        <button onclick="$('#post--start-{$v.pid}').data('state','show').click()" class="btn pull-right"><i class="iconfont icon-top2"></i> 收起列表</button>
    </div>
</div>


<script type="text/javascript">
//初始化子评论列表排序UI组件
$(document).ready(function() {
    $(".post--sort").click(function() {
        var _this2 = $(this).next();
        _this2.addClass('select-pop-show');
        $(document).bind('mousedown.efscbarEvent', function(e) {
            $(document).unbind("mousedown.efscbarEvent");
            if (!$(e.target).is($('#btn')) && !$(e.target).is($('#box')) && $(e.target).parent('#box').length === 0) {
                _this2.removeClass('select-pop-show');
            }
        });
    });
});
//子评论列表分页按钮
function create_post_post_page_btn(pid, pageid, posts, max, sort) {
    $('#post--ul-' + pid).html('<li><img src="{#WWW}View/hybbs/loading.gif" style="margin: 0 auto;display: block;"><p style="text-align: center;color: #a3a3a3;">加载数据中...</p></li>');
    console.log(max);
    get_post_post(pid, pageid, sort);
    var tmp = (posts % max) ? (parseInt(posts / max) + 1) : parseInt(posts / max);
    var page_count = (posts % max != 0) ? (parseInt(posts / max) + 1) : parseInt(posts / max);
    pageid = pageid || 1;
    var html = '';
    if (pageid != 1) {
        html += '<button data-pageid="' + (pageid - 1) + '" class="btn btn-primary">上一页</button>';
    }
    for (var i = (pageid - 5 < 1) ? 1 : pageid - 5; i < ((pageid + 5 > tmp) ? tmp + 1 : pageid + 5); i++) {
        html += '<button data-pageid="' + i + '" class="btn btn-primary ' + (pageid == i ? 'disabled' : '') + '">' + i + '</a>';
    }
    if (pageid != page_count)
        html += '<button data-pageid="' + (pageid + 1) + '" class="btn btn-primary">下一页</button>';
    $('#post--btns-' + pid).html(html).find('button').click(function() {
        var _this = $(this);
        var _pageid = _this.data('pageid');
        location.href = "#post--pos-" + pid;
        if (pageid == _pageid)
            return;
        create_post_post_page_btn(pid, _pageid, posts, max, sort);
    });
}
//显示子评论框
function show_post_post_box(obj) {
    var _this = $(obj);
    var state = _this.data('state');
    var pid = _this.data('pid');
    var posts = _this.data('posts');
    var sort = _this.data('sort');
    if (state == 'hide') { //Show
        _this.data('state', 'show');
        _this.html('<i class="iconfont icon-top2"></i> 收起列表');
        _this.addClass('active');
        $('#post--box-' + pid).show();
        $('#post--sort-s' + pid).text(_this.data('str' + sort));
        if (posts) //存在子评论 显示分页按钮
            create_post_post_page_btn(pid, 1, posts, { php echo intval(BBSCONF('post_post_show_size')) }, sort);
        else {
            $('#post--ul-' + pid).html('<li><p style="text-align: center;color: #a3a3a3;">暂无数据...</p><li>');
        }
    } else { //收起评论列表
        _this.data('state', 'hide');
        if (posts != 0)
            _this.html('<i class="iconfont icon-commentalt2fill"></i> ' + posts + ' 条评论');
        else
            _this.html('<i class="iconfont icon-commentalt2fill"></i> 回复帖子');
        _this.removeClass('active');
        $('#post--box-' + pid).hide();
    }
}
</script>

说再多也没用 挺复杂 三言两语 也弄不明白

模板开发者  请参考PC端  HYBBS2018新模板 中的代码开发