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