倡萌此前在的文章中提到過針對古騰堡塊的區(qū)塊模板和全站編輯趨勢：基于塊的主題開發(fā)，將引入塊模板文件，而且是html格式的文件。
今天看到了wptavern的一篇文章《基于塊的主題以及HTML模板中的動態(tài)數(shù)據(jù)問題》，覺得這個話題可能對于WordPress主題開發(fā)者來說，還是比較有引導(dǎo)意義的，簡單翻譯這里過來分享一下。
古騰堡（Gutenberg）項目及其最終的全站點編輯功能正在遇到一個重大問題，需要解決。未來基于塊的主題目前正朝著由純HTML文件組成的模板系統(tǒng)發(fā)展。盡管這對于主題的大部分輸出都是有效的，但麻煩在于弄清楚項目將如何處理動態(tài)值。
大多數(shù)討論都集中在處理URL上，URL可能是最常見的用例。當前，主題模板具有各種動態(tài)內(nèi)容。隨著我們繼續(xù)進行全站點編輯，大部分內(nèi)容將被替換為塊。但是，并非所有動態(tài)數(shù)據(jù)都具有等效塊。
一個很好的例子是主題作者當前無法將主頁URL添加到導(dǎo)航塊中。一些基于塊的實驗性主題使用的是簡單的/字符，它指向許多WordPress安裝中的錯誤位置。
盡早解決此問題對于在當今世界中主題開發(fā)的進展很重要。但是，需要精心設(shè)計這樣的解決方案，以使主題社區(qū)不會因模板實施不佳而陷入十年或更長時間的泥潭。
目前的建議
Gutenberg存儲庫當前有一張開放的工單，用于討論如何處理模板中的動態(tài)值。目前，有四個關(guān)于如何解決該問題的建議。
即時字符串替換
一種解決方案是使用PHP解析每個HTML文件，并動態(tài)替換表示動態(tài)數(shù)據(jù)的字符串。這將需要在每次頁面加載時解析所有主題模板。缺點是它將減慢頁面加載速度。我們將需要進行實際的單元測試，以查看此方法在加載時間上產(chǎn)生了多少峰值。
假設(shè)類似Mustache的語法，模板將具有諸如以下圖像輸出之類的值：
<img src="{{ theme_image_example }}" />采用這種解決方案的另一個好處是，WordPress默認可以自動轉(zhuǎn)義這些動態(tài)值。這將給主題安全帶來福音，這是主題審查團隊面臨的最大問題之一。
一次性字符串替換
第二種解決方案建議使用相同的方法，但是在主題激活后僅對HTML文件進行一次解析，然后用適當?shù)闹堤鎿Q動態(tài)值。該方法的最大好處是解析不會影響前端加載速度。
此方法有問題，因為它在初始解析后并未考慮模板的更改。當值通過用戶輸入更改時，它也不處理方案。例如，用戶可以決定更改其博客文章頁面的位置。因此，已解析為靜態(tài)的URL將指向錯誤的位置。
模板轉(zhuǎn)化為JSON
第三種解決方案提出了將主題文件轉(zhuǎn)換為JSON的想法。從JSON文件中解析和提取數(shù)據(jù)比從HTML文件中解析和提取數(shù)據(jù)要容易得多。但是，主題設(shè)計器不會編寫JSON來生成模板輸出。HTML存在是有原因的。
該解決方案將給新的主題作者帶來極大的障礙，以至于那些剛剛學(xué)習了基本CSS和HTML的人都無法進入WordPress主題開發(fā)。這個想法與模板設(shè)計的想法太不一致，因此不應(yīng)認真考慮。
通過PHP返回塊的模板
第四個也是最后一個建議是將PHP文件與返回塊模板的函數(shù)一起使用。這種方法非常簡單，對于熟悉PHP的現(xiàn)有主題作者來說，很容易采用。
模板如下所示：
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更加關(guān)注PHP。對于Gutenberg開發(fā)團隊來說，這將是最容易實現(xiàn)的解決方案。但是，就像JSON方法一樣，它將為新的WordPress主題作者增加入門難度。這將意味著確保引號和雙引號字符不會混淆。該方法容易出現(xiàn)錯誤，并且與現(xiàn)代模板無關(guān)。
模板應(yīng)始終以HTML優(yōu)先
模板應(yīng)始終以HTML優(yōu)先。即使在我們當前的主題系統(tǒng)中，主題作者也可以通過僅了解HTML和CSS來構(gòu)建美觀、安全且功能豐富的主題。PHP是次要的，尤其是在模板方面。我們的模板系統(tǒng)依賴于了解HTML并插入一些模板標簽 ——這是WordPress提供的PHP函數(shù)——用于在HTML標簽之間插入。這種簡單性在某種程度上，使得WordPress主題開發(fā)對于愿意花一點時間的人來說如此容易學(xué)習的原因。
基于塊的主題有可能降低障礙，甚至低于我們當前的模板系統(tǒng)。但是，作為JSON或PHP函數(shù)的模板則與此相反。任何使我們遠離Web基本構(gòu)件HTML的解決方案都不應(yīng)放在討論桌上。
現(xiàn)在可能是采用適當?shù)腜HP模板引擎的時候了。有很多例子。Twig、Blade、Smarty等已經(jīng)存在了多年。這些也以新語法的形式存在一些輸入障礙，但這應(yīng)該比學(xué)習將模板標簽插入當前系統(tǒng)更容易一些。
至少，我們將需要找出一種在本質(zhì)上是靜態(tài)HTML文件中處理動態(tài)數(shù)據(jù)的解決方案。
