社区首页

帖子列表代码:

  1. #postPage(pageSize=20)
  2. #for(post : clubPage.list)
  3. <div class="card club-card">
  4. <div class="row align-items-center h-full">
  5. <div class="col-1 col-md-1 club-view">
  6. <span>#(post.view_count ?? 0)</span>
  7. <p>浏览</p>
  8. </div>
  9. <div class="col-1 col-md-1 club-answer">
  10. <span>#(post.comment_count ?? 0)</span>
  11. <p>回答</p>
  12. </div>
  13. <div class="col-10 col-md-10">
  14. <div class="card-block">
  15. <p>
  16. <small>#(post.user.nickname ??)
  17. #userMembers(post.user.id)
  18. #for(member : members)
  19. <a href="#(member.type.link ??)" class="label-vip2">
  20. <img src="#(member.type.icon ??)" alt="#(member.type.title ??)">
  21. </a>
  22. #end
  23. #end
  24. / <span class="elegantDate" data-elegant-date="#date(post.created,'yyyy-MM-dd HH:mm:ss')"></span>发布</small>
  25. </p>
  26. <h4 class="card-title"><a href="#(post.url ??)" style="color: #(post.title_color ??)"> #(post.title ??) </a>
  27. <a href="#(post.category.url ??)" class="club-label">#(post.category.title ??)</a>
  28. </h4>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. #end
  34. #end
  1. 备注:
  2. #postPage(pageSize=20) —— 一个页面显示20条帖子
  1. #(post.view_count ?? 0) —— 帖子浏览量
  1. #(post.comment_count ?? 0) —— 帖子评论量
  1. data-elegant-date="#date(post.created,'yyyy-MM-dd HH:mm:ss') —— 帖子发布时间
  1. #(post.title ??) —— 帖子标题
  1. #(post.url ??) —— 帖子链接
  1. #(post.category.title ??) —— 帖子所属分类名称
  1. #(post.category.url ??) —— 忒自所属分类链接

效果:

社区首页 - 图1

帖子分页代码:

  1. #postPaginate(previousText="←",nextText="→")
  2. <nav>
  3. <ul class="pagination justify-content-center">
  4. #for(page : pages)
  5. <li class="page-item #(page.style)"><a class="page-link" href="#(page.url ??)">#(page.text ??)</a></li>
  6. #end
  7. </ul>
  8. </nav>
  9. #end

分页效果:

社区首页 - 图2

置顶帖子代码:

  1. #topPosts()
  2. #for(post : posts)
  3. <div class="card club-card">
  4. <div class="row align-items-center h-full">
  5. <div class="col-1 col-md-1 club-view">
  6. <span>#(post.view_count ?? 0)</span>
  7. <p>浏览</p>
  8. </div>
  9. <div class="col-1 col-md-1 club-answer">
  10. <span>#(post.comment_count ?? 0)</span>
  11. <p>回答</p>
  12. </div>
  13. <div class="col-10 col-md-10">
  14. <div class="card-block">
  15. <p>
  16. <small>#(post.user.nickname ??)
  17. #userMembers(post.user.id)
  18. #for(member : members)
  19. <a href="#(member.type.link ??)" class="label-vip2">
  20. <img src="#(member.type.icon ??)" alt="#(member.type.title ??)">
  21. </a>
  22. #end
  23. #end
  24. / <span class="elegantDate" data-elegant-date="#date(post.created,'yyyy-MM-dd HH:mm:ss')"></span>发布</small>
  25. </p>
  26. <h4 class="card-title"> [置顶] <a href="#(post.url)" style="color: #(post.title_color ??)">#(post.title ??) </a>
  27. <a href="#(post.category.url)" class="club-label">#(post.category.title ??)</a>
  28. </h4>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. #end
  34. #end

置顶帖子效果

社区首页 - 图3

帖子分类tab代码:

  1. <div class="club-title">
  2. <ul class="nav nav-tabs-minimal club-tab">
  3. <li class="nav-item">
  4. <a class="nav-link #(clubCategory ? '' : 'active')" href="#(CPATH)/club">最新帖子</a>
  5. </li>
  6. #for(c : clubCategories)
  7. <li class="nav-item">
  8. <a class="nav-link #(c == clubCategory ? 'active' : '')" href="#(c.url)">#(c.title ??)</a>
  9. </li>
  10. #end
  11. </ul>
  12. <a class="btn btn-twitter btn-post" href="#(CPATH)/club/newpost">发帖</a>
  13. </div>

帖子分类效果图:

社区首页 - 图4