一、什么是產(chǎn)品分類組件？

產(chǎn)品分類組件：產(chǎn)品分類組件是在一個(gè)頁面上展示一級(jí)或多級(jí)產(chǎn)品分類（產(chǎn)品分組）的模塊，單擊某個(gè)產(chǎn)品分類可以快速查找對(duì)應(yīng)分類下所有的產(chǎn)品，這些產(chǎn)品以列表形式展示。產(chǎn)品分類的展示方式有樹狀分類展示、彈出式分類展示、折疊樹狀分類展示等多種風(fēng)格（在下文中有詳細(xì)介紹）。

二、產(chǎn)品分類組件的應(yīng)用場(chǎng)景主要有哪些？

一個(gè)頁面上只要需要展示產(chǎn)品分類并且產(chǎn)品需要按照不同的分類進(jìn)行篩選，都需要產(chǎn)品分類組件，將產(chǎn)品按不同的產(chǎn)品分類進(jìn)行過濾篩選是一個(gè)非常實(shí)用的方式。常用到的頁面有：系統(tǒng)頁面中的產(chǎn)品中心頁面的左側(cè)欄或右側(cè)欄、網(wǎng)站首頁。
系統(tǒng)頁面中的產(chǎn)品中心頁面，如下圖所示：

網(wǎng)站首頁，如下圖所示：

三、如何使用產(chǎn)品分類組件？

1、如何查看產(chǎn)品分類組件是否已經(jīng)存在？

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

2、如何添加產(chǎn)品分類組件？

在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？
添加的組件名稱為“產(chǎn)品分類”，如下圖所示：

3、如何設(shè)置產(chǎn)品分類組件？

進(jìn)入組件的“設(shè)置”分兩種情況：
1）此組件已經(jīng)添加好的情況：進(jìn)入所有這類組件設(shè)置項(xiàng)方法都是一樣的，可以參考這個(gè)攻略：如何進(jìn)入組件的設(shè)置項(xiàng)？
2）新添加的組件的情況：在添加此組件時(shí)會(huì)彈出這個(gè)組件的的設(shè)置話框。
在組件的設(shè)置中可以設(shè)置組件展示的內(nèi)容和風(fēng)格：

內(nèi)容：

組件標(biāo)題：在這里可以輸入組件標(biāo)題、若不輸入就不顯示此標(biāo)題欄；
請(qǐng)選擇產(chǎn)品分類：可以選擇展示所有的產(chǎn)品分類，也可以選擇只展示部分產(chǎn)品分類。若勾選“選擇部分產(chǎn)品分類”：支持對(duì)部分或所有產(chǎn)品分類進(jìn)行拖拽排序；

風(fēng)格：

單擊“分格”，切換到風(fēng)格頁簽，在這里可以選擇產(chǎn)品分類展示的風(fēng)格；
樣式選擇：您可以根據(jù)需要選擇產(chǎn)品分類的展示樣式，直接單擊相中的樣式就可以；
分類選中顏色：當(dāng)鼠標(biāo)選中某個(gè)產(chǎn)品分類時(shí)，產(chǎn)品分類的文字顏色可以在這里設(shè)置；

當(dāng)選擇以下紅框框起來的這兩種樣式時(shí)，支持做以下操作：

設(shè)置菜單展開：默認(rèn)收起是指當(dāng)產(chǎn)品分類有不止一級(jí)分類時(shí)，只展示一級(jí)分類其它層級(jí)的分類是收起來的狀態(tài)；全部展示是指把所有層級(jí)的產(chǎn)品分類都展開顯示；默認(rèn)展開二級(jí)菜單是指當(dāng)產(chǎn)品分類有三級(jí)四級(jí)五級(jí)分類時(shí)也只展示到二級(jí)菜單，更深層級(jí)都是收起的來的狀態(tài)，具體的情況大家可以點(diǎn)點(diǎn)看。
設(shè)置一級(jí)分類樣式：支持設(shè)置一級(jí)分類的以下樣式-->
文字大?。嚎梢苿?dòng)按鈕調(diào)節(jié)一級(jí)分類字體大小。
文字行高：可移動(dòng)按鈕調(diào)節(jié)一級(jí)分類字體大小。
文字顏色：可以更改文字顏色
文字懸浮顏色：可以更改鼠標(biāo)指到文字上懸停時(shí)文字顏色
文字風(fēng)格：加粗、文字傾斜和文字下劃線

