Loading
0

基于古騰堡塊的WordPress主題應如何處理動態數據?

此前在的文章中提到過針對古騰堡塊的區塊模板和全站編輯趨勢:基于塊的主題開發,將引入塊模板文件,而且是html格式的文件。

今天看到了wptavern的一篇文章《基于塊的主題以及HTML模板中的動態數據問題》,覺得這個話題可能對于WordPress主題開發者來說,還是比較有引導意義的,簡單翻譯這里過來分享一下。

基于古騰堡塊的WordPress主題應如何處理動態數據?

古騰堡Gutenberg)項目及其最終的全站點編輯功能正在遇到一個重大問題,需要解決。未來基于塊的主題目前正朝著由純HTML文件組成的模板系統發展。盡管這對于主題的大部分輸出都是有效的,但麻煩在于弄清楚項目將如何處理動態值。

大多數討論都集中在處理URL上,URL可能是最常見的用例。當前,主題模板具有各種動態內容。隨著我們繼續進行全站點編輯,大部分內容將被替換為塊。但是,并非所有動態數據都具有等效塊。

一個很好的例子是主題作者當前無法將主頁URL添加到導航塊中。一些基于塊的實驗性主題使用的是簡單的/字符,它指向許多WordPress安裝中的錯誤位置。

盡早解決此問題對于在當今世界中主題開發的進展很重要。但是,需要精心設計這樣的解決方案,以使主題社區不會因模板實施不佳而陷入十年或更長時間的泥潭。

目前的建議

Gutenberg存儲庫當前有一張開放的工單,用于討論如何處理模板中的動態值。目前,有四個關于如何解決該問題的建議。

即時字符串替換

一種解決方案是使用PHP解析每個HTML文件,并動態替換表示動態數據的字符串。這將需要在每次頁面加載時解析所有主題模板。缺點是它將減慢頁面加載速度。我們將需要進行實際的單元測試,以查看此方法在加載時間上產生了多少峰值。

假設類似Mustache的語法,模板將具有諸如以下圖像輸出之類的值:

<img src="https://www.wpdaxue.com/{{ theme_image_example }}" />

采用這種解決方案的另一個好處是,WordPress默認可以自動轉義這些動態值。這將給主題安全帶來福音,這是主題審查團隊面臨的最大問題之一。

一次性字符串替換

第二種解決方案建議使用相同的方法,但是在主題激活后僅對HTML文件進行一次解析,然后用適當的值替換動態值。該方法的最大好處是解析不會影響前端加載速度。

此方法有問題,因為它在初始解析后并未考慮模板的更改。當值通過用戶輸入更改時,它也不處理方案。例如,用戶可以決定更改其博客文章頁面的位置。因此,已解析為靜態的URL將指向錯誤的位置。

模板轉化為JSON

第三種解決方案提出了將主題文件轉換為JSON的想法。從JSON文件中解析和提取數據比從HTML文件中解析和提取數據要容易得多。但是,主題設計器不會編寫JSON來生成模板輸出。HTML存在是有原因的。

該解決方案將給新的主題作者帶來極大的障礙,以至于那些剛剛學習了基本CSS和HTML的人都無法進入WordPress主題開發。這個想法與模板設計的想法太不一致,因此不應認真考慮。

通過PHP返回塊的模板

第四個也是最后一個建議是將PHP文件與返回塊模板的函數一起使用。這種方法非常簡單,對于熟悉PHP的現有主題作者來說,很容易采用。

模板如下所示:

function my_theme_front_page() { 	return '<!-- wp:cover {"url":"' . get_template_directory_uri() .'/block-background-image.png","id":273,"dimRatio":0,"minHeight":647,"align":"wide"} -->'; }

這個想法比HTML更加關注PHP。對于Gutenberg開發團隊來說,這將是最容易實現的解決方案。但是,就像JSON方法一樣,它將為新的WordPress主題作者增加入門難度。這將意味著確保引號和雙引號字符不會混淆。該方法容易出現錯誤,并且與現代模板無關。

模板應始終以HTML優先

模板應始終以HTML優先。即使在我們當前的主題系統中,主題作者也可以通過僅了解HTML和CSS來構建美觀、安全且功能豐富的主題。PHP是次要的,尤其是在模板方面。我們的模板系統依賴于了解HTML并插入一些模板標簽 ——這是WordPress提供的PHP函數——用于在HTML標簽之間插入。這種簡單性在某種程度上,使得WordPress主題開發對于愿意花一點時間的人來說如此容易學習的原因。

基于塊的主題有可能降低障礙,甚至低于我們當前的模板系統。但是,作為JSON或PHP函數的模板則與此相反。任何使我們遠離Web基本構件HTML的解決方案都不應放在討論桌上。

現在可能是采用適當的PHP模板引擎的時候了。有很多例子。Twig、Blade、Smarty等已經存在了多年。這些也以新語法的形式存在一些輸入障礙,但這應該比學習將模板標簽插入當前系統更容易一些。

至少,我們將需要找出一種在本質上是靜態HTML文件中處理動態數據的解決方案。