用drupal8自定義區(qū)域(1)——借用系統(tǒng)區(qū)塊仿制導(dǎo)航條
時間:2023-04-21 05:54:01 | 來源:網(wǎng)站運(yùn)營
時間:2023-04-21 05:54:01 來源:網(wǎng)站運(yùn)營
用drupal8自定義區(qū)域(1)——借用系統(tǒng)區(qū)塊仿制導(dǎo)航條:頁面由區(qū)域構(gòu)成,區(qū)域由區(qū)塊構(gòu)成,區(qū)塊可以嵌套。常用區(qū)塊:文字區(qū)塊、圖片區(qū)塊、鏈接區(qū)塊、按鈕區(qū)塊等,區(qū)塊劃分越細(xì),越容易管理。在自定義區(qū)域之前,要分析頁面,劃分區(qū)塊,準(zhǔn)備好每個區(qū)域的名稱,如下:
自定義區(qū)域通常3步即可完成,如下:
一、配置文件中自定義區(qū)域
在配置文件mytheme.info.yml自定義區(qū)域,保存并清空緩存。
需要說明的是,目前所有區(qū)域都沒有放置區(qū)塊,實(shí)際上放置了區(qū)塊也顯示不出來,因為在模板中沒有分配定義區(qū)域所要顯示的具體位置,簡單的說:制作標(biāo)簽,在模板中調(diào)用自定義的區(qū)塊。
二、模板文件中調(diào)用區(qū)域
在模板page--front.html.twig中使用{{ page.區(qū)域名稱 }}標(biāo)簽調(diào)用自定義的區(qū)塊,例如:{{ page.logo }}、{{ page.menu }}。
用自定義的標(biāo)簽替換對應(yīng)代碼前
用自定義的標(biāo)簽替換對應(yīng)代碼后
需要注意的是花括號與其內(nèi)的變量之間有一個空格。
三、后臺查看并放置區(qū)域(以仿制導(dǎo)航條為例)
在后臺管理/結(jié)構(gòu)/區(qū)塊布局頁面,查看并放置區(qū)塊(調(diào)用系統(tǒng)區(qū)塊)。依次進(jìn)入管理-->結(jié)構(gòu)—> 區(qū)塊布局-->標(biāo)識-->放置區(qū)塊,根據(jù)彈出的窗口,設(shè)置對應(yīng)參數(shù),保存即可。
四、預(yù)覽前端導(dǎo)航條仿制效果
經(jīng)過上面定義的區(qū)域、模板文件中調(diào)用區(qū)域、設(shè)置系統(tǒng)的區(qū)塊,3步完成,意味著前后臺就連接起來了,即仿站成功。最后,根據(jù)設(shè)計需求調(diào)試導(dǎo)航條樣式即可。
關(guān)鍵詞:導(dǎo)航,系統(tǒng),借用,定義,區(qū)域,仿制