从零打造一款轻量且天然支持SSR的CMS系统——simpleCMS
优采云 发布时间: 2022-05-11 19:37从零打造一款轻量且天然支持SSR的CMS系统——simpleCMS
2年前笔者开发了一款基于nodejs的全栈开源cms系统XPCMS, 主要是为了解决技术开发者搭建自身内容平台的局限以及降低使用成本, 虽然1.0版本已经完成, 但是从整体部署和二次开发的便捷度上还是存在很多缺点, 更加适合有一定技术能力的开发者来使用.
为了解决XPCMS的不足, 去年笔者和朋友特地开发了一款轻量便捷的内容管理系统——simpleCMS, 目前已在github上开源, 且能同时适配PC端和移动端.
目前市面上已经有很多成熟的cms系统, 比如worldPress, 博客系统hexo, 对于技术开发者来说使用和部署很简单, 但是定制和自定义扩展方面, 却需要一定的技术门槛和开发成本.
基于以上一些痛点和局限, 我们开发了一款简单易用, 且天然支持服务端渲染(SSR)的全栈cms系统, 方便大家轻松定制自己的博客网站. 笔者接下来就来带大家一起分析simpleCMS的功能和技术实现.
技术架构和实现方案
为了降低大家的使用和部署成本, 我们采用了如下技术实现:
基本架构模式如下图所示:
系统页面架构图:
功能分析
接下来笔者就来介绍simpleCMS的功能点. 我们先来分析一下后台管理系统.
后台管理系统功能分析
后台管理系统是动态博客系统必备的模块, 它能很方便的管理我们的网站数据. 这里笔者先来带大家看一下后台管理系统的基本模块:
以上是cms管理系统必备的模块, 这里我们基本上采用react hooks来写, 具体页面如下:
登录页面
数据大盘
文章管理
内容编辑
多语言支持
其他页面就不一一展示了, 感兴趣的朋友可以体验一下. 主要技术采用umi + antd + react + typescript实现, 感兴趣可以在github上参考学习.
前台基本功能分析
前台主要是我们的博客网站, 这里采用pug这个模版引擎来实现, 交互功能使用大家最熟悉的jquery.前台基本模块有:
对应的交互功能有点赞,评论,文章搜索功能等, 基本页面如下: