文章列表页相关

文章列表

编写的代码如下:

#articlePage()
#for(article : articlePage.list)
<div class="card mb-30">
  <div class="row align-items-center h-full">
    <div class="col-12 col-md-4">
      <a href="#(article.url)"><img src="#(article.showImage ?? 'images/nothumbnail.jpg')" alt="..."></a>
    </div>

    <div class="col-12 col-md-8">
      <div class="card-block">
        <h4 class="card-title"><a href="#(article.url)"> #(article.title)</a></h4>
        <p class="card-text">#maxLength(article.text,100)</p>

      </div>
    </div>
  </div>
</div>
#end
#end

备注:

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

生成的效果如下:

img

文章翻页:

编写代码如下:

#articlePaginate(previousText="←",nextText="→")
<nav>
  <ul class="pagination justify-content-center">
    #for(page : pages)
    <li class="page-item #(page.style)">
      <a class="page-link" href="#(page.url ??)">#(page.text ??)</a>
    </li>
    #end
  </ul>
</nav>
#end

生成效果如下:

img

加入我们!

如果你想系统学习JPress涉及到的知识点,或者希望有人解答你在深度使用JPress时遇到问题,
加入QQ群是个很不错的选择