自定义

了解如何添加您自己的自定义设置，进一步了解Warp框架的文件层次结构。

提供尽可能多的灵活性，Warp框架采用特殊文件级联。如果你引入了任意文件，如CSS，JS或PHP模板文件，Warp按先后顺序查询特定文件夹中的文件，第一个被找到的文件将被加载。这会给你充分的灵活性来覆写任何重要的主题相关文件。

我们将进一步解释覆写级联。如果你只想了解如何覆写主题文件，直接翻看相应的例子即可。

覆写级联（Override cascade）

这是一个关于/layouts文件夹覆写层次的例子。

1. Styles 文件夹

主题中的 /styles/STYLE-NAME/layouts 文件夹处于处于层次结构的最高层，在此进行的自定义项或附加项将会覆写所有其他主题文件。当然，此文件夹会在更新时被保留，所以这是进行自定义操作的最佳位置。

2. Theme 文件夹

主题中的 /layouts 文件夹是用于存储主题中所有特殊的布局文件。

3. Systems 文件夹

主题中的/warp/systems/joomla/layouts 或 /warp/systems/wordpress/layouts 文件夹提供需要与特定CMS进行整合的单独系统实现。这一层，使Warp框架适应于确定的系统，为主题开发构建一致的API。

4. Warp 文件夹

在/warp/layouts文件夹中，包含了由核心框架生成的基础覆写设置。核心框架的每一部分均是通用的，被设计为能运行于所有已支持的系统上。

主题中的config.php文件，定义了/js, /css 和 /layouts 三个文件夹的级联。如果需要在级联中注册另一个文件夹，你可以再次进行操作。

布局的覆写

定制一般的主题布局，你需要覆写 /layouts/theme.php。为此，需要创建 /styles/STYLE-NAME/layouts 目录，将文件复制到此处，然后开始添加你的PHP代码。

通过这样的方式也能覆写系统文件。例如，只需要将Joomla的文章布局 /warp/systems/joomla/layouts/com_content/article/default.php复制到你的样式文件夹 /styles/STYLE-NAME/layouts/com_content/article/default.php中，并修改它。这样，你修改了的文章布局文件将会替代默认的系统布局。这个方法同样适用用Wordpress文件。

添加你的CSS

有几种途径可以为Warp主题添加自定义CSS。你可以使用定制工具改变主题绝大部分设置，而不需要写CSS代码。如果在样式文件夹中存在style.less文件，请记住，你设置的样式只会在定制工具中显示。当你使用定制工具时，各种改动都会被保存在style.less文件中。它与主题的LESS文件一起被编译为 /css/theme.css 文件，并覆写你的所有自定义设置。

添加自定义CSS

可以通过定制工具添加自定义CSS，也可以通过在/css文件夹中为相关样式创建 custom.css文件进行添加。用这种方法添加的CSS不会在保存定制工具中的样式时被覆写。

不使用LESS和定制工具添加CSS

如果你不打算使用定制工具，只需要复制一份现成的样式并删除 style.less 文件。现在，编译LESS时，/css/theme.css将不再被覆写。你可以在 theme.css 文件中直接写入自定义设置。

添加自定义 JavaScript

配置文件 /layouts/theme.config.php 初始化所有PHP类，并加载必要的JavaScript。如果需要加载自定义JavaScript文件，就在此处进行。启用压缩（Enabled compression）与 Data URI 会自动应用于你添加到此处的所有文件。

  1. 新建一个 /styles/STYLE-NAME/layouts/theme.config.php文件。
  2. 使用PHP的require函数加载原始文件。
  3. 然后添加你的JavaScript文件到asset集，这样它将被自动加入到模板头部。
  4. 将你的自定义 JavaScript 文件放入 /styles/STYLE-NAME/js/MY-JS.js 目录中。
<?php

require(__DIR__.'/../../../layouts/theme.config.php');

// add script
$this['asset']->addFile('js', 'js:MY-JS.js');

为Wordpress定制模板文件

可以为模板文件使用不同的布局，例如为页面创建不同的样式，在主题文件夹中，创建page-前缀带ID或page-slug的文件。

  • page-{id}.php
  • page-{slug}.php

比如说，你想为ID 80的页面定制内容。在主题文件夹中，创建一个文件，并命名为page-80.php，写入以下内容。

<?php get_header(); ?>

Put your content here...

<?php get_footer(); ?>

由UIkit中文网翻译

UIkit