[TOC] ## 深度開發 ### 內置框架 系統內置庫 * `Jquery`: 基礎庫，版本3.2.1，網站主要通過jquery控制自定義交互邏輯 * `UIKIT`: UI庫，[官網-http://getuikit.com/](http://getuikit.com/), 保護常用的響應式和交互行為支持 * `social-share.js`社交分享插件 * `counter.js`數字動畫插件 * `jquery.pagepiling.js`: 單頁滾動插件，開啟單頁模式后自動加載 * `twbsPagination.js`: 分頁插件 * `font-awesome`: 圖標庫 * `cssgram`: 圖片濾鏡樣式 以上為系統內置庫，如果需要自定義，可以直接通過`<script>`標簽加載第三方庫cdn地址。 ## 模板開發 ### 數據綁定 模板使用`art-template`來控制動態數據的渲染。模板數據有兩大類，一個是編輯器里編輯時設置的界面數據 和樣式數據，另外一類是綁定動態數據源后從后臺拉取的文章、產品數據。兩類數據在渲染時邏輯是一樣的。一般 數據都會打在`dataInfo`(界面和動態數據)和`style`(樣式控制)下。 模板語法參考[art-template](https://aui.github.io/art-template/)文檔。以常用的遍歷為例： ~~~ # 將遍歷dataInfo.items數組，打印其中的title變量 {{ each dataInfo.items }} <h1>{{ $value.title }}</h1> {{ /each }} ~~~ ### 自定義腳本 如果需要自定義JS邏輯，直接在模板代碼里通過內嵌script標簽編寫即可。需要注意使用`__ID__`字符串獲取 到當前版塊的ID, 避免作用域沖突。例如： ~~~ <script> $(function () { $('#__ID__ .menu-list > li').hover(function () { $(this).find('ul').stop().fadeIn(); }, function () { $(this).find('ul').hide(); }); }); </script> ~~~ > 注意：`__ID__`變量可以在模板HTML代碼里任意地方使用，但是不能在css文件中使用 ### 模板自定義API 系統擴充了`art-template`的模板語法，提供了常用的自定義模板方法支持。模板方法調用方式參考art-template 文檔，一般是豎線調用，后面可以傳參。 * `getRow`: 獲取數組幾行 * `isOdd`: 判斷當前是否是奇數 * `isEven`: 判斷當前是否偶數 * `ceil`: Math.ceil方法 * `hide`: 隱藏變量輸出 * `dateFormat`: 日期格式化，通過傳參控制格式。例如`{{ $value.createdAt | dateFormat 'yyyyMM-dd' }}` * `isSVG`: 判斷是否是svg * `arrayJoin`: 數組轉字符串 * `substring`: 字符串截取，支持識別HTML富文本標簽 * `origin`: 獲取當前圖片原圖 * `thumbnail`: 獲取當前圖片縮略圖 * `groupByYear`: 將數據按年份分組 * `include`: 判斷字符串是否包含在逗號分隔的字符串里 * `getItemTags`: 獲取列表的所有標簽并進行去重 * `tagToClass`: 將逗號分隔的tag轉成元素的class * `random`: 生成隨機數，支持傳參min max * `i18n`: 多語言輸出，需要傳參當前語言 * `kebabCase`: lodash kebabCase * `get`: lodash get formatStyle : 將編輯器樣式對象數據轉成css字符串 ## 界面開發 ### 響應式支持 響應式一般通過uikit來實現，常用的屬性是通過`uk-grid`來支持的，具體參考[grid](https://getuikit.com/docs/grid)文檔。一般保證樣式在PC 和手機上正常就行。 ### css開發 css開發支持less和純css。使用less開發時支持獲取當前主題設置來實現版塊主題控制。例如： ~~~ h1 { color: @global-primary-background } ~~~ 常用主題變量： * `global-primary-background`: 主題色，網站主要主題色 * `global-secondary-background`: 主題間色，次要主題 * `global-muted-background`: 輕柔色 * `global-background`: 默認背景色，一般白色 其他參考網站編輯器里主題設置。 > 注意如果要在模板中編寫內聯css, 盡量使用`#__ID__ {}`包裹，避免樣式污染，內聯樣式不支持less, 一般用 來跟版塊設置數據來搭配使用控制自定義樣式 ## 版塊設置 版塊設置用來生成版塊在編輯器里的設置面板，方便版塊在網站里的復用和個性化設置。 設置使用schema語法來控制設置項。示例配置如下： ~~~ { "type": "object", "title: "", "$schema": "http://json-schema.org/draft-04/schema#", "properties": { "dataInfo": { // schema 標準，數據描述 "type": "object", "properties": { "items": { "type": "array", // 數組描述示例 "items": { "type": "object", "properties": { "icon": { "type": "string", "editor": "icon", // 指定使用編輯器圖標編輯器 "description": "圖標" }, "link": { "type": "string", "editor": "link", // 指定使用編輯器連接編輯器 "description": "鏈接" }, "title": { "type": "string", "description": "標題" }, "abstract": { "type": "string", "description": "簡介" }, "subTitle": { "type": "string", "description": "小標題" } }, "description": "列表項" }, "description": "列表" }, "title": { "type": "string", "description": "標題" }, "buttons": { "type": "array", "items": { "type": "object", "properties": { "icon": { "type": "string", "editor": "icon", "description": "按鈕圖標" }, "link": { "type": "string", "editor": "link", "description": "鏈接" }, "text": { "type": "string", "description": "按鈕文字" } }, "description": "按鈕" }, "description": "按鈕列表" }, "abstract": { "type": "string", "description": "簡介" }, "subTitle": { "type": "string", "description": "小標題" }, "icon": { "type": "string", "editor": "icon", "description": "圖標" } }, "description": "數據" }, "style": { "type": "object", "properties": { "column": { "type": "object", "description": "分欄控制", "properties": { "items": { "type": "number", "editor": "number", "description": "主列表分欄" } } } }, "description": "效果" } }, "description": "featureIconList模板", // 描述 "enableDatasource": true, "demoProperties": { // 示例數據 "dataInfo": { "items": [ ], "abstract": "示例簡介" }, "style": { // 示例樣式設置 "size": "large" } } } ~~~ > 注意數組不支持二級嵌套，例如dataInfo.item數組下面不能添加新的數組 `editor`屬性可以控制字段使用編輯器的自定義編輯器編輯，常用的數據編輯器包括： * `picture`: 圖片管理器 * `link`: 連接編輯器 * `select`: 下拉框 * `textarea`: textarea * `rich-text`: 富文本編輯 * `menu`: 導航菜單項編輯 * `bmap`: 地圖選框編輯器 * `color`: 顏色編輯器 * `gallery`: 圖集編輯器 * `dataList`: 數據列表編輯器，自動識別 * `dynamicData`: 動態數據配置，產品&文章自動添加 * `share`: 分享插件 * `dynamicField`: 動態參數綁定編輯 * `font`: 字體屬性編輯 ## 版塊升級 已經發布的版塊修改是即時生效的，版塊的改動不影響已經發布的網站，但會影響后面所有發布的網站，升級時注 意數據的兼容避免報錯。