在古腾堡之前的日子里,WordPress 主题生态系统的成熟提供了数十种知名的入门主题的多样化选择,开发人员可能会找到适合他们个人喜好或可以轻松修改的主题。 主题作者经常 询问是否有适合构建块主题的入门主题,但目前真的只有少数,因为区块主题时代才刚刚开始。
总部位于塞尔维亚的网络机构 WebREDONE 已开源其新的启动主题, 主题重做,它为使用 MVC 框架构建网站和 Gutenberg 块提供了基础:
我们从 Laravel 和其他类似项目中汲取灵感,这些项目真正巧妙地处理了编码的这一方面,并使组织和推理代码变得轻而易举。
在 Laravel 中,我们会为逻辑编写普通的旧 PHP,然后我们会为视图层使用 Blade 模板,我们还有模型、视图和控制器文件来分离关注点并逻辑高效地组织代码。 我们采用了相同的方法,但是是在 WordPress 环境的上下文中。 从概念上讲,我们组织代码的方式类似于 Laravel,但有一些不同。
Theme Redone 将这种方法引入了 Gutenberg 块文件,确定了一个 模型.json, 控制器.php, 和 view.latte 文件。 它使用 Latte 模板引擎。 JSON 文件包含字段模式以及传递给 controller.php 的数据,在传递给 view.latte 以在前端呈现之前,可以在其中对其进行过滤或修改。
主题重做拿铁模板文件示例
入门主题使用 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 上 有关详细的安装说明。