如何使用文章列表組件？

一、什麼是文章列表組件？

文章列表組件是一個在網頁上展示部分或所有文章的模塊，支持分頁展示，在文章系統中添加的文章需要通過文章列表組件在頁面上展示出來，展示風格多種多樣，可以是文章標題列表形式、文章標題+配圖列表形式、首個文章突出展示的方式等（如下圖所示）。

二、文章列表組件的應用場景主要有哪些？

文章列表組件一般應用在系統頁面中的新聞動態頁面、首頁等，系統頁面的新聞動態頁面如下圖所示：

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

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個新的“文章列表”組件風格，支持不同的新聞展示形式，歡迎大家選用；
【操作指導】如下圖所示：