文章列表页相关

文章列表

编写的代码如下： 

  1. #articlePage()
  2. #for(article : articlePage.list)
  3. <div class="card mb-30">
  4.   <div class="row align-items-center h-full">
  5.     <div class="col-12 col-md-4">
  6.       <a href="#(article.url)"><img src="#(article.showImage ?? 'images/nothumbnail.jpg')" alt="..."></a>
  7.     </div>
  9.     <div class="col-12 col-md-8">
  10.       <div class="card-block">
  11.         <h4 class="card-title"><a href="#(article.url)"> #(article.title)</a></h4>
  12.         <p class="card-text">#maxLength(article.text,100)</p>
  14.       </div>
  15.     </div>
  16.   </div>
  17. </div>
  18. #end
  19. #end

备注：

  1. #(article.url) 表示文章链接；
  1. #(article.showImage ?? 'images/nothumbnail.jpg') 表示读取文章的缩略图，如果没有传缩略图，那就展示默认图片nothumbnail.jpg；
  1. #(article.title) 表示读取文章标题；
  1. #maxLength(article.text,100) 表示读取文章内容的前100个字；

生成的效果如下：

文章列表页相关 - 图1

文章翻页：

编写代码如下：

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

生成效果如下：

文章列表页相关 - 图2