主题重做:一个新的基于块的入门主题,用于使用 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 上 有关详细的安装说明。

资源

相关文章