Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

组件

直接拖动使用，每个组件对应生成html标签、CSS样式代码

容器 div

img_22.png

容器组件是页面布局的核心元素，用于对页面进行结构化划分，便于实现灵活的页面排版与响应式设计。

  • 下面以默认模板示例，每个红框可视为一个容器，从而完成初步布局 img_19.png

Tip

也可以用容器组件设置一定高度宽度，可以达到间隔其他组件的效果。

文本 span

  • 右侧文本输入框编辑文本

img_19.png

  • 双击文本组件显示文本高级编辑工具条

img_19.png

Tip

  • 绑定了动态数据，就不能任意修改文本
  • 文本设置超出省略，不需要设置高度，宽度按需设置。

图片 img

img_22.png

通过调整适应方式让图片显示最佳效果

img_22.png

图标 i

img_22.png

基于iconfont图标库，可快速实现图标的展示。

视频 video

img_22.png

Tip

视频文件大小>5M，建义发布到视频平台如B站

导航 nav

img_22.png

  • 使用流程：创建空页面（定义好页面的名称）> 创建栏目（绑定对应名称的页面）

导航只会显示栏目属性为导航的栏目

img_22.png

① 通过配置选项卡配置导航菜单的交互效果

② 编辑栏目数据

先创建栏目对应的页面，再通过栏目管理绑定创建好的设计页面

img_22.png

Tip

可以先创建整个站点页面结构，定义好页面名称就可以（如：新闻中心、关于我们、联系我们等），页面内容可以为空，这样可以对整个站点的页面有全局的设计思维。也能方便栏目绑定页面

  • 扩展模型

可以动态的管理文章发布的字段，例如文章字段信息不够用的时候，通过扩展模型增加需要字段

img_22.png

简单拖拽就可以完成文章字段的扩展

img_22.png

  • 使用流程：设计搜索效果 > 配置搜索页面

点击 配置 配置搜索的效果与可搜索的范围

img_22.png

Tip

通过图层方式快速选择搜索元素，通过样式选项卡修改效果

  • 搜索页面

搜索组件需要绑定搜索页面才能使用，搜索页面通常有文章列表（循环组件）与分页组件

轮播图 swiper

img_22.png

  • 数据配置为栏目 文章 轮播项也会同步相同的数据配置，与循环组件类似；

img_40.png

img_41.png

  • 数据配置为静态：不同轮播图可以设置不同的背景；

img_42.png

循环 loop

img_22.png

  • 数据配置为栏目 文章可以实现文章列表、栏目列表，每个循环项的样式与绑定的数据都是相同的。

img_57.png

img_56.png

  • 数据配置为静态情况下，循环项里的文本或图片的链接地址可以独立设置

img_53.png

  • 开启列表对齐，循环项的宽度由循环的宽度和单行数量决定，与循环项本身的宽度无关。

img_54.png

  • 关闭列表对齐不会清空边距，按需手动去除

img_55.png

Tip

循环项里面的元素只能从左侧组件列表拖入

禁止嵌套循环组件、轮播组件、导航组件、搜索组件、标签组件

循环项里面的每个元素的样式都会增加当前循环体的样式名称，避免多个循环项样式冲突，格式如：#w-loop-1770693115000_15 > .ms-loop .ms-loop-item

标签 tab

img_22.png 实现选项卡的效果，通过配置来设置标签组件的样式

img_58.png

表单 form

img_22.png

地图 map

img_22.png

基础组件

可以设计器手动转化的组件，达到复用组件的效果，

img_59.png

唯一 样式生成，同步组件里面所有子元素的 父层级样式(高级组件里的元素不会同步)

img_60.png

Tip

只有最外层是容器才能转组件,也只有一个最外层容器才有唯一配置 组件默认不开启唯一id；

模版组件

如导航 搜索组件，将元素先转化为基础组件，在基础组件的json结构基础上新增模版、样式配置

  • 组件type=custom，需要写freemarker模板才可以正常使用

  • 图层结构不可调整，只能设置数据或样式

  • 不能嵌套其他组件

  • 样式配置,样式配置的优先级高于基础样式设置，如鼠标悬停样式效果

    • 在组件最外层级加上
    "options":{"config":{}},
    • 样式配置路径说明：顶级层级样式名 + 顶层样式名 + 配置的css选择器；

    img_61.png

    img_65.png

  • 组件freemarker模板

    • 在模板文本最外层加上自定义组件标识
    <div id="w-id-${component.id}-${component.key}"/  style="display:contents;"> 模板代码 </div>
    • 模板代码如果涉及具体标签逻辑，需要在最外层加上<#noparse></#noparse>，防止被提前解析

    img_62.png

  • 组件样式扩展

    • 一般规定组件样式在组件最顶层写，在设置组件样式时，需在最外层加{id}样式名，例如：{id} .txt:hover {} ;

    • 在custom组件的{id}会替换成 w-id-${component.id}-${component.key} + 当前组件样式名称；

      img_63.png

      img_64.png

    • 如果不需要展示数据配置，删除data 配置

      img_66.png

分页

分页只能在列表页使用，一个列表分页只能开启一次