LESS 自定义

学习如何在主题中实现LESS自定义，添加你自己的UIkit主题或为定制工具添加新的设置项目。

文件结构

关于/less文件夹的简单概览：

文件/文件夹 描述
/less/theme.less 定义主题的样式并引入UIkit主题。每当你在主题设置中点击编译LESS（Compile LESS）时，这个文件便会被编译成CSS并保存在 /css 文件夹中。同时，所有的样式会被保存在/styles/STYLE-NAME/css 文件夹。
/less/customizer.json 定义哪些定制器参数会被默认显示或显示在增强模式中。它集合了UIkit的变量，规定哪些可以被色彩选择器赋值，哪些可以直接输入或者用选择框添加字体等。
/less/bootstrap.less 导入所有Boostrap相关文件（仅用于Joomla）。比如/less/theme.less 这个文件,每当在主题设置中点击编译LESS（Compile LESS），它便会被编译为CSS。
/less/uikit 包含UIkit主题文件。UIkit的核心文件在/warp/vendor/uikit文件夹中。

添加自定义LESS文件夹

在进行LESS自定义前，首先按以下教程操作：

  1. 复制/less文件夹，并重命名为/less-custom.
  2. 打开主题的config.php文件，并注册新文件夹，替换/less 文件夹: 
    'path' => array(
    'theme'   => array(__DIR__),
    'js'      => array(__DIR__.'/js'),
    'css'     => array(__DIR__.'/css'),
    'less'    => array(__DIR__.'/less-custom'), // Here
    'layouts' => array(__DIR__.'/layouts')
),
    注意 这将改变核心的LESS文件夹。在定制工具中进行改动生成所有样式都将编译CSS到新建的/less-custom文件夹中。
  3. 用以下引入规则替换全部内容，在新的/less-custom/theme.less中引入原来的/less/theme.less 
    @import "../less/theme.less";
    对于Joomla 3：为了使自定义操作有迹可循，使用以下引入规则，在新的/less-custom/bootstrap.less中引入原来的/less/bootstrap.less 。 
    @import "../less/bootstrap.less";
  4. 删除文件夹/less-custom/UIkit 和 /less-custom/bootstrap
  5. 现在，你可以开始在/less-custom/theme.less中添加你的自定义代码了。

定制 UIkit

UIkit有它自己的文档，查看UIkit（UIkit中文网）。在开始使用Warp主题和UIkit时，你可能需要看一下文档中的 变量, 最佳主题实践 以及 customizer.json。

按以下步骤添加你自己的UIkit主题。

  1. 按以上教程添加自定义LESS文件夹。
  2. 复制以下文件到你的/less-custom/ 文件夹：
    1. /less/uikit
    2. /less/bootstrap.less
    3. /less/theme.less
  3. 现在你可以定制/less-custom中的所有文件了，比如整个/less-custom/uikit文件夹，在/less-custom/theme.less文件或/less-custom/customizer.json文件中添加自定义变量。

在定制工具中选择自定义字体

Warp框架可以访问Google字体库中所有可用的字体。但是，你可能会想要添加你自己的字体或者不是由谷歌提供的字体。

用链接添加字体

  1. 按以上教程添加自定义LESS文件夹。
  2. 打开/less-custom/customizer.json文件，并在列表中添加你的字体选项以及正确的路径。 
    "Custom Fonts": [
    {"name": "FONT-FAMILY", "value": "'FONT-FAMILY'", "url":""}
],
"System Fonts": [ ... ]

添加自有字体

  1. 按以上教程添加自定义LESS文件夹。
  2. 在主题目录中新建一个/fonts文件夹，并将字体文件放入其中。
  3. 在/less-custom/theme.less中添加字体的@font-face 规则，并链接到你的字体文件： 
    @font-face {
  font-family: 'FONT-FAMILY';
  src: url('../fonts/FONT-FAMILY-webfont.eot');
  ....
}
  4. 打开/less-custom/customizer.json文件，像这样添加字体设置： 
    "Custom Fonts": [
    {"name": "FONT-FAMILY", "value": "\"FONT-FAMILY\", Helvetica, Arial, sans-serif"}
],
"System Fonts": [ ... ]

好了！现在可以在主题中使用你的字体了。

定制工具与图片

如果想要添加选择图片的选项，比如不同的背景，在定制工具中，你可以按以下教程进行操作。我们约定，你想要添加的两个不同背景样式是red 和 blue。

  1. 首先，在/styles/STYLE-NAME目录中新建一个/images文件夹，将你的背景图片放到这里。
  2. 按以上添加自定义LESS文件夹的教程新建一个theme.less。
  3. 为主体样式（body style）创建一个新变量，并添加到/less-custom/theme.less 文件。 
    @theme_global-body-style:    '';
  4. 现在，我们将为每种背景，创建mixin。在我们的例子中，分别为red和blue创建了mixin. 
    .body-style() when (@theme_global-body-style = red) {

  body { background: url(../styles/STYLE-NAME/images/my-red.jpg) 0 0 repeat; }

}

.body-style() when (@theme_global-body-style = blue) {

  body { background: url(../styles/STYLE-NAME/images/my-blue.jpg) 0 0 repeat; }

}
  5. 然后，我们需要调用生成实际CSS的mixin。 
    .body-style();
  6. 现在，为主体样式（body style）@theme_global-body-style创建一个选择框。只需添加以下代码到/less-custom/customizer.json中。 
    {
    "type": "select",
    "vars": [
        "@theme_global-body-style"
    ],
    "options": [
        {"name": "Default", "value": ""},
        {"name": "Red", "value": "red"},
        {"name": "Blue", "value": "blue"}
    ]
},
  7. 最后，在新创建的变量组（group）中进行定义。在我们的例子中，我们将定义添加到General 变量。 
        "groups": [
        {
            "label": "General",
            "vars": [
                "@theme_global-body-style",
                "@global-background",
                "@global-border",

由UIkit中文网翻译

UIkit