如何使用文章列表组件？

一、什么是文章列表组件？

 

文章列表组件是一个在网页上展示部分或所有文章的模块，支持分页展示，在文章系统中添加的文章需要通过文章列表组件在页面上展示出来，展示风格多种多样，可以是文章标题列表形式、文章标题+配图列表形式、首个文章突出展示的方式等（如下图所示）。

 

二、文章列表组件的应用场景主要有哪些？

文章列表组件一般应用在系统页面中的新闻动态页面、首页等，系统页面的新闻动态页面如下图所示：

 

三、如何使用文章列表组件？

1、如何查看文章列表组件是否已经存在？

系统页面中的新闻动态页面通常已经添加好了一个文章列表组件，直接根据需要对这个组件进行相应操作就可以。

像首页或其它页面没有添加好的话，就需要先添加一个文章列表组件。这就需要我们先学会查看要设置的组件是否已经存在了，如何查看某一块内容是使用什么组件制作的？如果不存在，就需要先添加这个组件。

2、如何添加文章列表组件？

在页面上添加组件的方法都是一样的，单击查看如何添加组件？

添加的组件名称为“文章列表”，如下图所示：

 

3、如何设置文章列表组件？

3.1 进入组件的“设置”分两种场景

1）此组件已经添加好的场景：进入所有这类组件设置项方法都是一样的，可以参考这个攻略：如何进入组件的设置项？

2）新添加的组件的场景：在添加此组件时会弹出这个组件的的设置话框。

3.2 在组件的设置中可以设置组件展示的内容

组件标题：即文章列表组件的标题，若输入，就会显示，显示位置如下图所示，若不输入，组件标题栏就不会出现；

选择显示分类下的文章：哪些文章分类下的文章需要显示，哪些不需要显示，就是在这个位置进行设置的，支持选择展示所有分类，也支持选择展示部分文章分类下的文章，在系统页面的“新闻动态”页面通常会选择展示所有文章分类（有时有的页面文章分类显示不出来，很有可能就是系统页面的“新闻动态”页面这里没有选择展示这个分类导致的），首页或其它页面根据需要可以展示部分文章分类下的文章。

分页展示：支持展示分页，也支持不展示；

每页文章数量：支持设置每页展示的文章数量；

显示更多链接按钮：通常用在非新闻动态页面，比如首页，效果如下图所示。单击小链子按钮会出现链接类型，如何选择呢？单击查看链接类型介绍。

3.3 在组件的设置中可以设置此组件的高级功能

分页刷新方式：页面全局刷新URL变化，即单击不同分页时，是全局刷新，页面URL会发生变化，有利于SEO，缺点是页面加在速度会稍慢；页面局部刷新URL不变，即单击不同分页时，是局部刷新，页面URL不变，页面打开速度会稍快，跟第1种比对SEO效果欠佳。

文章排序方式：支持文章排序，文章排序方式有：按修改日期升序/降序、按添加日期升序/降序、按发布日期/降序(可以在某一篇文章的编辑页面自定义发布时间)；
文章打开方式：支持当前窗口或者新窗口打开文章；
显示设置：可以根据需要选择是否显示文章分类、是否显示日期、选择日期展示格式、选择文章置顶时的标示、标题是否自动换行。

3.4 在组件的设置中可以设置组件内容的展示风格

列表样式：文章列表展示风格多种多样，有的不带文章附图、有的带文章图片，有的显示日期，有的不显示日期，有的突出显示第一条文章等，根据需要来选择；

选择的风格不一样，可设置的内容也不一样，比如第4种风格（第二排左数第1个），可以设置以下内容：

展示列数设置：支持设置为一列展示或两列展示；

图片大小：显示文章服务，在这里可以设置图片的宽度与高度；

添加列表图标：可以不显示图片，也可以选择喜欢的图标；

选择分页风格：可以自定义，分页按钮选中颜色、分页显示的位置；

比如，第10、11种风格（第四排，左数第1、2个），支持设置单条文章内容区背景色、单条文章的下边距（如下图所示）：

2017年10月，文章列表组件新增一种展示风格，该风格的特色在于：文章带图片并且一行图片在左一行图片在右依次展示，并且此风格在手机端单行显示时又能做到图片在上文字在下统一逻辑。

【演示示例】如下为该风格的展示效果，欢迎使用~

3.5 设置好文章列表组件的内容及风格、高级功能后，单击设置框右下方“保存”按钮，以保存所设置的。

4、保存、预览、发布

设置好以上内容以后要单击页面右上角的“保存”按钮，目的是把此修改保存到网站后台；

然后可以单击“预览”按钮查看不同终端下展示的效果，如果不合适可以到后台再做修改；

如果需要让访客也看到，请单击页面右上角的“发布”按钮，发布之后稍等两分钟左右即可看网站前台展示效果。

四.组件优化

 

1、文章列表组件增加一种新的时间线风格；

（1）新增风格应用场景：用户需要展示公司、产品的逐年发展变化时，可以使用新增的展示每年年份的时间线风格文章列表。

（2）应用效果：

         

2.文章列表新增一种展示风格；       （2017-10-19优化）

 （1）新增风格的应用场景：该风格当鼠标移动到文章列表时会变换背景色和文字颜色，简约大气，非常美观；

 （2）新增风格的操作方法：

（3）新增风格的应用效果：

3.文章列表组件新增一种月日年的展示风格；  （2017-10-12优化）

（1）新增风格应用场景：适用于月份用英语表达的用户，为用户提供多种风格；

（2）新增风格操作方法：

（3）新增风格应用效果：

4.文章列表组件新增一种简约风格；  （2017-9-7优化）

（1）新增风格的应用场景：不显示图片但是日期带背景色衬托；

（2）新增风格操作方法：

（3）新增风格应用效果：

5.文章列表组件更多链接新增nofollow功能；   （2017-6-1优化）

（1）新增功能应用场景：分页链接加上nofollow标签，避免分散当前页面的权重，在SEO方向做的更细致；

（2）新增功能操作方法：

6.文章列表组件优化风格11年份显示逻辑；   （2018-5-17优化）

（1）新增功能应用场景：风格11中，不同的年份都会显示在中间的年份圆圈中；

（2）新增功能操作方法：

（3）新增功能应用效果：

7.文章列表组件新增瀑布流排版风格。    （2018-6-14优化）

（1）新增风格应用场景：当用户网站中文章数量较多时，可以选择使用新增的瀑布流排版风格，为访问客户提供更加流畅舒适的阅读体验。

（2）新增风格操作方法：

（3）新增风格应用效果：

8、“文章列表”组件新增5个风格；（2019-7-23优化）
【应用场景】添加了5个新的“文章列表”组件风格，支持不同的新闻展示形式，欢迎大家选用；
【操作指导】如下图所示：