在古腾堡之前的日子里,成熟的 WordPress 主题生态系统提供了数十个知名入门主题的多样化选择,开发人员可能会找到适合他们个人喜好或可以轻松修改的主题。主题作者经常会问有没有适合积木主题的入门主题,但目前真的只有那么几家,因为积木主题的时代才刚刚开始。

塞尔维亚网络机构 WebREDONE 开源了其新的启动主题 Theme Rework,它为使用 MVC 框架构建网站和古腾堡块提供了基础:

我们从 Laravel 和其他类似项目中汲取灵感,这些项目真正巧妙地处理了编码的这一方面,并​​使代码的组织和推理变得轻而易举。

在 Laravel 中,我们为逻辑编写普通的旧 PHP,然后我们为视图层使用 Blade 模板,我们还有模型、视图和控制器文件来分离关注点并在逻辑上有效地组织代码。我们采用了相同的方法,但在 WordPress 环境的上下文中。从概念上讲,我们组织代码的方式与 Laravel 类似,但有一些不同。

Theme Redone 将这种方法引入了 Gutenberg 块文件,定义了 model.json、controller.php 和 view.latte 文件。它使用 Latte 模板引擎。 JSON 文件包含字段架构以及传递给 controller.php 的数据,在传递给 view.latte 以在前端呈现之前可以对其进行过滤或修改。

主题redo latte模板文件示例

入门主题使用 Gulp 4 和 ESBuild 进行编译和监控任务,配置为开箱即用地支持 React、Svelte、Vue 和 Petite Vue。它的 GitHub 页面总结了框架中包含的所有内容:

  • Latte 模板引擎以其优雅的语法和更精简、更易于管理的工作流
  • EsBuild /Webpack + Gulp tasks task to compile SCSS 和 JS
  • SCSS(SMACSS 文件夹/文件结构)
  • Javascript(ES8 和 React/Svelte/Vue 支持,感谢 EsBuild 和 Babel)
  • 框架用于以简化和标准化的方式在主题内构建古腾堡块
  • TRB CLI 新古腾堡块的脚手架助手
  • 准系统网格系统 Flex 和 CSS 变量编码(约 15 行代码)
  • 用于渲染图像、链接、SVG 代码等重复性任务的辅助函数
  • 一些编写良好的 UI 组件可帮助您入门(我们不喜欢代码膨胀):Modals、手风琴、选项卡、菜单、下拉菜单、滑块和简单的“视图淡入过渡”
  • SVG 支持
  • Tracey 调试器帮助我们确保编写稳定且无错误的代码

WebREDONE 已开发d 一种快速创建新块的方法,通过其 TRB CLI (Theme Redo Blocks) NPM 包,它将使用单个终端命令即时创建一个新块。它包括自定义 UI 以及块预览图像。 UI 在块编辑器中看起来格格不入,并且用户可用的控件更受限制。如果该机构正在创建未经用户编辑的网站,这可能无关紧要,但这似乎令人困惑。

[嵌入内容]

主题的创建者还在两个月的时间里写了 50 页的文档,涵盖了如何开始、使用模板文件、主题的辅助函数、Block框架内的结构等等。

Theme Redone 是一个自以为是的入门主题。 WebREDONE 决定分享它,因为它可以节省他们的代理时间。它可能并不适合所有人,但有趣的是看到机构正在以多种方式改进其工具以在区块链时代更有效地构建网站。查看 GitHub 上的 Theme Rework 以获得详细的安装说明。

资源