# 建站系统
# 快速开始
# 建站前须知
WARNING
特别注意：上线网站应该有备案号，备案号需要链接到工信部
链接地址：https://beian.miit.gov.cn/
# 系统简介
TIP
本系统旨在通过最简单的方式快速搭建用户的网站,各个组件提前写好样式
用户只需要通过简单的拖拉改变大小的操作，就可以通过不同的组件搭配酷
炫的网站, 本篇文档主要对系统相关组件及功能进行介绍，方便用户快速上手
# 常用快捷键
TIP
ctrl + s: 保存
ctrl + p: 预览
ctrl + c: 复制
ctrl + v: 粘贴
ctrl + x: 剪切
ctrl + q: 标尺
ctrl + z: 回退一步
ctrl + y: 前进一步
ctrl + l: 左侧边栏显示/隐藏
ctrl + t: 顶部工具栏显示/隐藏
ctrl: 选择组件时按住多选
shift: 移动组件时按住锁定移动方向
delete | backspace: 删除组件
上方向键： 向上移动组件
下方向键： 向下移动组件
左方向键： 向左移动组件
右方向键： 向右移动组件
# 页面结构
# PC端布局
# 手机端布局
# 自适应处理
TIP
PC端的工具栏会呈现一种半透明的状态，这是为了不遮挡页面上的宽屏组件
鼠标悬停时将会 取消透明状态
1. 所示区域为顶部工具栏 （顶部栏主要是跟页面相关的功能）
2. 所示区域为左侧工具栏 （左侧栏主要是跟页面组件相关的功能）
3. 所示区域为组件的编辑区域，组件的拖动只能在该区域内。PC端可以设置页面宽度，如图
所示橘色虚线内部即为宽度限制，设置宽度后，在不同的屏幕展示，组件的大小都不会产生变
化。如果不设置宽度，系统会采用自适应的处理，在不同的屏幕收缩或者扩张组件的大小。而
手机端尺寸为320px * 568px,在不同的屏幕会做自适应的处理。
WARNING
在自适应的处理中，虽然组件可以缩小，但是文字的大小最小为12px，所以要为文本组件留出
足够的高度，避免文本组件在缩小后，因高度不够而遮挡文字
# 顶部工具栏
# 页面导航组件
页面导航组件用于切换当前编辑的页面，可以切换到 普通页面、底版、系统页面
（1）普通页面，用于生成一个可用于跳转的页面，可对单个页面执行删除，编辑/复制，生成子页面 设置导航可见性，生成手机端等操作。
（2）底版，设置多个页面都可用到的一些通用组件，应用了底版之后，就会将底版的元素复制到页面 此时如果想编辑该组件，需要到相应的底版页面去编辑，也可将底版元素解锁，解锁之后，底版元素就 会脱离与底版的关联，成为页面的组件，可任意修改。
（3）系统页面，用生成一些默认的页面，基本功能与普通页面类似。但是可由管理员账户定义一些所有 用户都可以使用的页面。
TIP
底版元素永远在页面元素图层之上（会遮挡页面元素）
# 页面操作组件
页面操作组件用于当前页面的一些操作，切换手机端/PC端，对于一些关键操作前进/后退，打开/关闭标尺 清除页面参考线，可以恢复一些操作记录，以及将一些组件发布为套件，以便下次使用。
TIP
一般情况下右上角是没有白色小圆点的，当用户进行了操作而没有保存的时候会有小圆点。
# 左侧工具栏
# 添加组件
通过点击或者拖动到编辑区域的方式添加组件，通过点击的方式，会讲组件追加到页面所有组件之后，慎用 避免找不到添加的组件，而拖动添加的方式，会将组件以鼠标释放点为中心添加，并自动进行位置调整。每个 组件拥有至少一个样式，有的组件拥有多个样式，选中样式之后可以添加对应样式。并能在添加之后进行样式 的切换。
TIP
如果组件太多，可以通过搜索组件名字的方式检索。
# 添加套件
套件只能通过拖动的方式添加，可以删除套件分类，和删除套件，但是不能编辑，如需编辑，就需要套件添加 到页面后修改再重新发布。套件在新建的时候可以加密，如果需要删除加密的套件，就需要输入密码，否则不 能删除该套件。
TIP
套件的目的是为了一些组件定义的样式，可以让设计师在其他商家使用，所以尽量让套件在添加时和新增时
页面设置的宽度相同，例如在1900px页面宽度下添加的套件，将其新增到1200px页面宽度，有可能会导致
错位，这时候需要手动调整位置。
# 页面图层
页面组件图层，在这里可以查看页面组件的图层顺序，但是不能看到底版元素，同时也没有全屏滚动组件和弹窗 组件，以及弹窗组件内的组件都不能看到。可以调换图层的顺序，排列在下面的图层在页面上会将排列在上的图层 挡住，可以为组件命名，这在设置页面锚点时很有帮助。
TIP
即使设置了图层的可见性为不可见，也仅仅是在设计端不可见，但是渲染端还是会展示出来，这个功能只是为
了查看当前图层下面是否有遮挡，并不会让渲染端也不可见。
页面弹窗组件，现在弹窗组件不会显示在页面上了，因为如果页面组件过多，弹窗组件不好找，同时，也会影响整 体设计效果。所以将弹窗组件统一在这里管理。
# 资源管理
在这里可以查看当前网站剩余的内存，以及统一的图片、视频等资源的管理，方便多处使用，点击文件选中文件，并在点击选择文件时将选择的文件给对应的组件使用。
WARNING
有的组件在选择资源文件时可以多选，有的组件在选择资源文件时只能单选，需要额外注意。
# 网站设置
可以在这里对网站进行相关设置，比如网站的SEO设置等，数据备份，用于将所有页面进行备份，以备在数据出 错时恢复，背景设置可以设置网站的背景。
TIP
在PC端可以设置整个网站的背景和编辑区域的背景（编辑区域永远是页面居中显示的），手机端只能设置页
面背景，因为手机端编辑区域于页面宽度等宽。同时在模版设计端也是如此。
# 模版市场
WARNING
应用模版后，会将网站的所有页面都替换为模版的页面，所以如果不想数据丢失，可以在设计页面一开始就
应用模版，或者在应用模版之前进行数据备份
# 其他功能
返回后台：跳转到商家后台页面。
返回顶部：返回页面顶部，如果在全屏滚动组件下使用将返回第一屏。
清空组件：清空页面所有组件（不包括底版元素）。
增加编辑区域高度：页面编辑区域默认为10000px高度，如果设计页面的内容需要超过10000px，则需要增加高 度，每次增加的高度为当前屏幕的高度。
更多功能：目前仅有更换网站主题色的配置，主题色保存在本地，所以用同一台电脑登陆，会应用主题色，如果 不同的电脑登陆，即使是同一个用户也不会应用。
# 通用功能组件
# 富文本编辑器
从左到右，依次为：源代码模式，选择图片，格式刷，字体加粗，字体倾斜，左对齐，居中对齐，右对齐，两端 对齐，上标，下标，删除线，底部横线，字母大写，字母小写，设置链接，取消链接，字体，文字大小，行高 间距，缩进，文字颜色，文字背景，工具栏位置（在PC端为了防止遮挡可上下调整位置）。
TIP
源代码模式，可以直接编辑HTML代码，通过源代码按钮开关，在某些情况下，源代码按钮会被遮挡，就需要
通过右上角的关闭按钮关闭。
TIP
通过双击图片可以编辑图片的宽高。
TIP
为内容添加链接，除了可以使用本页面所有组件的锚点外，还可以通过上图所示的方式添加跨页面锚点。
# 颜色选择器
TIP
可以设置RGB,以及透明度，也可直接输入16进制的颜色代码，每次输入新的颜色代码后，会将最近使用的颜 色保存下来，方便下次使用，最多保存24个，超过后就会删除保存最久的颜色。
# 套件发布
TIP
1.首先选中需要发布为套件的若干组件
2.点击右上方的顶部工具栏的扩展按钮，就弹出更多选项
3.选择发布为套件
4.填写相关信息（最好上传正确的预览图，便于分辨）
# 操作记录
TIP
1.点击右上方的顶部工具栏的扩展按钮，就弹出更多选项
3.选择页面操作历史
4.选择要恢复的记录，点击蓝色箭头按钮
5.注意：每当进行增加页面，删除页面，修改页面数据（点击保存）的时候会自动记录
WARNING
恢复记录会丢失当前未保存的数据。
# 链接选择器
该组件用于为组件设置跳转链接（部分组件可以设置）
TIP
1.用户页面：跳转到用户自己添加的页面
2.系统页面：跳转到管理员添加和用户自己添加的系统页面
3.站外链接：跳转到外部链接
4.文章列表：跳转到一个文章列表页，并可以设置在那个页面显示什么数据，但是必须在 那个页面添加一个文章列表组件
5.文章详情：跳转到一个文章详情页，并可以设置在那个页面显示什么数据，但是必须在 那个页面添加一个文章详情组件
6.产品列表：跳转到一个产品列表页，并可以设置在那个页面显示什么数据，但是必须在 那个页面添加一个产品列表组件
7.产品详情：跳转到一个产品详情页，并可以设置在那个页面显示什么数据，但是必须在 那个页面添加一个产品详情组件
8.页面锚点：用于快速定位到页面特定位置，可以选择页面上的所有组件
TIP
通过这种设置可以进行跨页面锚点
# 图片效果设置
在这里设置图片的滤镜，对图片进行一些调整
在这里设置图片的悬停效果
TIP
1.普通效果：鼠标悬停后，图片会进行一些变换
2.显示图标：鼠标悬停后，会出现蒙版，并出现一个可设置的图标
3.显示蒙版：鼠标悬停后，会出现蒙版，并出现自定义的标题和说明性文字
需要注意：只有在产品列表和新闻列表组件如果不设置自定义的标题和说明文字，那么展 示产品和新闻单独的标题和说明文字（4相同）
4.显示标题：鼠标悬停后，显示部分蒙版和自定义的标题
# 动画效果设置
在这里设置组件的动画效果（部分组件没有）
# 组件通用设置
在这里设置组件的一些通用样式（部分组件没有），如边框，填充，圆角，背景，渐变色 阴影等。
TIP
屏幕固定功能，用于将一些需要固定在屏幕的组件固定，固定之后，就不会随屏幕滚动 如果设置了宽高百分百，那么组件原有的宽高将会失效。除此之外，在全屏滚动组件下 不要激活固定屏幕，同时设置宽高百分百，那么就会让组件占满全屏滚动组件的一屏。
属性框可以通过双击组件打开，某些特殊组件如文本，需要右键通过上下文菜单->属性 打开
TIP
鼠标悬停样式，需要激活 使用悬停 功能，这样可以让组件在鼠标悬停时应用新的样式 如果勾选了 样式过渡 ，就会出现过渡效果，而不会显得很生硬。
# 组件属性框
TIP
组件属性框，PC端组件激活后出现在右上方，手机端则一直显示。可以快速对组件进行宽高 左右距离的设置，同时还可以为组件命名，以及组件的一些特殊功能，可以点击小图标打开 不同的设置弹窗。
# 组件列表
# 通栏
通栏是一个容器组件，可以将一些组件放在放在通栏中，将跟随通栏的移动一起移动，通栏也是一 个全屏宽的组件。通栏不能设置动画，也没有其他组件所拥有的一些通用属性，基于其特殊而丰富的 背景设置功能，一般用来做一个区域背景。
TIP
可以为通栏设置背景视频，可以使用本地视频，如果设置通栏的全屏，那么他就会在当前屏幕下 宽高100%。如果设置了 固定背景 ，那么屏幕滚动时，通栏的背景就会呈现出一种静态的效果，可 用来制作特殊的效果。
TIP
勾选固定位置，可以让通栏在滚动时，固定在某一个位置，可以用来做顶部固定的导航栏。可以 在 通栏固定背景 下设置当通栏固定时使用的样式。
# 图标
图标组件，用于设置一些网站用的小图标，组件自带了丰富的默认图标，可供用户设置，如果不能满足 需求，可以去 阿里字体库 (opens new window) 复制字体图标的SVG代码。
TIP
如果设置了自定义SVG，那么系统默认的图标将会失效，如需使用系统默认的图标，需要将自定义SVG 清空。
# 文本
文本组件不仅能输入文本而已，得益于富文本编辑器的帮助，文本组件可以放入图片，插入链接，甚至可 以通过源代码模式添加更多可能。
# 视频
视频组件不仅可以添加本地视频，也可添加网络视频，目前支持bilibili, 优酷， 腾讯。
TIP
添加网络视频：如优酷视频为例，点击分享，复制网页地址，粘贴到视频组件的设置->视频地址栏中 当然第三方网站的VIP视频是不可以播放的。
# 图片
图片组件可以为图片设置滤镜，以及图片悬停效果，具体功能可以参考组件图片效果设置
# 图文
图文组件相比于文本组件差别在于，多了一个文字环绕的效果，可用文本编辑器的功能和图片组件的功能。
# 菜单导航
导航组件可以根据当前用户建立的页面，自动生成导航，如果不需要根据页面生成导航，也可以自定义导航 菜单。
TIP
可以通过 顶部工具栏 的页面导航组件，设置当前这个页面是否在导航组件中显示。
WARNING
分类悬停： 鼠标悬停时页面导航的样式
分类激活： 当前浏览的页面对应的导航的样式
注意：悬停状态下的样式和激活状态的样式宽高最好一致，不然会出现导航不对齐的情况，除非你有特别 的设计。
# 分类导航
分类导航，所有的分类，子分类，以及右侧展示的内容区域都是用户自定义，可以按照自己喜欢的方式排版 内容区域，使用了 富文本编辑器 使得用户可以制作出属于自己风格的内容排版。
# 底部导航（手机端）
底部导航是手机端的常用的导航组件，底部导航添加之后会固定在底部，无法被移动，每一个菜单需要设置 链接，这意味着，可以使用底部导航添加外链。
TIP
我们为底部导航配置了丰富的图标选项，除了可以使用系统默认的图标，还支持SVG图标，甚至还可以使用 设计师自定义的图片。
# 文章分类
文章分类用于展示用户的文章分类，可自由配置展示的分类，数据需要在管理后台区添加。
# 文章列表
文章列表用于展示用户的文章列表，可自由配置哪些分类下的数据需要展示，数据需要在管理后台区添加，同时 作为文章列表页面的跳转，必须添加此组件。
# 文章详情
文章详情用于展示用户的文章详情，可选择展示的文章详情，数据需要在管理后台区添加，同时作为文章详情页 面的跳转，必须添加此组件。
# 产品分类
产品分类用于展示用户的文章分类，可自由配置展示的分类，数据需要在管理后台区添加。
# 产品列表
产品列表用于展示用户的产品列表，可自由配置哪些分类下的数据需要展示，数据需要在管理后台区添加，同时 作为产品列表页面的跳转，必须添加此组件。
# 产品详情
产品详情用于展示用户的产品详情，可选择展示的产品详情，数据需要在管理后台区添加，同时作为产品详情页 面的跳转，必须添加此组件。
# 按钮
按钮组件内置了10种样式，用户也可自定义按钮的背景等，还可以添加阴影。
TIP
按钮的主要功能：
1.设置链接：点击按钮之后就可以跳转到对应的链接，详情参考 链接选择器
2.复制：可以将一些信息绑定在按钮上，比如电话号码等，点击之后就复制到粘贴板。
3.返回上一页：返回上一个访问的页面。
4.打开弹窗：可以点击按钮打开一个弹窗容器，但是需要设置弹窗容器的打开方式为点击按钮。
5.文件下载：选择一个文件，使得点击按钮之后下载这个文件。
# 线条
用于添加一些特殊样式或者带纹理的线条。
# 形状
用于添加一个矢量图形，不会因为放大而模糊，填充色可以用渐变色。
TIP
其中的多边形形状支持3-10个边，可用户设置。
# 返回顶部
用于添加一个返回顶部按钮，可使用系统自带的图标以及上传自定义的图片图标。
TIP
返回顶部按钮，永远基于浏览器右边和下边定位，
普通页面点击返回顶部，全屏滚动组件下点击返回第一屏。
# 选项卡
选项卡组件可以在多个内容之间快速切换。
TIP
内容可以为自定义，也可以由后台系统添加的产品和文章列表。
# 侧边栏
TIP
侧边栏按钮在网页左右的其中一侧展示一个快速工具栏，目前会员和购物车功能正在开发 其他功能都可显示，每一个图标可以由用户自定义。
# 容器
TIP
容器组件可以看作一个缩小版的通栏，他不会占据一整个屏幕，主要用来将一些组件编组，同时 容器具有通用组件的一些属性，可以设置鼠标悬停效果，还可以设置动画。
# 宽屏轮播
TIP
宽屏轮播组件分为3个样式，每个样式都有自己的独特特点
样式1: 这个样式属于最常规的轮播图，切换效果也是比较常见的，但是修改样式后生效快。
样式2: 这个属于用脚本编写的样式，使用了HTML5的技术，所以切换效果会更华丽，但是，每次 修改配置后需要点击应用设置才可以生效。
样式3: 这个样式的切换效果只有一种，但他是一个屏幕可以展示3张图片，类似于gallery的效果。
# 面包屑导航
面包屑导航会自动将页面的层级结构串联起来，他的第一个页面是主页，最后一个页面是当前页面，用 户点击对应的页面就会跳转，用做快速导航，中间的分隔符可以自定义。
# 留言表单
留言表单用于采集访客的留言等信息，用户点击提交后会讲表单提交至后台处理，表单支持11种元素 按钮是单独的一个元素，除了上下排列的表单还有一行显示的行内表单样式。
# 走马灯
走马灯组件，更多用于商品的展示，除了可以自定义滚动的图片之外，还可以展示后台配置的商品和文章数据 他的滚动方向可以为上下左右任意。
# 弹窗容器
TIP
添加了弹窗容器组件后，并不会在页面上显示该组件，需要在左侧工具栏，图层功能中查看当前页面的弹窗
TIP
弹窗容器也是一个容器组件，可以添加一些组件在他的内部，目前只支持7种组件，只能通过拖动的的方式
添加，添加之后，并不会出现在也页面上。只有当弹窗容器打开即可对这些组件进行编辑。
弹窗容器可以设置自动打开，也可设置用按钮点击打开。
# 百度地图
TIP
百度地图组件主要用来用作地点标识，没有导航的功能。需要注意的是，如果同时输入了地点和经纬度，搜索
模式会以地点关键字为标准搜索，如果希望按照经纬度来搜索，需要先将地点文字清空。
# 小屏轮播
TIP
小屏轮播不会占据全屏幕宽，适用于局部地区的图片展示。
# 图片翻转
TIP
图片翻转组件每一个图片的位置需要放置两张图片，当鼠标悬停时切换图片，适用于产品图展示。
# 图片幻灯片
TIP
图片幻灯片也是一种小区域的轮播方式，他的特点跟走马灯类似，除了图片展示，也提供后台数据的
展示，如后台配置的产品与文章。但是可以选择不同的切换效果。
# 时间轴
TIP
时间轴组件用于一些时间线的事件的展示，中间的节点可以手动添加。
# 全屏滚动
TIP
全屏滚动组件，是一个特殊的组件，也是一个容器组件，可以在里面放置其他组件，添加了全屏滚动组件后
会自动将页面上的组件分到不同的屏幕，通过鼠标滚轮滑动，或者点击右边的导航按钮跳转。用作特殊的首
页展示。全屏滚动组件，不能被选中，也不能移动位置。也没有一般组件的动画效果和通用样式以及设置悬
停样式，要删除需要点击左上角的单独的删除按钮，右边的导航具有高度定制性，可以设置成各种符合网站
主题的样式。
全屏滚动组件是全屏高的，宽度是基于当前页面设置的宽度，如图中的橙色虚线宽度，这便是当前网页的宽
度，如果当前网页没有设置宽度，那么全屏滚动组件宽度就是屏幕的百分百。
删除全屏滚动组件，不会删除内部的元素，而是会经过计算，将内部元素的位置还原。
# 图片瀑布流
TIP
图片瀑布流，是一系列图集的展示组件，不能展示后台的数据，只能手动添加。
图片瀑布流每张图片的宽度是一样的，高度自适应，所以会有一种高度的落差。
# 搜索框
TIP
搜索框用来搜索本站的文章或者产品数据，总共有三种样式，前两种样式为固定样式，不能修改样式
第三种样式具有可定制性，可根据用户网站的配色进行修改或者设置背景。
# 常见问题
# 为什么应用了底版，却不显示页脚元素
答：需要在页面设置中勾选显示页脚。
# 为什么屏幕上的页脚不会跟随移动
答：只有页面或者系统页面的组件移动时，页脚元素才会计算位置，同时要确保你的页脚元素勾选了设为页脚。
# 为什么通栏页面刷新后页面的宽度限制不见了
答：因为底版可以应用在所有页面上，所以底版是没有页面宽度限制的，你从什么宽度的页面点进去，底版的宽度就是 多少，刷新页面后，就会丢失记录，这是正常现象。
# 为什么页脚上面，所有元素下面会有空白
答：可能由于误操作，将某个组件的高度拖成了1px，所以肉眼看不见。用框选功能可以选出高度被设置1px的元素，删除它。
# 为什么渲染端页脚下面会有大片空白
答：可能由于误操作，将某个页脚元素放到了非常下面的位置，请联系开发人员解决。
# 为什么渲染端页脚下面会有小部分空白
答：请确保页脚容器（一般为通栏）内部的组件高度不要超过容器。
# 为什么多选功能无法同时选择某些组件
答：多选功能，只能选择父级相同的组件，如果组件的父级不同无法同时选择。
# 为什么底版元素总是会挡住页面元素
答：因为在渲染组件的时候，是先渲染页面元素，再渲染底版元素，所以底版元素的图层是在页面元素之上，因此会遮挡页面元素 这个无法修改。所以制作页面的时候要为底版元素留出空白。