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

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

二、文章列表組件的應(yīng)用場景主要有哪些？

文章列表組件一般應(yīng)用在系統(tǒng)頁面中的新聞動態(tài)頁面、首頁等，系統(tǒng)頁面的新聞動態(tài)頁面如下圖所示：

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

1、如何查看文章列表組件是否已經(jīng)存在？
系統(tǒng)頁面中的新聞動態(tài)頁面通常已經(jīng)添加好了一個文章列表組件，直接根據(jù)需要對這個組件進(jìn)行相應(yīng)操作就可以。
像首頁或其它頁面沒有添加好的話，就需要先添加一個文章列表組件。這就需要我們先學(xué)會查看要設(shè)置的組件是否已經(jīng)存在了，如何查看某一塊內(nèi)容是使用什么組件制作的？如果不存在，就需要先添加這個組件。

2、如何添加文章列表組件？
在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？
添加的組件名稱為“文章列表”，如下圖所示：
添加文章列表組件.png

3、如何設(shè)置文章列表組件？

3.1 進(jìn)入組件的“設(shè)置”分兩種場景
1）此組件已經(jīng)添加好的場景：進(jìn)入所有這類組件設(shè)置項(xiàng)方法都是一樣的，可以參考這個攻略：如何進(jìn)入組件的設(shè)置項(xiàng)？
2）新添加的組件的場景：在添加此組件時(shí)會彈出這個組件的的設(shè)置話框。

3.2 在組件的設(shè)置中可以設(shè)置組件展示的內(nèi)容
組件標(biāo)題：即文章列表組件的標(biāo)題，若輸入，就會顯示，顯示位置如下圖所示，若不輸入，組件標(biāo)題欄就不會出現(xiàn)；
選擇顯示分類下的文章：哪些文章分類下的文章需要顯示，哪些不需要顯示，就是在這個位置進(jìn)行設(shè)置的，支持選擇展示所有分類，也支持選擇展示部分文章分類下的文章，在系統(tǒng)頁面的“新聞動態(tài)”頁面通常會選擇展示所有文章分類（有時(shí)有的頁面文章分類顯示不出來，很有可能就是系統(tǒng)頁面的“新聞動態(tài)”頁面這里沒有選擇展示這個分類導(dǎo)致的），首頁或其它頁面根據(jù)需要可以展示部分文章分類下的文章。
分頁展示：支持展示分頁，也支持不展示；
每頁文章數(shù)量：支持設(shè)置每頁展示的文章數(shù)量；
顯示更多鏈接按鈕：通常用在非新聞動態(tài)頁面，比如首頁，效果如下圖所示。單擊小鏈子按鈕會出現(xiàn)鏈接類型，如何選擇呢？單擊查看鏈接類型介紹。

3.3 在組件的設(shè)置中可以設(shè)置此組件的高級功能
分頁刷新方式：頁面全局刷新URL變化，即單擊不同分頁時(shí)，是全局刷新，頁面URL會發(fā)生變化，有利于SEO，缺點(diǎn)是頁面加在速度會稍慢；頁面局部刷新URL不變，即單擊不同分頁時(shí)，是局部刷新，頁面URL不變，頁面打開速度會稍快，跟第1種比對SEO效果欠佳。
文章排序方式：支持文章排序，文章排序方式有：按修改日期升序/降序、按添加日期升序/降序、按發(fā)布日期/降序(可以在某一篇文章的編輯頁面自定義發(fā)布時(shí)間)；
文章打開方式：支持當(dāng)前窗口或者新窗口打開文章；
顯示設(shè)置：可以根據(jù)需要選擇是否顯示文章分類、是否顯示日期、選擇日期展示格式、選擇文章置頂時(shí)的標(biāo)示、標(biāo)題是否自動換行。

3.4 在組件的設(shè)置中可以設(shè)置組件內(nèi)容的展示風(fēng)格
列表樣式：文章列表展示風(fēng)格多種多樣，有的不帶文章附圖、有的帶文章圖片，有的顯示日期，有的不顯示日期，有的突出顯示第一條文章等，根據(jù)需要來選擇；

選擇的風(fēng)格不一樣，可設(shè)置的內(nèi)容也不一樣，比如第4種風(fēng)格（第二排左數(shù)第1個），可以設(shè)置以下內(nèi)容：
展示列數(shù)設(shè)置：支持設(shè)置為一列展示或兩列展示；
圖片大小：顯示文章服務(wù)，在這里可以設(shè)置圖片的寬度與高度；
添加列表圖標(biāo)：可以不顯示圖片，也可以選擇喜歡的圖標(biāo)；
選擇分頁風(fēng)格：可以自定義，分頁按鈕選中顏色、分頁顯示的位置；

比如，第10、11種風(fēng)格（第四排，左數(shù)第1、2個），支持設(shè)置單條文章內(nèi)容區(qū)背景色、單條文章的下邊距（如下圖所示）：

2017年10月，文章列表組件新增一種展示風(fēng)格，該風(fēng)格的特色在于：文章帶圖片并且一行圖片在左一行圖片在右依次展示，并且此風(fēng)格在手機(jī)端單行顯示時(shí)又能做到圖片在上文字在下統(tǒng)一邏輯。

【演示示例】如下為該風(fēng)格的展示效果，歡迎使用~

3.5 設(shè)置好文章列表組件的內(nèi)容及風(fēng)格、高級功能后，單擊設(shè)置框右下方“保存”按鈕，以保存所設(shè)置的。

