Fecify 新架构模版

全新模版架构

一：前台商城

1.前端商城全部重写，采用liquid模版语法，

• 前台商城的首页，专辑列表，搜索，商品详情，账户中心，购物车，订单结账等全部重新编写

2.服务端渲染HTML

• 相较于vue模版，html的内容渲染在服务器完成
• 渲染后的html内容，可以进行全页缓存，提升速度和降低服务器压力
• 可以提升顾客的整体体验

3.更快的加载

• 服务端进行渲染html内容
• js采用defer加载机制，并尽量放到页面底部，加快页面内容的加载
• css采用分段方式，每个section对应的html上面加入对应的css文件，也就是分层式的加载css文件，保证尽快的渲染出来顶部内容
• 图片采用懒加载模式，先通过图片的尺寸将页面布局撑起来，避免页面显示内容坍塌，当图片加载后无缝替换，避免页面内容加载偏移

4.更好的seo评分

• 相较于vue模版，liquid模版服务端渲染，渲染过程中解决了页面偏移，以及解决js加载，css加载的问题，首屏页面加载更快
• https://pagespeed.web.dev/ 评分更高

5.支持模版二次开发

• 可以自己开发新的装修卡片
• 对现有的装修卡片内容进行修改
• 对接一些小的营销平台，可以自己添加营销js代码，进行js打点
• 用户对前端商城UI的需求是不可量化的，千变万化的，通过将模版的二次开发开放出来，可以更大化的支持客户的需求。

二：商家端后台-模版装修

1.商家端后台，模版装修逻辑，全部重写，全新支持liquid的新式模版装修

2.支持liquid模版语法的装修模式

3.卡片管理

• 新增装修卡片，支持卡片分组，卡片效果预览

4.多页面布局选择

• 商品详情页，支持多布局选择，每个商品可以指定不同的布局，进而可以实现不同的商品使用不同的模版装修布局（譬如：商品A选择页面布局1显示购物车按钮和价格，商品B选择页面布局2，不显示价格）
• 专辑详情页，支持多布局选择，每个商品专辑可以指定不同的布局（譬如：有的专辑使用grid布局，一行4个商品，有的专辑使用list布局，一行一个商品）
• 自定义页面，支持多布局选择
• 博客专辑，支持多布局选择（譬如：有的专辑使用grid布局，一行4篇文章，有的专辑使用list布局，一行1篇文章）
• 博客文章，支持多布局选择

5.更灵活的装修

• 每个卡片可以单独设置容器类型：默认，全宽，容器盒。可以自由设置任何一个卡片的宽度
• 动画：每个卡片可以单独设置加载显示的动画效果
• 自定义css：每个卡片可以设置专属的自定义css class，以及css代码内容，仅限该卡片使用
• 检查模式下，点击子卡片的内容，自动进入子卡片的装修配置，方便快捷
• 每个卡片可以设置单独的配色方案，自定义背景色，无论您是通用白色背景，还是暗黑风格，都可以快速高效的进行装修页面
• 卡片的标题，描述等都支持html格式，可以更方便的自定义内容
• 每个卡片都可以自定义上下边距

6.更丰富的卡片装修，支持42+卡片

• 支持更多的图文卡片
• 更多的商品，专辑卡片
• 支持更多的视频卡片，滑块等
• google地图，倒计时，宣传横幅，滚动促销等多种营销卡片

7.模版二次开发

• 通过模版，可以进入模版文件页面，可以看到模版的文件树，点击每个文件，可以看到文件的代码内容
• 您可以修改文件内容进行保存，修改的文件，将产生log日志内容，您可以查看每次模版代码文件修改的log日志内容
• 您可以删除修改的文件，删除后，将加载模版的默认文件代码内容
• 您可以添加新的文件，譬如开发一个新的模版卡片