第二次编码阶段已经结束，我们很高兴地通知您，页面构建器项目在过去几周取得了巨大进展！
简短总结：我们是 Franciska Periša 和 Nitish Bahl，是 Joomla! 项目“新前端模板：页面构建器”的 Google Summer of Code 的两名学生。
页面构建器使得用户可以在 Joomla 后端模板样式通过拖放编辑器设置前端模板位置。另外新增：新的前端模板 Apodis，它使用页面构建器生成前端部分的 HTML。使用 VueJS 开发，它（除了媒体管理器）是一种增强 Joomla! 的新方式，对我们和导师 Benjamin Trenkle、Anurag Kumar 和 Viviana Menzel 来说，这是一个令人兴奋的项目。
关于项目
当第二阶段开始时，我们继续之前的工作并专注于编辑器。最重要的任务之一是让编辑器能够调整网格中的列大小。在第一阶段，我们设法改变了网格和列的顺序，但用户在元素添加后无法改变大小。另一种方法是使编辑器中可用的元素可定制，并通过页面构建器插件进行扩展。直到七月，只能选择网格和预定义的列布局。
除了功能外，编辑器的界面也发生了很大变化。敬请期待截图！
新网格布局
为了在网格内部实现可拖动和可调整大小的列，我们使用了Vue.js组件vue-grid-layout。旧的拖动组件无法调整元素大小。新的组件为列的位置提供了很大的自由度（有时过于自由）并提供了诸如响应式、断点、RTL支持、边界检查、静态列等功能。编辑器布局是一个真正的挑战，因为它默认允许用户在任意位置放置列，而不仅仅是正确的位置。编辑器应该能够消除网格中的间隙，以便更容易渲染，因此我们投入了大量时间计算空闲空间、列位置以及防止重叠。由于网格应 behaves 如Bootstraps网格，我们添加了为列添加偏移量的选项。这是在布局中创建间隙的唯一有效方法。
可扩展元素
页面构建器应该像Joomla的其他部分一样：通过插件可自定义，因此拥有自己的内容元素。这意味着编辑器使用的元素应该以“智能”和“灵活”的方式实现。所有安装的页面构建器插件都会被触发并为它们的元素提供所有必要的数据。编辑器加载它们，并在点击[+]按钮时，用户有机会选择一个。可用的选择取决于父元素。
插件可以配置元素，并指定在编辑器中它应该出现的位置。例如，它可能仅作为根项目可用。当开发者不希望元素包含其他内容（除了模块位置）时，应该将属性“children”设置为“false”。对于父元素来说也是可能的。这样，第三方开发者就可以轻松地包含和自定义不是核心功能部分的元素。目前，有一些默认元素（可以被禁用）- 容器（如Bootstrap容器，将内容置于页面中间的元素）、网格、列和模块位置。
使用Vuex集成状态和方法
Vuex用于启用多个组件从中央Vuex存储获取状态，并且存储的状态变化时可以反应性地高效更新。使用Vuex使得页面构建器的代码库和架构更加模块化、高效，并为未来的扩展提供了可能。它还使我们能够跟踪更改状态的事件，并使用Vue Devtools Extension进行调试。
当前状态
在第二个编码阶段之后，我们可以提供
- 通过插件安装的元素
- 添加、编辑和删除元素
- 拖放重新排序元素
- 网格中的可调整大小的列
- 将布局保存为JSON格式的隐藏参数在#_template_styles表中
- 渲染前端站点部分
- 加载之前保存的网格
- 为模块位置设置模块chrome
问题
我们每周工作5天在页面构建器上，每天至少提交两次，并尝试在添加新功能的同时解决问题，但在这个阶段我们遇到了很多问题，耗费了很多时间，我们没有完成每一个计划在这个里程碑的任务。在一些会议中，我们发现自己反复讨论相同的话题，尤其是网格布局和列的行为。然后导师们试图找到问题的根源，以节省时间并重新取得实际进展，就像我们在第一阶段那样。我们决定停止在一个GitHub问题中将问题写入长的清单，而是开始为每个问题编写我们自己的独立问题，并附有详细描述（问题和期望的解决方案）以及大多数情况下的gif或截图。我们希望这将帮助我们快速轻松地解决问题，因为我们不再陷入循环中。我们确保牢记最后一个阶段正在进行，时间在飞逝…
未来计划
最后一个编码阶段已经开始了，我们希望实现最重要的任务，以稳定地完成GSoC页面构建器。
- 在编辑器中模拟bootstrap类
- 使用编辑器添加模块和组件
- 为响应式设置选择目标设备
- 改进网格布局
个人结论
这个阶段对我们来说是困难而激动人心的。会议既漫长又充满了讨论。那么学生的个人意见如何呢？
Nibish Bahl
在这个编码阶段，我们致力于一些幕后的特性，它们没有直接影响到页面构建器编辑器的外观和感觉，但对于使代码库模块化以供未来的开发和第三方开发者使用是至关重要的。在编码期的最后部分，我们解决了一些团队一直在努力的关键且长期存在的bug。我们就编辑器部分应使用哪个Vue组件进行了长时间且详细的讨论。总的来说，这是一个很好的学习经历，我们已经确定了在最后编码阶段要完成的关键交付物。
Franciska Periša
这个编码阶段对我来说没有第一个阶段那么有动力，因为我们 described 在相关章节中的问题。主要是我的任务来编程网格行为，我花了很多时间才理解导师们想象中的样子。所以我们迈出了很多小步骤，这有点令人沮丧。尤其是我们还有这个项目的许多其他任务，而我连续几周都在处理同一个任务。但是引入单独的GitHub问题，帮助我很多去理解问题，我能够更好地、更全面地修复它们。取得更多进展又激励了我，我了解到识别和描述问题以相应解决它们的重要性。我肯定会将这个经验带入我的未来项目和第三次编码阶段。
