MDx Blog
MDx Blog

MDx 2.0 开发故事

MDx 2.0 开发故事

在咕咕咕了一年零三个月后,MDx 2.0 终于发布了。MDx 2.0 的承诺最早始于 2019 年 9 月,但由于 TO-DO List 实在太长,我最终选择了在 1.9.x 版本中分几次将原定于在 2.0 发布的特性提前发布。但由于各种事情的耽误(高考、上课、作业等),2.0 的最终版仍然承载了大量未发布的新特性,当然也伴随着超长时间的咕咕咕。现在,我终于可以说,MDx 2.0 正式发布了。趁这个机会,我来讲一讲在 2.0 开发过程中的那些故事和那些坑。

按惯例先附上更新日志:

改进了 主题古腾堡块样式
改进了 前端 Javascript 性能
改进了 设置界面排版
改进了 设置界面图片选择器
改进了 生成分享图的功能
改进了 赞赏二维码的设置
改进了 文末信息的样式
改进了 设置页面安全性
新增了 首页幻灯片 (#75)
新增了 Imgbox 显示描述文本功能
新增了 文章列表宽瀑布流功能
新增了 自定义一言 API 地址功能 (#112)
新增了 文章目录 h4-h6 支持 (#113, 感谢 @Yesterday17)
新增了 自定义发送评论按钮文本功能
新增了 从置顶文章获取推荐文章的功能
新增了 前端资源 CDN 功能 (#116)
新增了 文章时间显示位置设置
新增了 新增了文末推荐文章数量设置
新增了 RSS 社交图标
新增了 GitHub 短代码网关地址选项
新增了 繁体中文(香港)的翻译
修复了 ImgBox 相对路径问题 (#114)
修复了 GitHub 信息卡/文章信息卡在部分情况下无法正确获取数据的问题 (#129)
修复了 登录页 Material Design 样式与其他插件的兼容性
修复了 自动更新检查与其他插件的兼容性
修复了 古腾堡编辑器表格兼容性 (#134)
修复了 页脚在部分语言下出现 Javascript 错误的问题
修复了 长链接鼠标悬停样式
修复了 文章阅读进度开关功能
修复了 “加载更多评论”悬停提示
更新了 工信部链接
更新了 MDUI 至 1.0.1
更新了 土耳其翻译 (感谢 @Sn0bzy)
更新了 英语翻译 (感谢 @yechs)
更新了 正体中文(台湾)的翻译
移除了 jQuery 依赖

...以及更多改进与修复。

Bye jQuery

从我第一次接触前端到现在已经六年了。这六年里,前端生态已经发生了翻天覆地的变化。IE 已死,浏览器兼容性不再是难以解决的天坑;各类现代 Javascript 框架林立,再也不用手写各种别扭的 JS 了;CSS 规范不断更新,前端设计的技术束缚越来越少;Javascript 的生态快速发展,各类工具可以让开发者放心写出最新规范的代码而不用担心浏览器兼容性...对 MDx 来说,这也是时候抛弃 jQuery 并拥抱新的前端工具链了。于是,在 MDx 2.0 的计划中,我将移除 jQuery 依赖放在了第一项。

同时可以看出我咕咕咕了多久

同时可以看出我咕咕咕了多久

然而,移除 jQuery 不是简简单单说一句话就能实现的。实际上,在此前的开发中,MDx 累积的近 3000 行 JS 代码严重依赖 jQuery,抛弃 jQuery 就意味着 JS 部分需要几乎完全重写。与此同时,我还需要构建起相关的工具链来使重写更加方便快速。但重写的收益是可观的:代码性能更佳,体积更小,未来维护也会更加方便。

工具链方面,我还是选择了 Webpack + Babel 处理 Javascript 和其他资源辅以 Postcss 处理 CSS 的传统方案,同时 CSS 预处理器选择了 Less(其实并没有用到什么高级特性,所以可以无缝切换到 SASS)。而在 JS 方面,MDx 用到 jQuery 的部分特性如元素选择、AJAX 和动画我使用「现代」 JS 自己实现了一个简单版本,意外地表现还不错。最终,在折腾了将近一个月之后,我终于搭建起了工具链并完成了对 MDx 中依赖 jQuery 的部分的重写。

自己写的一些简单工具实现

自己写的一些简单工具实现

不过,考虑到部分用户在进行其他开发或使用其他插件时可能使用了 MDx 的jQuery,我在主题设置中添加了一个临时选项,打开后可以使主题继续在前端载入 jQuery 以方便用户进行迁移。

https://mdxblog.img.flyhigher.top/wp-content/uploads/2021/01/2021-01-23_21-23-53.png

在重写 JS 的过程中,我额外注意了 JS 文件的大小并进行了分割公用代码、按需延迟载入大型库等优化。最终结果是在 JS 总体加载大小基本不变的情况下,我实现了更好的性能和更多的功能。

在需要时动态载入大型库

在需要时动态载入大型库

设置界面重排版

在 MDx 2.0 之前的版本中,有多位用户曾反馈主题的设置界面组织不完善,简单粗暴的两个分类导致每个设置页都非常长,经常很难找到自己想找的设置项。在 2.0 中,我重新设计了主题设置页面的排版,并进一步划分设置项至更小的分类。新的设置页面看起来更有条理,寻找一项特定设置也更加方便。

新的「样式」设置页

新的「样式」设置页

同时,我也将图片选择模块更新为了更加现代的新版图片选择器,选择图片更加直观方便了。

https://mdxblog.img.flyhigher.top/wp-content/uploads/2021/01/media.jpg

当然,设置页的设计仍然有可以完善的空间。接下来,我可能会为主题设置页面加入搜索设置项功能。

国际化

在 MDx 2.0 中,我特别关注了主题的国际化质量。除了确保所有字符串都被纳入翻译外,我还检查了翻译文本的质量并进行了更新。此前主题的繁体中文翻译确实质量不高,在 2.0 中我也进行了整理更新,并拆分出了繁体中文(香港)的翻译。在两个繁体中文的版本中我都进行了额外的本地化,并咨询了有本地生活经验的人以改进翻译质量。

繁体中文找不同.jpg

繁体中文找不同.jpg

同时,感谢所有为主题的国际化做出贡献的人:

当然,主题的翻译还远算不上完美,支持的语言也很有限。如果各位有任何改进翻译的建议或是帮助翻译的想法,欢迎前往 GitHub 提出 issue 或 PR。

Gutenberg 编辑器支持

2.0 版本之前,MDx 对 WordPress 的新编辑器 Gutenberg 中块的支持非常基础(还是要感谢 Otstar Lin 对此的贡献)。从 2.0 开始,我将会逐步完善主题相关块的功能以完整发挥
Gutenberg 编辑器的优势。

在 2.0.0 中,我完善了主题相关块的样式,使其更加贴近实际样式。在未来版本中,我会进一步完善其预览机制,完整利用 Gutenberg 编辑器提供的功能。

https://mdxblog.img.flyhigher.top/wp-content/uploads/2021/01/blocks.jpg

同时,我也完善了主题相关块的国际化。在 2.0 版本中,主题相关块的编辑界面已经可以使用多语言显示了。

其他更新

除了上面提到的更改,MDx 2.0 还包含了大量新功能和问题修复,比如加入了(在设置页中并不显眼但确实是我花费了较多心思的)首页幻灯片和文章列表瀑布流。我推荐你在更新后检查一遍主题的设置页面,随意尝试新的选项和新的功能。

Enjoy MDx!

赞赏

推荐文章

Axton进行回复 取消回复

textsms
account_circle
email

MDx Blog

MDx 2.0 开发故事
在咕咕咕了一年零三个月后,MDx 2.0 终于发布了。MDx 2.0 的承诺最早始于 2019 年 9 月,但由于 TO-DO List 实在太长,我最终选择了在 1.9.x 版本中分几次将原定于在 2.0 发布的特性提前…
扫描二维码继续阅读
2021-01-23