搭建内容管理系统CMS（3）：从原理、需求到设计，一文看懂动态化页面 .docVIP

搭建内容管理系统CMS（3）：从原理、需求到设计，一文看懂动态化页面 Sue前面分享的两篇文章，介绍了内容管理系统（CMS）关于内容生产和内容过滤的部分。那么被生产出来并通过过滤的内容，如何呈现给我们的内容消费者呢？ 我们都知道，在客户端上的开发实现，版本一旦发布了出去，如果有东西需要调整，那就要再修改代码，就算是再小的改动，都需要经过测试后再更新，而每一次的更新本身又存在可能出现各种各样问题的风险。 如果我们能提供动态可配置的能力，通过模板化来实现内容的呈现，那就可以减少开发的成本，同时也能够更高效地进行不同产品/运营方案的对比试验。 由此可知，页面动态配置是内容管理系统（CMS）关于如何更灵活地呈现内容的解决方案。 1.?页面拆解amp;组成部分 在这个“潮流眼镜专场”页面，Sue截了三张图，我们来一一拆解，看看这个页面都有什么： 一个带着黑超的王俊凯（图片） 一堆优惠券（优惠券领取/限定店铺优惠券使用入口模块） “超级大牌”（知名品牌的店铺入口模块） “必买清单”（热销/推荐商品的购买入口模块） …… 像这样一个动态化的页面，我们可以按以下3层次来拆分：页面——卡片——组件。 页面，指的是整体可滑动页面实体 卡片，指的是页面内可按行划分的一个一个独立区块（又称为”楼层”） 组件，指的是卡片内部一个独立的、业务级别的单元 三者之间的层级关系见下图： 2.?实现原理 弄清楚了动态页面的组成部分，那他们仨是如何联合起来工作的，最终呈现出我们所看到的页面内容呢？ 当用户访问某页面，到最后呈现出完整的页面内容，主要是通过以下三步完成的： 一系列的初始化（包括初始化卡片库和组件库、数据解析器、布局框架） 数据的解析（包括解析卡片和组件的类型，解析卡片和组件的基本样式） 对页面进行渲染（根据卡片提供的布局信息进行布局、根据组件提供的组件信息获取组件内容） 概括的说，就是：首先按照布局去解析出各组件位置，然后再去解析组件的内容（样式、图片、背景、链接等），最终解析出对应的自定义页面内容。 3. 要点说明 在聊动态化页面具体的配置流程之前，想和大家再多聊聊，Sue在学习和工作的过程中，总结和整理一些要点，然后通过这些来加深对整体的理解。 3.1 组件 它不是指显示的一行小字、一个明显扎眼的按钮，也不是一张帅哥美女的明星图片。它是需要提前定义好，并写入到框架（代码）中的。而组件定义的标准就是业务化，要求是能承担一定业务能力的最小复合单元。 这也基本可以说是作为PM定义需求的一大通用原则。 每个组件都需要单独设计，定义其规则和样式。 组件的基本样式：组件背景、组件外边距/内边距、组件的宽高比，除此之外还可能有额外的自定义样式如：字体颜色、字体大小、组件间的空隙，对应的跳转链接等等。 不同的组件有不同的功能，表示不同类型的内容。 组件的常见种类：搜索栏、公告、列表导航、富文本、标题栏、按钮组图文、按钮组文字、单张图片、图片轮播、优惠券等等。 3.2 卡片 卡片负责对组件进行布局。卡片不需要布局模板，只需要描述卡片的类型即可，卡片的类型也是注册在框架里的。 对卡片的描述，可分成：标题、布局和样式等。其中最重要的部分是：布局，因为它包含了内嵌的组件模型，卡片的布局就是对包含的组件来布局。 常见的布局方式：流式布局、瀑布流布局、吸顶布局、悬浮布局、轮播布局等。 卡片的布局描述也是声明式的，但只声明布局方式，不提供布局细节的描述。 卡片的基本样式：卡片背景、卡片外边距/内边距、卡片内组件间距、列数。 3.3 页面 动态化页面指的是布局动态化，是通过布局嵌套组件的形式搭建整个页面。一个页面内嵌套了多个卡片，一个卡片又嵌套了多个组件。 4. 步骤概要 明确了页面动态化的实现原理，那我们如果需要配置这么一个页面，需要提前准备什么，做什么？ 这里分前、中、后三个环节，来跟大家聊聊配置工作所涉及到的流程。 4.1 开始配置前 1）明确目的和重点 要配置的这个页面，运营目的是什么？ 通过页面，想呈现的内容是哪些？ 内容不同，要重点突出的信息是什么？ 2）确认已有设计和是否需要补充 已有的布局样式和组件，是否可以满足配置需求，进而达到运营目的？ 卡片库（布局样式）和组件库有无需要补充新增的？ 4.2 进行配置时 1）选择/创建页面 总体来说，页面需要支持动态化配置的情况有两种： 一是，对固有的页面进行选择性的配置（选择的标准会在文章最后和大家具体探讨）。 二是，依据具体运营目的，通常是活动或专题类的运营需求，创建一个新的页面，对页面进行自定义（不需要单独为了这个新页面去开发）。 2）选择卡片、然后选择组件进行布局排版 根据页面想呈现的内容和内容想突出的信息，在已有的卡片库（布局样式）和组件库，选择合适的布局样式和组件。 3）组件配置（定义样式、配置信息） 这一步会