ThemeMagic 可以通过界面来实时预览修改的样式对页面的影响 ... 它的左边是一些配置的面板 ... 每个面板上都有一些选项 ... 我们可以自己去添加新的面板或者新的选项 ...

方法就是去修改模板的 templateDetails.xml ... 打开 Joomla 所在的目录 ... templates ... 找到 t3 架构的模板 t3_blank ...

打开 templateDetails.xml ...

浏览到 <config> 标签 ... 这里面的东西就是在 ThemeMagic 里看到的面板还有选项 ....

<fields> 标签可以定义新的配置面板 ... <field> 标签可以为面板里添加选项 .... 选项可以拥有不同的类型 ... 比如文本字段 ... 颜色选择器 ... 下拉菜单 ... 单选按钮等等 ...

我们在模块面板里添加一个可以为模块内部添加内边距的一个文本框 ...

这个 module_params 就是模块面板 ...

另起一行 ... 定义新的配置选项可以使用 <field> 标签 ... 先输入 <field />

在标签里需要添加一些属性... 先添加一个 name 属性 .... 这个 name 也就是这个选项的名称 ... 这个名称可以作为一个变量 ... 用在模板的 less 里 ...

或者我们可以直接使用已有的变量名称 ... 比如这里我们使用前一个视频里介绍的 T3modulePadding 这个变量名 ...

模块内边距样式里使用了这个变量 ...

然后输入 type ... 也就是这个选项的类型 ... 设置为 text ... 普通的文本框 ... 再输入一个 class ... 添加一些 css 类 ... 你可以参考同样类型的选项去添加这个 css 类 .. input-tiny t3tm-dimension

再设置一下 label 标签属性 ... 属性的值我们可以设置可被翻译的字符 ... 然后你可以在模板的语言文件里去添加这个字符的翻译 ...

这里我们为了简单一些，可以直接输入中文 ... 模块内边距 .. 最后是 description 描述属性 ... 描述一下这个选项能做什么 ...

保存一下这个文件 ..

回到前台 ... 刷新 ... 打开 模块 ...

这里会出现 模块内边距 这个选项 .. 这里会显示默认的值是 15px ... 这个值是来自 less 目录下的 variables.less 这个文件..

我们可以修改一下 ... 比如改成 30 ...

点击 预览 ....

你会发现 （#右键，审查元素）... 页面上的模块的内边距 .. 现在会是 30 像素 ...