一、什么是文章分類組件？

 

文章分類組件是在頁面上展示一級或多級文章分類（文章分組）的模塊，單擊某個文章分類組件可以快速查找對應(yīng)分類下的所有文章，這些文章以列表形式展示。文章分類的展示方式有樹狀分類展示、彈出式分類展示、折疊樹狀分類展示等多種風(fēng)格。

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

一個頁面上只要展示文章分類并且需要按照不同的分類進行篩選，都需要使用文章分類組件來實現(xiàn)，將文章按不同的分類進行過濾篩選是一個非常實用的方式。大部分網(wǎng)站上通常會展示公司新聞動態(tài)、行業(yè)新聞動態(tài)、員工動態(tài)等內(nèi)容，可以把這些內(nèi)容按照上述內(nèi)容進行分類，使用文章分類組件來實現(xiàn)，通常顯示在系統(tǒng)頁面中的“新聞動態(tài)”頁面的左側(cè)欄或右側(cè)欄、網(wǎng)站首頁等頁面。

系統(tǒng)頁面中的“新聞動態(tài)”頁面，指下圖所示頁面：

三、如何使用文章分類組件？

1、如何查看文章分類組件是否已經(jīng)存在？

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

2、如何添加文章分類組件？

在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？

添加的組件名稱為“文章分類”，如下圖所示：

3、如何設(shè)置文章分類組件？

3.1 進入組件的“設(shè)置”分兩種場景

1）此組件已經(jīng)添加好的場景：進入所有這類組件設(shè)置項方法都是一樣的，可以參考這個攻略：如何進入組件的設(shè)置項？

2）新添加的組件的場景：在添加此組件時會彈出這個組件的的設(shè)置話框。

3.2 在組件的設(shè)置中可以設(shè)置組件展示的內(nèi)容

組件標(biāo)題：即文章分類組件的標(biāo)題，若輸入，就會顯示，顯示位置如下圖所示，若不輸入，組件標(biāo)題欄就不會出現(xiàn)；

選擇文章分類：哪些文章分類需要顯示，哪些不需要顯示，就是在這個位置進行設(shè)置的，支持選擇展示所有分類，也支持選擇展示部分文章分類，在系統(tǒng)頁面的“新聞動態(tài)”頁面通常會選擇展示所有文章分類（有時有的頁面文章分類顯示不出來，很有可能就是系統(tǒng)頁面的“新聞動態(tài)”頁面這里沒有選擇展示這個分類導(dǎo)致的），首頁或其它頁面根據(jù)需要可以展示部分文章分類。如果需要對文章分類進行排序的話，需要勾選“選擇部分文章分類”這個選項，然后用鼠標(biāo)左鍵按鈕分類進行拖拽排序；

3.3 在組件的設(shè)置中可以設(shè)置組件內(nèi)容的展示風(fēng)格

樣式選擇：有多種樣式可供選擇，選擇不同的樣式，支持設(shè)置的內(nèi)容是不一樣的：

1）如果選擇下圖所示圈起來的樣式，支持設(shè)置選中某個文章分類時的文字顏色；

2）如果選擇下圖所示樣式，支持設(shè)置選中某個文章分類時的文字顏色、支持設(shè)置菜單展開的樣式：默認(rèn)收起、全部展開、默認(rèn)展開二級菜單（若有5級菜單，只展開一級、二級菜單，其余都不展開）。

3）如果選擇下圖所示樣式，支持設(shè)置以下內(nèi)容：

支持設(shè)置選中某個文章分類時的文字顏色；

支持設(shè)置菜單展開的樣式：默認(rèn)收起、全部展開、默認(rèn)展開二級菜單（若有5級菜單，只展開一級、二級菜單，其余都不展開）；

支持設(shè)置一級文章分類字體大小、文字行高、文字顏色、文字懸浮顏色、文字風(fēng)格（加粗、斜體、加下劃線）。

3.4 設(shè)置好文章分類內(nèi)容及風(fēng)格后，單擊設(shè)置框右下方“保存”按鈕，保存所設(shè)置的內(nèi)容。

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īng)用到的頁面上編輯/刪除組件時，被應(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ù)組件？