两年前，笔者开发了一个基于nodejs的全栈开源cms系统XPCMS，主要是为了解决技术开发者自建内容平台的局限性，降低使用成本。虽然1.0版本已经完成，但是从整体部署和二次开发的角度来看，XPCMS在便捷性方面还有很多不足，更适合有一定技术功底的开发者。为了解决XPCMS的不足，去年笔者和小伙伴们专门开发了一款轻量便捷的内容管理系统——simpleCMS，目前在github上开源，PC端和移动端都能适配终端。市面上已经有很多成熟的cms系统，比如worldPress、博客系统hexo，对于技术开发者来说，使用和部署都很方便，但是定制和定制扩展方面，需要一定的技术门槛和开发成本。基于以上痛点和局限性，我们开发了全栈的cms系统，简单易用，天然支持服务器端渲染（SSR），让您轻松定制属于自己的Blog网站。接下来笔者就带大家分析一下simpleCMS的功能和技术实现。技术架构及实现方案为了降低您的使用和部署成本，我们采用了如下技术实现：服务层：koa2+nodejs+jsonSchema（当然也使用了大量的nodejs中间件）前端：pug（组合用nodejs实现前端同构，自然SSR）后台管理：umi3.0+react+antd+axios+typescript（当然用到很多前端插件，比如富文本，md编辑器）系统/server相关：linux/pm2/nginx基本架构模式如下图所示：系统页面架构图：功能分析接下来笔者将介绍一下simpleCMS的功能点。先来分析一下后台管理系统。后台管理系统功能分析后台管理系统是动态博客系统必不可少的一个模块，可以方便的管理我们的网站数据。在这里，笔者先带大家了解一下后台管理系统的基本模块：登录页面数据盘内容管理页面配置广告配置用户信息管理多语言支持以上就是cms管理系统的必备模块，这里我们基本使用reacthooks来写，具体页面如下：1登录页面2数据仪表盘3文章管理4内容编辑5moreLanguageSupportAdditionalPages就不一一展示了，有兴趣的朋友可以去体验一下。主要技术由umi+antd+react+typescript实现。有兴趣的可以参考github上的。前台基本功能分析前台主要是我们的博客网站，这里使用pug是一个模板引擎，交互功能使用大家最熟悉的jquery。前台的基本模块有：博客首页、文章列表页、文章详情页、相应的点赞、评论、文章搜索功能等交互功能。基本页面如下：1首页2列表页3详情页4评论点赞由于pug模板引擎适用于一些展示类网站，非常适合在cms系统中使用。我们也可以使用ejs等模板引擎。技术实现细节由于整个cms系统是一个完整的技术闭环和数据传输都是相关的。在这里，笔者主要总结一下实现一个cms的技术细节。数据统计功能的实现——利用nodejs定时任务（node-schedule）富文本和md编辑器实现后台多语言执行计划内容管理流程设计pug模板及数据交互jsonSchema数据结构设计手写简单加解密算法负载均衡多进程场景下的跨域解决方案及用户权限设计pm2管理节点进程及并发锁设计统计网站pv、单篇阅读量、点赞数。为了更好的分析，我们需要对一天的数据进行统计和存储。具体实现是使用定时任务统计一天结束前的数据。这里我们使用node-schedule来实现。笔者在之前的文章中也介绍了具体的使用方法。有兴趣的可以参考一下。基本用法如下：letschedule=require('node-schedule');lettestJob=schedule.scheduleJob('42****',function(){console.log('这段代码会在第42分钟执行未来的每个时刻，例如22:42、23:42');});富文本和md编辑编辑器方案的实现我们这里使用的富文本组件是braft，其功能和扩展性基本满足业务需求。md编辑器是程序员写博客的基本方式。这里主要是使用for-editor，其次是修饰。实现对剪切板功能支持的子包是的。主要用于多语言国际化方案的React-intl与umi结合得很好，所以我们只需要构建基本的多语言规则即可。比如在项目目录下创建一个locales文件夹，然后存放zh（中文）/en（英文）文件就可以了，基本代码如下：',CopyrightText:'SimpleCMSr&dteam',}//locales/zh/userexportdefault{simpleCMS_DESC:'简单易用的cms系统，帮助每个人拥有自己的网站和博客。',CopyrightText:'SimpleCMSR&DTeam'}如果对多语言实现感兴趣，可以参考simpleCMS源码。