4、保存、預(yù)覽、發(fā)布
設(shè)置好以上內(nèi)容以后要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網(wǎng)站后臺；
然后可以單擊“預(yù)覽”按鈕查看不同終端下展示的效果，如果不合適可以到后臺再做修改；
如果需要讓訪客也看到，請單擊頁面右上角的“發(fā)布”按鈕，發(fā)布之后稍等兩分鐘左右即可看網(wǎng)站前臺展示效果。

根據(jù)需要還可以對這個組件做以下操作，具體請單擊以下鏈接了解。

5、單擊查看如何編輯組件的樣式？
組件的“編輯樣式”功能主要可以編輯此組件的以下內(nèi)容：組件背景、組件邊框、組件邊距、文字字號、顏色等，根據(jù)需求選擇使用；
組件的“編輯樣式”功能操作入口：所有組件的“編輯樣式”功能操作入口都是一樣的，具體操作方法請單擊查看如何編輯組件的樣式？

6、單擊查看如何應(yīng)用組件？
通過組件的“應(yīng)用組件”功能，可以將當(dāng)前頁面的組件應(yīng)用到其他頁面上，因?yàn)樵砩纤鼈兪峭粋€組件，所以在任何被應(yīng)用到的頁面上編輯/刪除組件時(shí)，被應(yīng)用的頁面會一起變化，這個是“應(yīng)用組件”和“復(fù)制組件”最本質(zhì)的區(qū)別。此功能經(jīng)常用于面包屑導(dǎo)航、產(chǎn)品分類組件、文章分類組件等。被應(yīng)用過去的組件會出現(xiàn)在頁面的最底端，可以用鼠標(biāo)左鍵按住組件名稱拖動到需要的位置；
組件的“應(yīng)用組件”功能操作入口：所有組件的“應(yīng)用組件”功能操作入口都是一樣的，具體操作方法請單擊查看如何應(yīng)用組件？

7、單擊查看如何刪除組件？
如果確定不需要這個組件了，可以通過“刪除組件”按鈕把此組件刪除掉，被刪除的組件會默認(rèn)放到組件回收站中。
組件的“刪除組件”功能操作入口：所有組件的“刪除組件”功能操作入口都是一樣的，具體操作方法請單擊查看如何刪除組件？

8、單擊查看如何恢復(fù)組件？
如果需要恢復(fù)已經(jīng)刪除的組件，可以到組件回收站中，找到對應(yīng)的組件，然后執(zhí)行【還原】操作，即可恢復(fù)此組件到原有的頁面上，通常會位于頁面的最底端。
恢復(fù)組件的操作入口：所有組件的恢復(fù)功能操作入口都是一樣的，具體請單擊查看如何恢復(fù)組件？

四.組件優(yōu)化

1、文章列表組件增加一種新的時(shí)間線風(fēng)格；
（1）新增風(fēng)格應(yīng)用場景：用戶需要展示公司、產(chǎn)品的逐年發(fā)展變化時(shí)，可以使用新增的展示每年年份的時(shí)間線風(fēng)格文章列表。
（2）應(yīng)用效果：

2.文章列表新增一種展示風(fēng)格；       （2017-10-19優(yōu)化）
 （1）新增風(fēng)格的應(yīng)用場景：該風(fēng)格當(dāng)鼠標(biāo)移動到文章列表時(shí)會變換背景色和文字顏色，簡約大氣，非常美觀；
 （2）新增風(fēng)格的操作方法：

（3）新增風(fēng)格的應(yīng)用效果：

3.文章列表組件新增一種月日年的展示風(fēng)格；  （2017-10-12優(yōu)化）
（1）新增風(fēng)格應(yīng)用場景：適用于月份用英語表達(dá)的用戶，為用戶提供多種風(fēng)格；
（2）新增風(fēng)格操作方法：

（3）新增風(fēng)格應(yīng)用效果：

4.文章列表組件新增一種簡約風(fēng)格；  （2017-9-7優(yōu)化）
（1）新增風(fēng)格的應(yīng)用場景：不顯示圖片但是日期帶背景色襯托；
（2）新增風(fēng)格操作方法：

（3）新增風(fēng)格應(yīng)用效果：

5.文章列表組件更多鏈接新增nofollow功能；   （2017-6-1優(yōu)化）
（1）新增功能應(yīng)用場景：分頁鏈接加上nofollow標(biāo)簽，避免分散當(dāng)前頁面的權(quán)重，在SEO方向做的更細(xì)致；
（2）新增功能操作方法：

6.文章列表組件優(yōu)化風(fēng)格11年份顯示邏輯；   （2018-5-17優(yōu)化）
（1）新增功能應(yīng)用場景：風(fēng)格11中，不同的年份都會顯示在中間的年份圓圈中；
（2）新增功能操作方法：

（3）新增功能應(yīng)用效果：

7.文章列表組件新增瀑布流排版風(fēng)格。    （2018-6-14優(yōu)化）
（1）新增風(fēng)格應(yīng)用場景：當(dāng)用戶網(wǎng)站中文章數(shù)量較多時(shí)，可以選擇使用新增的瀑布流排版風(fēng)格，為訪問客戶提供更加流暢舒適的閱讀體驗(yàn)。
（2）新增風(fēng)格操作方法：

（3）新增風(fēng)格應(yīng)用效果：