首页文章列表以及分页的展示

全部系列教程目录：教程目录

之前的文章添加了主题header.html文件中主要的菜单元素，首页引入之后就剩下文章列表和相关分页展示了。

本篇就是介绍index.html中文章列表的显示以及分页。

首先说下文章列表标签：

<@jp.indexPage module="article"> 

说明：首页文章列表应该包含在indexPage标签中，module的类型与主题配置文件里面的类型一致即可，这边才有默认的article。

然后首页如果需要有推荐、公告之类的模块，需要判断当前页面的话需要用到如下判断标签：

<#if page.isFirstPage() > 

添加文章列表:

<#list page.getList() as content>

接下来就是文章的一些属性标签，下面逐一列举下：

1、判断是否有缩略图

<#if content.thumbnail ??>

文章缩略图引用：

${content.thumbnailByName('t1')!}

注意：t1的尺寸在主题配置文件中配置缩略图长宽大小。

2、文章标题

${content.title}

3、文章URL链接

${content.url}

4、文章摘要

${content.summary}

5、文章作者昵称

${content.nickname!}

6、分类

${content.getTaxonomyAsUrl('category')!'未分类'}

如果未设置分类的话，默认归为『未分类』。

7、发布时间

${content.created?string("yyyy-MM-dd")}

时间格式可以根据后面格式调整，比如时分秒等等。

8、阅读量

${content.view_count!'0'}

注意阅读量，在文章内容页需要加入文章记数：

这样用户点击文章之后就会自动将阅读量+1了，由于这个阅读量加入了缓存，所以前后台显示的可能不一致，但是这个没什么影响。

9、评论数量

${content.comment_count!'0'}

 最后说一个大家可能遇到的问题，就是标题和文章摘要可能超长，影响美观，JPress原生的是有函数来支持截取特定长度的字符串的，但是我个人不推荐这种方式，虽然性能方面影响不大，但是能减少一些是一些，因为大家的服务器vps配置也不一定都是按高配搞的，包括jpress之家，都是采用css来控制截取的。

通过css来控制jpress标题或者摘要的长度主要依赖如下几个属性：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

基本文章列表用到的就这些了，掌握这些，文章列表基本应该可以完成了，希望能帮到你~