我的名字是Rahul Saini。耶!?我已成功完成了与Joomla组织合作的GSoC项目的第一阶段。我是IIT Mandi计算机科学专业的最后一年的本科生。我正在为Joomla 4开发“前端即时编辑”功能。以下是我的旅程。
什么是 Joomla?
Joomla! 是一个屡获殊荣的内容管理系统(CMS),它可以帮助您构建网站和强大的在线应用程序。
Joomla 允许您创建安全且可扩展的网站。在几分钟内,您就可以完全掌控您的网站。您可以从Joomla! Launch启动一个新网站。关于Joomla最好的部分是它是开源的。
在Joomla网站上,用户可以访问主页,还有一个管理员面板来调整主页。下面:Joomla管理员面板和网站的快速游览。
Joomla管理员面板和网站的快速游览。
背景
Joomla 提供了两种修改和扩展网站的方法。一种是通过管理员面板,这是主要的方式。或者,您也可以从前端修改前端。例如,如果某篇文章中有打字错误,用户可以不离开前端直接编辑。另一个例子,假设横幅在页面底部,而这不是您想要的位置。您希望它在页面顶部。所以,您在前端有进行这样操作的选项。
动机
即时编辑是前端编辑的进一步发展。Joomla 的前端分为几个模块和一个主组件。每次您需要编辑东西时,Joomla 会将您重定向到一个带有一些预设值的表单。即时编辑的想法是在您只想更改一个字段时,不渲染包含所有设置的完整表单。如果有一个错字,点击这个单词,轻松修复它。无需转到另一个页面,然后寻找您想更改的字段。这个项目旨在提供快速进行小更改的功能,而无需页面刷新。
概念验证
尽管我对在线编辑内容的思想很着迷,但这并不是我最初的想法。在Joomla GitHub仓库中已经起草了一个Pull Request来展示这种可能性。这个PR的目的是激励Joomla社区进行在线编辑。另外,Joomla已经有了前端编辑功能,这证明了它也可以提供前端编辑的在线版。
目标
Joomla前端可以大致分为三个主要部分。所以,该项目旨在使Joomla网站的这些部分可以在线编辑。
- 文章标题及其正文,
- 模块标题及其内容,
- 自定义字段。
Joomla学习
Joomla文档非常棒。一篇写得好文档可以教会你很多东西。在过去的一个月里,"Joomla文档"这个关键词在我谷歌搜索中的热度上升。
要开始Joomla开发,你需要了解一些PHP知识以及对MVC设计模式的了解。一开始,我跟随了Joomla 3 MVC组件开发系列。尽管我没有完全掌握所有概念,但我确实跟完了整个教程。在这个阶段,我并不了解Joomla的所有工作部分,但我知道可能找到与某些功能相关的文件的位置。这就是你开始修复一些good-first-issues所需的一切。所以,我继续修复了Joomla GitHub仓库中的一些问题。
早期的想法/方法。
当我了解到MVC模式后,我想到我要创建新的控制器(用于处理传入的请求),修改一些视图(在onClick浏览器事件上渲染输入字段),并编写一个模型来将一个字段保存到数据库。这就是我添加在线编辑的方法。这是我在第一阶段主要做的事情。这种方法并没有错,它总是可以完美工作。但它需要一些修改以使其可重用。你可以在我的第二篇博客中阅读相关内容。
已完成的工作
文章标题、文章正文和自定义文本字段现在可以在线编辑了。下面:体验的简短视频。
在线编辑体验录制
GitHub Pull Request 文本自定义字段和文章在线编辑 · Pull Request
如果你想要关注开发进度,这是GitHub仓库。
编码部分总结
i) 使文章在线可编辑
- 一个处理带有单个字段请求的控制器(默认控制器期望一个完整的表单)
- 一个验证并保存单个字段的模型(默认模型验证并保存完整的表单)
- 添加了指向相关控制器的链接和类inline-editable到在线可编辑字段。一个JavaScript脚本遍历所有包含这个类的元素。它为这些HTML元素添加onClick事件,并在元素失去焦点时向相关控制器发出请求。
ii) 使自定义文本字段在线可编辑
- 在这个案例中,也执行了以上三个步骤。除JavaScript代码外,这部分被重用了。
前进的道路
我现在将重构我写的代码。主要焦点将是使其他核心和第三方组件容易添加在线编辑。下一个目标是使自定义字段在线可编辑,然后是模块。
感谢
我要感谢Joomla、我的导师们和Google,他们为我提供了这个具有挑战性和学习机会的项目。