$ui 商业模板UI参数

概述：

商业模板专用，通过$ui数组中的字段，可调用商业模板中当前UI自定义的参数。

【注意】

• 模板中自定义变量名称不能和特殊变量$ui相同，否则会冲突报错；
• 可参考“UI自定义变量”，自定义设置商业模板UI参数（未写）。

使用范围：

商业模板专用，仅在当前UI文件夹中的index.php中调用,部分类型参数如颜色、图片可在当前UI文件夹中的index.css或其他css中调用，在当前UI文件夹中的index.js中调用，则需采用特殊方法。

类型：

变量，用于调用商业模板当前UI参数的变量。

语法：

//css文件中调用语法：$参数名称$
{color:$list_title_color$;}

//模板文件中调用语法：{$ui.参数名称}
<h2>{$ui.block1_title}</h2>

$ui数组：

$ui是一个数据的集合,是数组的形式。 【注意】$ui中的参数名不能有相同的，否则会冲突报错。

示例：

商业模板如何调用当前UI参数：

场景案例：商业模板首页某个区块的标题可自定义设置，对应的参数名称为block1_title。 模板代码： 找到该区块对应的UI文件夹下的index.php，编写以下代码：

<h2>{$ui.block1_title}</h2> //通过$ui调用对应的参数名

前台页面输出HTML：

<h2>区块标题</h2> //当设置的标题为“区块标题”时

UI所在文件夹下css文件中如何调用颜色类型的UI参数：

场景案例：商业模板首页某个区块的标题颜色可自定义设置，区块标题的类名为index_title，对应的颜色参数名称为index_title_color。

模板代码： 找到该区块对应的UI文件夹下的index.css或其他css文件，编写以下代码：

.index_title{color:$index_title_color$;}

前台生成的css代码：

.index_title{color:#ffffff;}

UI所在文件夹下css文件中如何调用图片类型的UI参数：

场景案例：商业模板首页某个区块的背景图可自定义设置，区块的类名为block1，对应的背景图参数名称为block1_bg。

模板代码： 找到该区块对应的UI文件夹下的index.css或其他css文件，编写以下代码：

.block1{bacground:$block1_bg$;}

前台生成的css代码：

.block1{bacground:../../../upload/202001/12312312312.jpg;}//当自定义的背景图片路径为../../../upload/202001/12312312312.jpg时

index.js文件中如何调用商业模板UI参数：

通过js获取首页某个区块的自定义标题值，假设该区块标题的参数名称为block1_title，值为“区块标题”，则可把该模板参数写到模板文件某个元素或元素的某个属性中，如“模板代码示例”，再通过js去获取该元素的内容或属性值，如“js代码示例”。

模板代码： 找到该区块对应的UI文件夹下的index.php，假设调用该UI参数的元素h2的类名为block1_title，则代码如下：

<h2 class="block_title">{$ui.block1_title}</h2>

js代码： 找到该区块对应的UI文件夹下的index.js，编写以下代码：

var title1=$('.block_title').html(); //获取类名为block_title的元素的内容，将其赋值为title1，title1就是UI参数block1_title的值
console.log(title1); //将title1打印出来，即可查看UI参数block1_title的值