主題重做:一個新的基於塊的入門主題,用於使用 MVC 框架構建 WordPress 網站和古騰堡塊

在古騰堡之前的日子裡,WordPress 主題生態系統的成熟提供了數十種知名的入門主題的多樣化選擇,開發人員可能會找到適合他們個人喜好或可以輕鬆修改的主題。 主題作者經常 詢問是否有適合構建塊主題的入門主題,但目前真的只有少數,因為區塊主題時代才剛剛開始。

總部位於塞爾維亞的網路機構 WebREDONE 已開源其新的啟動主題, 主題重做,它為使用 MVC 框架構建網站和 Gutenberg 塊提供了基礎:

我們從 Laravel 和其他類似項目中汲取靈感,這些項目真正巧妙地處理了編碼的這一方面,並​​使組織和推理代碼變得輕而易舉。

在 Laravel 中,我們會為邏輯編寫普通的舊 PHP,然後我們會為視圖層使用 Blade 模板,我們還有模型、視圖和控制器文件來分離關注點並邏輯高效地組織代碼。 我們採用了相同的方法,但是是在 WordPress 環境的上下文中。 從概念上講,我們組織代碼的方式類似於 Laravel,但有一些不同。

Theme Redone 將這種方法引入了 Gutenberg 塊文件,確定了一個 模型.json, 控制器.php, 和 view.latte 文件。 它使用 Latte 模板引擎。 JSON 文件包含欄位模式以及傳遞給 controller.php 的數據,在傳遞給 view.latte 以在前端呈現之前,可以在其中對其進行過濾或修改。

theme-redone-a-new-block-based-starter-theme-for-building-wordpress-websites-and-gutenberg-blocks-with-an-mvc-framework Theme Redone:用於構建 WordPress 的新的基於塊的啟動主題帶有 MVC 框架的網站和 Gutenberg 塊主題重做拿鐵模板文件示例

入門主題使用 Gulp 4 和 ESBuild 進行編譯和監視任務,配置為支持 React、Svelte、Vue 和 Petite Vue 開箱即用。 它的 GitHub頁面 總結了框架中包含的所有內容:

  • 拿鐵模板引擎 因其優美的語法和更精簡、更易於管理的工作流程
  • EsBuild/Webpack + Gulp 任務任務 編譯 SCSS 和 JS
  • SCSS(SMACSS 文件夾/文件結構)
  • Javascript(ES8 和 React/Svelte/Vue 支持,感謝 EsBuild 和 Babel)
  • 主題內 構建古騰堡塊的框架 以精簡和標準化的方式
  • TRB CLI 腳手架新古騰堡塊的幫手
  • 准系統網格系統 用 Flex 和 CSS 變數編碼(大約 15 行代碼)
  • 輔助函數 用於渲染圖像、鏈接、SVG 代碼等重複性任務
  • 一些 編寫良好的 UI 組件 幫助您入門(我們不喜歡代碼中的臃腫):Modal、Accordion、Tabs、Menu、Dropdowns、Sliders 和簡單的「in view fade-in transitions」
  • SVG 支持
  • 特蕾西調試器 幫助我們確保編寫穩定且無錯誤的代碼

WebREDONE 開發了一種快速創建新塊的方法,通過其 TRB CLI(主題重做塊) NPM 包,它將立即使用單個終端命令創建一個新塊。 它包括一個自定義 UI 以及塊預覽圖像。 UI 在塊編輯器中看起來不合適,並且在用戶可用的控制項方面受到更多限制。 如果該機構正在創建未經用戶編輯的網站,這可能無關緊要,但這似乎令人困惑。

[embedded content]

該主題的創作者還寫了 50 頁文檔 在兩個月的過程中,包括如何開始、使用模板文件、主題的輔助函數、框架內的塊結構等等。

Theme Redone 是一個自以為是的入門主題。 WebREDONE 決定分享它,因為它可以節省他們的代理時間。 它可能並不適合所有人,但有趣的是,機構正在以多種方式發展其工具以在區塊時代更有效地構建網站。 查看主題重做 在 GitHub 上 有關詳細的安裝說明。

資源

相關文章