[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`: 字体属性编辑 ## 版块升级 已经发布的版块修改是即时生效的，版块的改动不影响已经发布的网站，但会影响后面所有发布的网站，升级时注 意数据的兼容避免报错。