社区帖子详情

代码：

  1. <div class="post-content">
  2.     <div class="post-title row">
  3.         <div class="col-md-9 col-xl-9">
  4.             <h4>#(post.title ??)</h4>
  5.             <ul class="post-tag">
  6.                 <li><a href="#(post.category.url ??)" class="club-label">#(post.category.title ??)</a></li>
  7.                 <li><span>#(post.view_count ?? 0)</span>次浏览</li>
  8.             </ul>
  9.         </div>
  10.         <div class="col-md-3 col-xl-3">
  11.             <div class="media author-title">
  12.                 <a href="#"><img class="rounded-circle w-30" src="#(post.user.avatar ??)" alt="..."></a>
  13.                 <div class="media-body">
  14.                     <p class="fs-12">
  15.                         <strong><a href="#(post.user.url ??)">#(post.user.nickname ??)</a></strong>
  16.                         #userMembers(post.user.id)
  17.                         #for(member : members)
  18.                         <a href="#(member.type.link ??)" class="label-vip2">
  19.                             <img src="#(member.type.icon ??)" alt="#(member.type.title ??)">
  20.                         </a>
  21.                         #end
  22.                         #end
  23.                     </p>
  24.                     <time class="opacity-70 fs-12" datetime="2019-01-11">#date(post.created ??)</time>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.     </div>
  29.     <div class="post-main">
  30.         #(post.content ??)
  31.     </div>
  32. </div>
  1. 备注：
  3. #(post.title ??) —— 帖子标题；
  5. #(post.category.title ??) —— 帖子所属分类；
  7. #(post.category.url ??) —— 帖子所属分类的链接；
  9. #(post.view_count ?? 0) —— 帖子阅读量；
  11. #(post.user.avatar ??) —— 帖子作者头像；
  13. #(post.user.nickname ??) —— 帖子作者昵称；
  15. #(post.user.url ??) —— 帖子作者链接；
  17. #date(post.created ??) —— 帖子发布时间；
  19. #(post.content ??) —— 帖子内容；
  21. #(member.type.title ??) —— 会员标志的标题；
  23. #(member.type.link ??) —— 会员标志的链接；
  25. #(member.type.icon ??) —— 会员标志的图标；

效果：

社区帖子详情 - 图1

帖子评论代码：

  1. #postCommentPage()
  2. <div class="row jp-comment">
  3.     <div class="col-12 col-lg-12" id="comments">
  4.         <h5 class="comment-title"><i class="fa fa-star-half-o" aria-hidden="true"></i>
  5.             #(commentPage.totalRow)个回答</h5>
  6.         <div class="media-list">
  7.             #for(comment : commentPage.list)
  8.             <div class="club-post">
  9.                 <div>
  10.                     #(comment.content ??)
  11.                 </div>
  12.                 <div class="media author-title">
  13.                     <a href="#">
  14.                         <img class="rounded-circle w-30" src="#(comment.user.avatar ?? 'images/team.jpg')" alt="...">
  15.                     </a>
  16.                     <div class="media-body">
  17.                         <p class="fs-12">
  18.                             <strong><a href="#">#(comment.user.nickname ??)</a></strong>
  19.                             #userMembers(comment.user_id)
  20.                             #for(member : members)
  21.                             <a href="#(member.type.link ??)" class="label-vip2">
  22.                                 <img src="#(member.type.icon ??)" alt="#(member.type.title ??)">
  23.                             </a>
  24.                             #end
  25.                             #end
  26.                         </p>
  27.                         <time class="opacity-70 fs-12" >#date(comment.created)</time>
  28.                         <span class="club-reply">
  29.                             <a href="javascript:;" class="toReply" data-id="#(comment.user.id)" data-author="#(comment.user.nickname)">回复</a>
  30.                         </span>
  31.                     </div>
  32.                 </div>
  33.                 <div class="clearfix"></div>
  34.             </div>
  35.             #end
  37.             #if(commentPage.totalRow > 10)
  38.             #commentPaginate(anchor="allComment",anchor="comments",nextText=">",previousText="<")
  39.             <nav aria-label="Page navigation example">
  40.                 <ul class="pagination justify-content-center ">
  41.                     #for(page : pages)
  42.                     <li class="page-item #(page.style)"><a class="page-link" href="#(page.url ??)">#(page.text)</a>
  43.                     </li>
  44.                     #end
  45.                 </ul>
  46.             </nav>
  47.             #end
  48.             #end
  50.             <form action="#(CPATH)/club/doPublishComment" method="POST" class="mt-20" id="clubCommentForm" class="mt-20 mb-40 bg-gray p-10" style="margin-left:-15px;margin-right:-15px;">
  51.                 <input type="hidden" name="postId" value="#(post.id)">
  52.                 <input type="hidden" name="pid" id="pid" value="">
  53.                 <input type="hidden" name="csrf_token" value="#(CSRF_TOKEN)">
  54.                 <div class="form-group">
  55.                     <textarea class="form-control" id="content" name="content" placeholder="我来回答..." rows="4"></textarea>
  56.                 </div>
  57.                 <div class="verification">
  58.                     #if(option('post_comment_vcode_enable'))
  59.                     <div class="verification-code">
  60.                         <input placeholder="请输入验证码" name="captcha" id="captcha">
  61.                         <img src="/commons/captcha" onclick="this.src='#(CPATH)/commons/captcha?d='+Math.random();" cdn-exclude id="captchaimg">
  62.                     </div>
  63.                     #end
  64.                     <div class="verification-btn">
  65.                         <button class="btn btn-primary" type="submit">提交</button>
  66.                     </div>
  67.                 </div>
  68.             </form>
  69.         </div>
  70.     </div>
  71. </div>
  72. #end

备注：

  1. #(commentPage.totalRow) —— 评论总数；
  1. #(comment.content ??) —— 评论内容；
  1. #(comment.user.avatar ?? 'images/team.jpg') —— 评论者头像，如果没有头像，就用默认头像team.jpg；
  1. #(comment.user.nickname ??) —— 评论者昵称；
  1. #date(comment.created) —— 评论时间；

效果如下：

社区帖子详情 - 图2