## 系统简介 本系统是开放架构遵循所见即所得原则, 帮助用户通过简单的拖拽设置即可快速创建网站站点的工具 非IT专业用户, 可以借助海量模板, 简单的拖拽设置, 快速构建网站 专业用户, 也可以在完善的布局, 样式单位, 自定义样式, 自由代码块的帮助下, 快速构建出自己所想所需的专业网站 海量的模板, 简洁的界面, 简单的操作, 完善的设置, 一款真正能让用户"用"起来的建站工具 ## [](https://mb.ybvips.cn/docs/pc/index.html#/#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8)基础使用 ### [](https://mb.ybvips.cn/docs/pc/index.html#/#%E9%A1%B5%E9%9D%A2)页面 包含三种页面 #### [](https://mb.ybvips.cn/docs/pc/index.html#/#1-diy%E9%A1%B5%E9%9D%A2)1\. DIY页面  用户可自由diy的主页面, 最终生成的站点, 以这些页面为主 有以下设置项 | 设置项 | 说明 | | :-- | :-- | | 页面标题 | 只用于操作时区分具体是哪个页面, 不会显示到最终生成的页面上 | | 页面地址 | 生成后的页面的文件名, 例如设置成aaa, 最终生成的页面就是aaa.php | | 是否主页 | 设置站点的主页, 主页的页面地址默认是index, 进入网站后会默认显示此页面 | | 页头页尾 | 页面的页头页尾, 很多页面的页头页尾都是一样的, 可以做一个页头页尾, 然后这里选择使用 | | SEO标题 | 页面的SEO标题, 显示在页面html的meta中的seo标题部分 | | SEO关键词 | 页面的SEO关键词, 显示在页面html的meta中的seo关键词部分 | | SEO页面描述 | 页面的SEO页面描述, 显示在页面html的meta中的seo页面描述部分 | 有以下可操作功能 | 功能 | 说明 | | :-- | :-- | | 设置 | 展开页面设置页 | | 切换单页 | 可从模板市场或者我的模板中,一键切换页面内容 | | 克隆 | 复制一份相同的页面, 某一个页面可以作为基础页面, 其余页面都可以复制此页面, 然后再编辑修改, 不需要重头再做 | | 保存为自定义单页 | 可以保存某个单页为自定义单页, 方便后续快速使用 | | 删除 | 删除页面, 注意: 删除后无法找回, 请谨慎操作 | #### [](https://mb.ybvips.cn/docs/pc/index.html#/#2-%E9%A1%B5%E5%A4%B4%E9%A1%B5%E5%B0%BE)2\. 页头页尾  一个网站很多页面的页头页尾是完全一模一样的, 可以抽离出来做成一个页头页尾, diy页面和系统页面可以选择使用 有以下设置项 | 设置项 | 说明 | | :-- | :-- | | 布局 | 三种布局, 两栏样式会在页面的左右两侧显示设置的内容 | | 页面标题 | 只用于操作时区分具体是哪个页面, 不会显示到最终生成的页面上 | 有以下可操作功能 | 功能 | 说明 | | :-- | :-- | | 设置 | 展开页面设置页 | | 切换单页 | 可从模板市场或者我的模板中,一键切换页面内容 | | 克隆 | 复制一份相同的页面, 某一个页面可以作为基础页面, 其余页面都可以复制此页面, 然后再编辑修改, 不需要重头再做 | | 保存为自定义单页 | 可以保存某个单页为自定义单页, 方便后续快速使用 | | 删除 | 删除页面, 注意: 删除后无法找回, 请谨慎操作 | #### [](https://mb.ybvips.cn/docs/pc/index.html#/#3-%E7%B3%BB%E7%BB%9F%E9%A1%B5%E9%9D%A2)3\. 系统页面  站点内置页面, 目前包含6个页面, 文章列表, 文章详情, 产品列表, 产品详情, 视频列表, 视频详情 其中文章列表, 产品列表, 视频列表 可以编辑列表的样式 有以下设置项 | 设置项 | 说明 | | :-- | :-- | | 页头页尾 | 页面的页头页尾, 很多页面的页头页尾都是一样的, 可以做一个页头页尾, 然后这里选择使用 | | SEO标题 | 页面的SEO标题, 显示在页面html的meta中的seo标题部分 | | SEO关键词 | 页面的SEO关键词, 显示在页面html的meta中的seo关键词部分 | | SEO页面描述 | 页面的SEO页面描述, 显示在页面html的meta中的seo页面描述部分 | 有以下可操作功能 | 功能 | 说明 | | :-- | :-- | | 设置 | 展开页面设置页 | ### [](https://mb.ybvips.cn/docs/pc/index.html#/#pc%E7%AB%AF%E5%92%8C%E7%A7%BB%E5%8A%A8%E7%AB%AF)PC端和移动端  可以分别设置pc网站和手机网站, 虽然系统支持自适应功能, 但是终归有一定的学习成本 想做到完美的自适应, 需要了解诸如布局方式, 样式单位(px, rem, %, vw, vh calc)等 所以对于普通用户的简单使用, 最简单的方式就是pc和移动端分开, 两者单独diy 访问站点的时候, 会自动判断是否手机访问, 自动切换到手机版网站 当然对于想做到完美自适应的用户来说, 后面也会有教程教大家如何来操作 ### [](https://mb.ybvips.cn/docs/pc/index.html#/#%E4%BF%9D%E5%AD%98%E5%92%8C%E9%A2%84%E8%A7%88)保存和预览 页面diy内容更改后, 保存按钮的右上角会有个红色的圆点, 表示有内容已更改, 还没有保存 系统有自动保存功能 一分钟自动保存一次, 防止编辑过的内容忘记保存, 导致数据或样式丢失 点击保存按钮后, 页面的所有更改会保存到服务器上, 此时预览才是最新的内容 点击预览前记得查看是否有内容已更改还未保存 ### [](https://mb.ybvips.cn/docs/pc/index.html#/#%E7%AB%99%E7%82%B9%E5%8F%91%E5%B8%83)站点发布  做好的网站, 可以打包生成独立的,可单独部署的站点, 点击打包生成和站点下载按钮即可 注意: 整个站点的页面数量尽量控制在200个以内, 太多的话, 有可能会造成打包时候时间过长, 导致打包失败 ### [](https://mb.ybvips.cn/docs/pc/index.html#/#%E7%BB%84%E4%BB%B6)组件  组件都在组件工具条内, 直接拖动某个组件到页面中即可 每个组件分类都包含3部分 1. 系统内置组件 2. 官方模板市场的组件, 需下载使用 3. 用户自己保存的组件, 设置好样式的组件块, 可以保存成自定义组件, 方便后续直接拖拽使用 所有组件都可以双击展开设置栏 组件可以左键单击选择, 也可以按住Ctrl键多选 组件可以右键单击弹出功能菜单 所有组件点击后, 组件左上角会有快捷操作工具条, 工具条根据组件不同, 可操作功能也不同 工具条全部操作如下: | 功能 | 说明 | | :-- | :-- | | 设置 | 展开组件设置页 | | 锁定 | 锁定组件, 让组件不可拖动, 避免误操作 | | 删除 | 删除组件 | | 隐藏内部组件 | 隐藏内部组件, 页面组件太多时, 可能会有卡顿, 此时可以隐藏一部分组件 | | 编辑悬停 | 编辑鼠标移动到组件上方时, 组件内部的子组件的样式, 比如放大缩小, 左右移动等, 最终会呈现出动画效果 | | 编辑选中 | 编辑组件被选中中, 组件内部的子组件的样式 | | 最小化 | 弹窗组件专用, 收起弹窗组件 | 右键菜单全部操作如下: | 功能 | 说明 | | :-- | :-- | | 保存自定义组件 | 保存组件为自定义组件, 包含内部子组件的完整的数据和样式, 后续可以直接从组件工具条拖动使用 | | 导出样式 | 可以查看包含内部子组件的完整的组件样式数据 | | 设置 | 展开组件设置页 | | 剪切 | 剪切组件, 用于后续粘贴, 快捷键Ctrl + X | | 复制 | 复制组件, 用于后续粘贴, 快捷键Ctrl + C | | 粘贴 | 粘贴组件, 只有在容器等可以放置子组件的组件上才会出现, 快捷键Ctrl + V | | 合并至容器 | 合并多个组件到同一个父容器中 | | 阵列 | 阵列复制, 可以设置横排竖排数量和组件间的上下左右间距, 快速布局复制组件用 | | 对齐 | 组件各种对齐方式, 组件单选时, 可以设置组件在容器内部的对齐方式, 组件多选时, 还可额外设置组件之间的对齐方式 | | 容器内顺序 | 父容器为横向布局或竖向布局时, 可以设置子容器的排列顺序 | | 层级 | 设置组件的层级, 会影响容器是否被遮挡 | | 最小化 | 弹窗组件专用, 收起弹窗组件 | | 删除 | 删除组件 | ### [](https://mb.ybvips.cn/docs/pc/index.html#/#%E5%BF%AB%E6%8D%B7%E9%94%AE)快捷键 系统内置了很多快捷键, 键位基本是常用的键位, 大大降低了用户的学习成本, 可以快速完成很多常用操作 全部快捷键: | 键位 | 说明 | | :-- | :-- | | Ctrl + C | 组件复制 | | Ctrl + X | 组件剪切 | | Ctrl + V | 组件粘贴 | | Ctrl + Z | 撤销组件改动 | | Ctrl + Shift + Z | 重做组件改动 | | Ctrl + A | 组件的同一个父容器的组件全部选中 | | Ctrl + S | 保存 | | Delete | 删除选中组件 | | 向上箭头 | 组件向上移动 | | 向下箭头 | 组件向下移动 | | 向左箭头 | 组件向左移动 | | 向右箭头 | 组件向右移动 |