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

JPress之家发布 开发教程 2016-10-07 1750

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

之前的文章添加了主题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;

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