aipage系統詳情頁(yè)模板設計

詳情頁(yè)模板決定了文章、產(chǎn)品、商品、預約等具體展示樣式，系統支持自定義詳情模板，最多支持每個(gè)分類(lèi)顯示對應的獨立的樣式效果。詳情模板包含內置版塊和自由設計兩種

1 內置詳情版塊

編輯器左上角頁(yè)面管理切換頁(yè)面系統頁(yè)面 -> 詳情模板進(jìn)入對應的系統詳情頁(yè)，以產(chǎn)品詳情模板為例，系統中內置了十幾種常見(jiàn)的詳情版塊效果，可以通過(guò)切換設計來(lái)快速更換

詳情版塊支持通過(guò)版塊設置來(lái)對界面數據和樣式進(jìn)行微調，基本上內置版塊的風(fēng)格比較固定，可改造程度低。

2 自由設計詳情版塊

自由設計模式則允許對詳情版塊進(jìn)行高自由度靈活設計，首先將詳情版塊切換成空白詳情自由設計版塊(詳情版塊不允許直接刪除，否則系統頁(yè)面可能因為缺失必要版塊而無(wú)法正常展示數據)。切換成空白模式后，則可以從左側拖拽元素自由設計，其中左側的專(zhuān)有元素表示只能在詳情頁(yè)中工作的詳情元素，例如詳情標題、詳情內容、詳情主圖等，還包括不同類(lèi)型的自定義參數展示。

因為詳情內容是動(dòng)態(tài)數據，不同的文章產(chǎn)品內容高度不一樣，實(shí)際預覽時(shí)自由模式設計的詳情頁(yè)內容高度將自動(dòng)撐開(kāi)，詳情內容下方的元素將自動(dòng)下移。

如何設計帶分隔線(xiàn)條的詳情效果呢？正常線(xiàn)條應該跟隨內容高度自動(dòng)變化。這種情況下只需要將詳情內容放入一個(gè)帶邊框的容器里即可，詳情內容的增高將自動(dòng)撐開(kāi)外圍容器，容器的邊框就形成了自動(dòng)高度的分隔線(xiàn)效果。

詳情頁(yè)也可以自由定制邊欄效果，例如添加垂直菜單元素綁定系統分類(lèi)就可以在詳情頁(yè)添加帶站點(diǎn)分類(lèi)的邊欄

詳情頁(yè)的動(dòng)態(tài)數據綁定是支持跨版塊的，即便是在多個(gè)版塊里依舊可以自動(dòng)綁定對應的數據，因此可以搭配生成更多的效果，例如詳情彈框里的元素同樣可以拖拽詳情標題等元素進(jìn)去，這樣點(diǎn)擊打開(kāi)彈框的時(shí)候可以看到動(dòng)態(tài)的內容。

部分內置詳情版塊支持錨點(diǎn)菜單導航效果，如果是自由設計模式，添加菜單到想要的位置，然后在菜單的點(diǎn)擊交互里設置錨點(diǎn)滾動(dòng)到相應的元素或者版塊即可。

發(fā)布者：水橋丶帕露西