在Blocksy 2中，動(dòng)態(tài)數(shù)據(jù)塊具備強(qiáng)大功能，結(jié)合循環(huán)布局時(shí)展現(xiàn)出更高的靈活性。不論是在高級(jí)文章塊、高級(jí)分類(lèi)法塊，還是WooCommerce的產(chǎn)品集合塊中，動(dòng)態(tài)數(shù)據(jù)塊都能讓頁(yè)面內(nèi)容變得更加生動(dòng)豐富。本文將詳細(xì)講解動(dòng)態(tài)數(shù)據(jù)塊在循環(huán)中的應(yīng)用方法，幫助網(wǎng)站設(shè)計(jì)人員充分發(fā)揮Blocksy的潛力。

高級(jí)文章塊中的動(dòng)態(tài)數(shù)據(jù)塊應(yīng)用

在高級(jí)文章塊（Advanced Post Block）中，動(dòng)態(tài)數(shù)據(jù)塊的使用非常直觀(guān)。打開(kāi)Gutenberg編輯器的列表視圖，可以看到每篇文章由多個(gè)動(dòng)態(tài)數(shù)據(jù)塊組成，這些數(shù)據(jù)塊分別展示特色圖片、文章標(biāo)題、發(fā)布日期等內(nèi)容，并整體封裝在文章模板塊（Post Template Block）中。

文章模板塊負(fù)責(zé)在頁(yè)面上生成動(dòng)態(tài)更新的文章列表。每篇文章的數(shù)據(jù)會(huì)被自動(dòng)提取填充，形成連續(xù)的展示效果。在模板中只需添加一次動(dòng)態(tài)數(shù)據(jù)塊，所有文章項(xiàng)都能統(tǒng)一呈現(xiàn)，極大地提高了效率。需要調(diào)整時(shí)，也可以隨時(shí)添加新的數(shù)據(jù)內(nèi)容，比如在每篇文章下方添加發(fā)布日期。

這種布局結(jié)構(gòu)清晰，內(nèi)容模塊之間關(guān)系明確，能夠滿(mǎn)足多種頁(yè)面設(shè)計(jì)需求。

封面式布局的打造

在動(dòng)態(tài)數(shù)據(jù)塊設(shè)置中，將數(shù)據(jù)源設(shè)為特色圖片后，可以切換成封面展示模式。啟用封面顯示后，能夠在特色圖片上疊加其他信息，如標(biāo)題、日期、分類(lèi)術(shù)語(yǔ)等。

操作過(guò)程包括：

• 選擇動(dòng)態(tài)特色圖片塊
• 啟用封面顯示模式

• 將標(biāo)題、日期等動(dòng)態(tài)數(shù)據(jù)塊拖拽進(jìn)封面區(qū)域

• 調(diào)整排版樣式，使整體布局協(xié)調(diào)統(tǒng)一

這種封面式布局非常適合博客首頁(yè)、文章列表頁(yè)、作品展示頁(yè)等需要突出視覺(jué)效果的場(chǎng)景，讓頁(yè)面更具吸引力。

第三方循環(huán)塊中的動(dòng)態(tài)數(shù)據(jù)塊應(yīng)用

以WooCommerce的產(chǎn)品集合塊（Products Collection Block）為例，默認(rèn)情況下使用的是Gutenberg內(nèi)置基礎(chǔ)塊，如圖片和標(biāo)題，這些基礎(chǔ)塊在樣式和功能方面存在局限。

動(dòng)態(tài)數(shù)據(jù)塊可以直接替換默認(rèn)塊，它能夠自動(dòng)識(shí)別當(dāng)前環(huán)境，提取合適的數(shù)據(jù)，如：

• 產(chǎn)品圖片
• 產(chǎn)品標(biāo)題
• 產(chǎn)品價(jià)格
• 產(chǎn)品評(píng)分
• 庫(kù)存狀態(tài)
• SKU編號(hào)

替換后，可以自定義產(chǎn)品標(biāo)題的HTML標(biāo)簽結(jié)構(gòu)，調(diào)整特色圖片的寬高比，自由控制數(shù)據(jù)項(xiàng)的排列順序，進(jìn)一步豐富頁(yè)面展示。

通過(guò)靈活使用動(dòng)態(tài)數(shù)據(jù)塊，可以在不增加復(fù)雜度的情況下，獲得更精細(xì)的設(shè)計(jì)效果，使網(wǎng)站內(nèi)容呈現(xiàn)更加專(zhuān)業(yè)有序。

總結(jié)

Blocksy 2的動(dòng)態(tài)數(shù)據(jù)塊在循環(huán)結(jié)構(gòu)中的應(yīng)用，極大擴(kuò)展了頁(yè)面布局的自由度。不論是標(biāo)準(zhǔn)文章列表，還是復(fù)雜的產(chǎn)品集合展示，動(dòng)態(tài)數(shù)據(jù)塊都能夠輕松適配不同場(chǎng)景。配合封面模式與第三方循環(huán)塊的組合，網(wǎng)站內(nèi)容的表現(xiàn)力得到了明顯提升。

最近更新

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話(huà)：020-2206-9892
② QQ咨詢(xún)：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息