发现上传的图片有点糊，可移步到腾讯文档：docs.qq.com/doc/p/0707b…
效果呈现：www.wlbank.com.mo/
注意：由于PublicCMS没有对上传的图片进行压缩，图片都是原图展示。上线后发现设计师上传图片没有选择压缩，上传的图片普遍是2MB左右，所以首页加载很慢很慢，这里是个待优化的点。
介绍
基于PublicCMS开源系统的二次开发的CMS系统。
具有可视化配置及管理、模板套用、多语言等功能。
PublicCMS官网：cn.bing.com/search?q=Pu…
系统说明
菜单配置
有4种菜单链接配置的方式
内容管理
可视化配置
业务可以在这里点击进行编辑。
模板配置
在这里可以编写HTML代码，点击元数据可以配置字段。
下图文件管理，这里上传一些CSS、JS、图片以及第三方依赖等文件。
下图是片段管理，常用于编写组件，可将模板各个代码片段抽离出来成独立的组件。
如：Header、Footer。
配置内容模型
内容模型视为内容的容器，不同的模型可展示不同形式的同一内容。
SEO
支持多语言SEO
前端功能实现
PC端约48张设计稿，移动端约47张设计稿。
双色模板
这里的开发思路是将标题、按钮作为输入框配置，再添加一个按钮URL输入框，而详情作为富文本配置，全部图片元素则视为一个整体的长方形透明（PNG)背景图片上传。
通过CSS奇偶数选择器动态让各个模块交替颜色（粉色、白色），文本靠左或靠右，文本区域占55%。
透明背景图
多语言
通过setCookie的方式记录语言的标识，后端通过取Cookie获得语言标识，返回相应的字段。
百度富文本添加繁简体互换
为便于业务操作，添加了繁简体一键互换的功能。
逻辑非常简单，就算对UEditor的html代码进行逐个比对，替换对应的繁（简）体。
去到CMS后台找到富文本代码，添加功能，再修改雪碧图（图标）。
具体操作记录在这里：juejin.cn/post/746936…
视频Banner
Playsinline 对于移动 Safari 浏览器来说是必需的，它允许视频播放时不强制全屏模式。
data-url是用于记录点击站外跳转的链接，data-contenturl表示站内跳转的链接。
渐变表格
这个页面我认为实现得比较麻烦，上方的slider原生开发，及下方的渐变色表格。
渐变色表格我一开始是使用table标签实现的，但是iOS真机测试的时候发现，每个td单元格会存在异常的圆角，很严重的兼容性问题。
调试无果后，我最后改成了div重新编写这个表格，再也没有异常显示了。
富文本展示
富文本的前端展示也是一项不可忽视的内容，业务往往是从word文档等地方复制粘贴到UEditor，粘贴的时候没有清除格式的话，会携带一个极端属性，如带有2000px的表格、图片，如果直接在页面展示的话，页面会被撑开。
除了这种异常场景外，还有不换行的英文单词、链接等，这些都会导致页面撑开，出现横向滚动条。
所以针对这些场景，我们需要编写一些css代码预防这些极端情况。
接口请求优化
有个请求是第三方接口，将近20s的请求时间。
该接口是返回常见问题的集合，基于这种场景，我将首次请求的信息和请求的时间戳一并存储在LocalStorage
每次进入该页面，判断时间戳如果是30分钟内则用缓存的数据，否则就重新请求接口。
调整后，页面从加载时间20s降为2s。
