在设计博客评论的过程中，最初采用angularjs的included功能，引入模板进行嵌套。做出评论功能。子评论缩进，会导致子孙评论跟着缩进。如下图所示

由于评论层层嵌套，在UI美化过程中，受到极大的阻碍，决定自己重写。每评论一级，就缩进不少。如果评论嵌套太多，则直接导致最后的评论可用空间变得狭窄

参考我条的评论功能，示例如下，仅仅跟评论左对齐，所有子评论均采用缩进的形式。

在此参考之下，用原始的jquery+layui重新书写评论功能。重新设计后的评论如下图所示

网站源码可参考：

代码参考

HTML代码：

<div id="comments" article_id="{{ article.id }}" user_id="{{ user.id }}"> <form class="layui-form" action=""> <div class="layui-form-item"> <textarea class="layui-textarea" required placeholder="输入要评论的内容..." style="height: 5rem" name="content"></textarea> </div> <div class="layui-form-item"> <button type="submit" class="layui-btn" lay-submit lay-filter="commentsForm">提交评论</button> </div> </form></div><div id="comments2"></div><script src="/static/js/comments.js"></script>

JS代码：

var getComments = function () { let article_id = $('#comments').attr("article_id") axios.get('/comments/', { params: { 'article_id': article_id } } ).then(function (response) { $('#comments2').empty() function formatTree(comments) { console.log(comments) count = 0 for (let comment of comments) { let comLength = comment.cid.length count++ $('#comments2').append(` <br> <div class="layui-row layui-col-space1"> <div class="layui-col-md1">|</div> <div class="layui-col-md8"> 评论人:${comment.people},内容：${comment.content} </div> <div class="layui-col-md3">回复|赞</div><br> </div> `) if (comment.cid.length == 0) { continue } if (comment.cid.length > 0) { formatTree(comment.cid) } if (count == comLength) { $('#comments2').append('<hr class="layui-bg-green">') } } } let commentsData = response.data for (let comments of commentsData) { console.log(comments) $('#comments2').append(` <div class="layui-row layui-col-space10">  <div class="layui-col-md1"> <img style=" width: 34px;height: 34px;display: flex;border-radius: 50%;align-items: center;justify-content: center;overflow: hidden;" src="/static/img/timg.jpg" /> </div>  <div class="layui-col-md9" style="line-height: 30px">  <p style="font-size:x-large">${comments.people}</p>  <p style="color: darkgray">${comments.com_time}</p>  <p style="font-size: 14px">${comments.content}</p>  </div>  <div class="layui-col-md2" style="vertical-align: center">  <button class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>  </button> <button class="layui-btn layui-btn-sm layui-btn-primary"> 200<i class="fa fa-thumbs-o-up" aria-hidden="true"></i> </button>  </div>  </div>`) if (comments.cid.length == 0) { $('#comments2').append('<hr class="layui-bg-green">') continue } if (comments.cid.length > 0) { formatTree(comments.cid) } } }).catch(function (error) { console.warn(error); })}//获取评论getComments()var replyComments = function (data) { /** * data: { "article_id": article_id, 'content': content, 'user': user_id, 'fid': fid } * **/ axios.post('/comments/', data).then(function (respone) { return getComments() }).catch(function (error) { console.error(error) })}//提交评论var form = layui.form;//监听提交form.on('submit(commentsForm)', function (data) { let article_id = $('#comments').attr("article_id") let user = $('#comments').attr("user_id") data.field.article_id = article_id data.field.user = user replyComments(data.field) return false;});