深度開發 · AIPage網站版塊模板開發文檔

[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` : 字體屬性編輯 ## 版塊升級已經發布的版塊修改是即時生效的，版塊的改動不影響已經發布的網站，但會影響后面所有發布的網站，升級時注意數據的兼容避免報錯。