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

布局

控制区域面板介绍

img.png

菜单栏

粘贴

粘贴功能必须要选择具体的页面组件图层,如容器,才能粘贴

工具栏

组件

组件是页面中的基本单位,页面是由一个个组件组成的。

img_13.png

页面

新增页面

点击新增页面,填写页面信息。

注意:

  1. 一个项目内,文件名不能重复
  2. 文件名不需要填写后缀,系统会自动添加.htm后缀

img_7.png

母板

在一个项目里各个页面中的通用部分,如头部、底部等等,可以抽离成母板。

页面可以通过引用母板来继承这些通用结构,当母板内容发生变更时,所有引用该母板的页面会自动同步更新,无需逐一修改。

如果页面有引用母版,生成的代码会以<#include "母版文件名.htm" /> 形式引入母版

抽离母版

如下图的头部,点击顶层容器,在工具条点击抽离母版,填写母板信息。

注意:

  1. 抽离母板只能在图层最顶层操作
  2. 图层最顶层必须为容器

img_8.png

img_9.png

引用母版

先选中一个页面,在tab栏点击切换母版

img_10.png

鼠标悬停在母板名称前方的拖动图标上,在往页面拖拽,即可在页面中引用母板

img_11.png

img_12.png

组件列表

组件列表分为两部分,我的组件和模板列表。

新增我的组件

对于一些经常使用的组件模块,可以转换成我的组件,方便在各个项目中使用,不需要重复去托结构。

在图层点击顶层容器,在工具条点击转组件,填写组件信息。

img_14.png

img_15.png

图层

图层与PS中的图层是一个意思,在图层控制区可以对每一个图层进行编辑。

图层定位

在内容展示区域任意选中一个图层,点击定位图标可以快速移动到该图层

img_6.png

图层名称编辑

双击图层名称,可以对图层名称进行修改

img_3.png

图层显示隐藏

点击图层标题前面的眼睛图标可以显示或隐藏该图层。

注意:如果父图层被隐藏,则该图层下的子图层也会被隐藏

img_2.png

图层删除

点击图层标题后面的删除图标可以删除该图层

注意:如果父图层被删除,则该图层下的子图层也会被删除

img_4.png

图层切换

在图层列表中上下拖拽图层,可以调整图层结构

img_5.png

样式

基础样式

基础样式:选中图层,在右侧样式面板中直接设置,如宽度高度,边距、背景等。

img_16.png

高级样式

高级样式:选中图层,在右侧样式面板中点击css高级设置,高级样式涉及css样式编码,可灵活实现各种效果。

当前组件图层样式

基础样式属性不满足需求时,如容器阴影效果,可采用css属性box-shadow,则在当前组件图层样式填写"boxShadow":"0px 0px 5px #000000"。(注意:属性用驼峰命名,值需要双引号包裹)

附加样式名称

为组件添加附加样式名,多个class以空格分割

当前组件样式

当前组件样式设置,直接写css代码,转组件时会携带css代码;遇见组件样式未生效,加 !important 处理

当前页面样式

作用在当前页面,直接写css代码,转组件时不会携带css代码

全局app.css样式

作用在整个项目,直接写css代码,转组件时不会携带css代码

img_17.png

配置

数据

静态

栏目

对应channel标签

文章

对应arclist标签

内容

模板