欢迎来到我们的博客文章，关于谷歌暑期开源项目 Joomla 项目的新 Joomla 4 前端模板：页面构建器首次编码阶段。
在聚集团队并确定即将进行的工作的里程碑的一个月后，我们已经开始使用 JavaScript 框架 Vue.js 进行工作。
编码阶段已经开始了，我们每天都在努力工作，以达到我们项目的目标：页面构建器，它使得可以通过直观的拖放编辑器定义模板位置。
团队
我们是谁，这个项目的工作人员？
- 这个项目的导师是 Anurag Kumar、Benjamin Trenkle 和 Viviana Menzel。他们每个人都在这个项目的不同方面提供帮助，拥有多年的 Joomla 经验。Anurag 对 Vue.js 非常了解，Viviana 对编辑器本身提供反馈，Benjamin 分享关于在 Joomla 核心中实现的知识。
- 开发页面构建器的两名学生是
- Franciska Periša，德国 TH Mittelhessen 应用科学大学计算机科学硕士在读
- Nitish Bahl，印度 Birla Institute of Technology and Science 电气与电子工程本科学生。
我们每周五都会讨论上周完成的工作、问题、想法和反馈。每次会议结束时，我们会列出下周要完成的任务。除了这些会议，我们会尽力每天分享我们的进展和我们打算做的事情。就这样，我们一步一步地向目标迈进。
关于这个项目背后的人已经说得够多了，我们到底在开发什么？
关于项目
项目“新 Joomla 4 前端模板：页面构建器”主要关注一个编辑器，它使得可以通过拖放 GUI 给模板样式定义自定义位置。
用户应该能够不编写代码、HTML 或 CSS 就创建前端构建。
第一个实现渲染结果可以在为这个项目创建的新前端模板“Apodis”中看到。
编辑器
要定义位置，用户可以在模板样式菜单中打开页面构建编辑器。这里首先是创建容器网格的第一个选择。之后，可以将元素添加到网格中，这些元素可以包含模块甚至是另一个网格，以便将构建分成用户想要的任意数量的部分。容器、网格、模块位置等元素是动态内容，这意味着第三方开发者可以通过插件添加他们自己的元素并修改现有的元素。这创造了几乎无限的可能性。
为了调整页面构建，编辑器为元素提供了拖放和调整大小的功能。这使得使用编辑器并创建自己的位置变得非常容易。此外还实现了添加自定义CSS类名的选项。
页面构建器“树”的“叶子”是Joomla内置元素：组件、模块和消息。它们输出用户熟悉的页面内容，来自默认Joomla模板的行为。编辑器将使得编辑每个元素、为每个位置选择模块Chrome以及在需要时添加新列成为可能。编辑器的输出是一个JSON对象，包含每个元素的类型、选项和子元素，该JSON对象存储在template_styles表的隐藏参数字段中。
从技术角度来看，大部分工作都在Vue.js中完成。在这里我们使用了不同的开源可下载组件
- 可拖动组件来拖放网格元素
- Vue-js-modal来显示添加元素的模态窗口
- Vuetify用于左侧的抽屉
Apodis
起初，创建的网格的渲染被集成到了Cassiopeia中，但在出现一些问题并进行会议后，新的方法应该会在一个新的前端模板中可见：Apodis。
模板设计的新星在index.php中获取页面构建器元素并直接显示渲染的输出。这对于独立测试非常有帮助，在独立测试中，样式表不会干扰默认行为，就像尝试在Cassiopeia中包含渲染时那样。
它是这样工作的：在index.php中调用com_templates的帮助函数，并递归地遍历从#_template_styles表获得的JSON参数，该参数包括类型、位置和保存的页面构建器元素的所有信息。根据类型和选项，渲染会改变或添加HTML。在未来，渲染器将观察页面构建器插件及其期望的渲染。
当前状态
在第一次编码阶段完成后，我们可以提供
- 添加具有预定义布局的网格
- 编辑网格 - 用户可以给元素添加自定义类
- 删除网格
- 在网格中添加可选大小的列
- 编辑列的类
- 删除列
- 拖放重新排序网格和列
- 将布局保存为#_template_styles表中的隐藏参数作为JSON
- 通过解析JSON参数渲染前端站点部分
- 加载之前保存的网格
- 添加自定义元素作为页面构建器插件的选项（进行中）
问题
在我们工作的开始，我们尝试使用与com_media及其Vue.js文件相同的实现方式。这些文件位于组件自身的资源文件夹中，具有自己的package.json、node_modules文件夹和webpack文件。
我们希望尽可能保持一致，但在提交不应该影响该部分的提交后，Drone测试失败，首先出现了问题。webpack版本与我们的文件有问题，因此我们需要使用更新版本更改结构。当前的状态是我们把所有的Vue.js文件和scss文件移动到了media_source/build/com_templates，通常这些文件都在这里。在将webpack添加到Joomla根目录后，Drone又满意了。
新结构可以在图片中看到
未来计划
我们正在正确的道路上，但还有更多的工作要做！在接下来的编码阶段，一些较大的部分和许多小事情都在等待我们去开发
- 将模块位置与预定义的模板位置同步
- 选择模块和组件
- 为响应式设置选择目标设备
- 完全实现插件
- 增强用户界面
个人结论
到目前为止，项目进度是主要关注点，但作为两个参与此项目的学生，我们对GSoC的经历以及在内 Joomla 的工作有什么个人想法呢？
Nitish Bahl
长久以来，我的梦想是开发一个任何人都可以免费使用的应用程序。
当我第一次在大学听说Google Summer of Code，并且刚开始学习编码时，我非常着迷于与一个长期的开源组织合作，修复或增强一些将被全世界人们使用的功能。
GSoC之前，我对网页开发、PHP和JavaScript的了解有限，我希望通过在一个实际项目中的实践工作来提高我的技能。
Joomla具有非常对新手友好的文化，鼓励新开发者的贡献。导师和成员总是尽可能快地提供帮助和资源。我觉得为开源组织贡献是增加社区/同行互动、提高编程技能和在工作于实际项目和倡议中获取经验的最佳方式，像GSoC这样的活动有助于提高认识和为新的开发者提供与像Joomla这样出色的组织连接的平台。
Franciska和我正在与我们的导师一起工作，使页面构建器对于初学者尽可能容易使用，同时足够灵活，以便通过第三方开发者的插件扩展功能。
Franciska Periša
这个项目是一个很好的经历，每天工作在快速成长的事物上，但同时也具有有限的时间，时间也飞逝。我已经在Joomla中进行了开发，但是页面构建器是一个完全新的挑战，因为涉及到Vue.js。
有时候，实现起来可以很简单，但还有很多耗时且不易解决的问题。Vue.js有很好的文档，但组件的文档并不总是这样。另一个问题是使用webpack和npm来构建脚本。我之前从未真正处理过网页开发的这一部分，但我学会了如何做。
总的来说：学习新东西是驱使我申请这个项目的一个大动力，到目前为止，我没有失望！
非常有趣的是，与Nitish一起工作。我们有着不同的背景，但我们一起朝着同一个目标努力。到目前为止，我们公平地分配了工作，甚至没有大的冲突。我期待着下一个编码阶段，我相信我们的工作将越来越紧密地结合在一起，成为我们对页面构建器的愿景。