更改完成產(chǎn)品分類內(nèi)容及風(fēng)格后，點(diǎn)擊右下方“保存”按鈕，保存所修改的內(nèi)容。

新添加的產(chǎn)品分類組件，需要單擊頁面右上角的保存和發(fā)布按鈕。
保存按鈕：起到保存到后臺(tái)的作用；
發(fā)布按鈕：?jiǎn)螕舭l(fā)布并提示發(fā)布成功，訪客才可以通過前臺(tái)網(wǎng)站看到。

四、根據(jù)需要還可以對(duì)這個(gè)組件做以下操作，具體請(qǐng)單擊以下鏈接了解。

1、單擊查看如何編輯組件的樣式？


組件的“編輯樣式”功能主要可以編輯此組件的以下內(nèi)容：組件尺寸、組件背景、組件邊框、組件邊距、文字字號(hào)、顏色等。

組件的“編輯樣式”功能，操作入口如下（所有組件的“編輯樣式”功能操作入口都是一樣的，以文章分類組件為例）：

2、單擊查看如何復(fù)制組件？


通過組件的復(fù)制功能，可以快速拷貝出一個(gè)同原組件一模一樣的組件，然后在這個(gè)組件的基礎(chǔ)上再做局部的修改，這樣省時(shí)省力省心。注意：通過復(fù)制組件生成的新組件，同原組件沒有關(guān)系，單獨(dú)編輯/刪除其中一個(gè)組件不會(huì)影響到另一個(gè)組件。此功能經(jīng)常用于頁面上要展示多個(gè)同類的組件，先設(shè)置好一個(gè)組件，然后通過復(fù)制組件功能將內(nèi)容樣式等設(shè)置項(xiàng)全部拷貝過去，然后再簡(jiǎn)單修改即可實(shí)現(xiàn)不同的內(nèi)容。
組件的“復(fù)制組件”功能，操作入口如下圖所示（所有組件的“復(fù)制組件”功能操作入口都是一樣的，以快速導(dǎo)航組件為例）：

3、單擊查看如何應(yīng)用組件？

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

4、單擊查看如何刪除組件？

如果確定不需要這個(gè)組件了，可以通過“刪除組件”按鈕把此組件刪除掉，被刪除的組件會(huì)默認(rèn)放到組件回收站中。
組件的“刪除組件”功能，操作入口如下（所有組件的“刪除組件”功能操作入口都是一樣的，以快速導(dǎo)航組件為例）：

5、單擊查看如何恢復(fù)組件？

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

四.組件優(yōu)化

1.產(chǎn)品分類組件新增懸浮在頁面的風(fēng)格；  （2017-12-28優(yōu)化）
 （1）新增風(fēng)格的應(yīng)用場(chǎng)景：在瀏覽產(chǎn)品的時(shí)候，產(chǎn)品分類需要可以懸浮在頁面上，方便在瀏覽產(chǎn)品的時(shí)候查找和定位產(chǎn)品。
 （2）新增風(fēng)格的操作方法 ：

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

2.產(chǎn)品分類組件新增置頂懸浮在頁面的風(fēng)格；   （2017-12-21優(yōu)化）
 （1）新增風(fēng)格應(yīng)用場(chǎng)景：該樣式在瀏覽產(chǎn)品的時(shí)候，產(chǎn)品分類可以置頂懸浮在頁面上，方便在瀏覽產(chǎn)品的時(shí)候查找產(chǎn)品分類。
 （2）新增風(fēng)格操作方法：

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

3.產(chǎn)品分類組件新增一種新風(fēng)格；   （2017-6-15優(yōu)化）
（1）新增風(fēng)格應(yīng)用場(chǎng)景：一級(jí)和二級(jí)縱向展開，三級(jí)、四級(jí)、五級(jí)子菜單向右橫向展開的風(fēng)格；
（2）新增風(fēng)格操作方法：

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