基礎使用說明 · 桑申科技-智慧小程序商城企微SCRM管理企業網站系統操作手冊

## 系統簡介本系統是開放架構遵循所見即所得原則, 幫助用戶通過簡單的拖拽設置即可快速創建網站站點的工具非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頁面 ![](https://mb.ybvips.cn/docs/pc/image/diypage.png) 用戶可自由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\. 頁頭頁尾 ![](https://mb.ybvips.cn/docs/pc/image/headfootpage.png) 一個網站很多頁面的頁頭頁尾是完全一模一樣的, 可以抽離出來做成一個頁頭頁尾, diy頁面和系統頁面可以選擇使用有以下設置項 | 設置項 | 說明 | | :-- | :-- | | 布局 | 三種布局, 兩欄樣式會在頁面的左右兩側顯示設置的內容 | | 頁面標題 | 只用于操作時區分具體是哪個頁面, 不會顯示到最終生成的頁面上 | 有以下可操作功能 | 功能 | 說明 | | :-- | :-- | | 設置 | 展開頁面設置頁 | | 切換單頁 | 可從模板市場或者我的模板中,一鍵切換頁面內容 | | 克隆 | 復制一份相同的頁面, 某一個頁面可以作為基礎頁面, 其余頁面都可以復制此頁面, 然后再編輯修改, 不需要重頭再做 | | 保存為自定義單頁 | 可以保存某個單頁為自定義單頁, 方便后續快速使用 | | 刪除 | 刪除頁面, 注意: 刪除后無法找回, 請謹慎操作 | #### [](https://mb.ybvips.cn/docs/pc/index.html#/#3-%E7%B3%BB%E7%BB%9F%E9%A1%B5%E9%9D%A2)3\. 系統頁面 ![](https://mb.ybvips.cn/docs/pc/image/systempage.png) 站點內置頁面, 目前包含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端和移動端 ![](https://mb.ybvips.cn/docs/pc/image/platform.png) 可以分別設置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)站點發布 ![](https://mb.ybvips.cn/docs/pc/image/publish.png) 做好的網站, 可以打包生成獨立的,可單獨部署的站點, 點擊打包生成和站點下載按鈕即可注意: 整個站點的頁面數量盡量控制在200個以內, 太多的話, 有可能會造成打包時候時間過長, 導致打包失敗 ### [](https://mb.ybvips.cn/docs/pc/index.html#/#%E7%BB%84%E4%BB%B6)組件 ![](https://mb.ybvips.cn/docs/pc/image/wegts.png) 組件都在組件工具條內, 直接拖動某個組件到頁面中即可每個組件分類都包含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 | 刪除選中組件 | | 向上箭頭 | 組件向上移動 | | 向下箭頭 | 組件向下移動 | | 向左箭頭 | 組件向左移動 | | 向右箭頭 | 組件向右移動 |