README

Symfony2 的 Bundle

为您的项目提供强大的工具来创建替代主题。它将允许您为您的网站或一系列包创建主题。

您为什么要使用此包？

JavaScript、样式表和模板文件位于指定的文件夹中。
该包将寻找您的资产并将它们合并在一起，不再有烦恼。
您可以将包的输出分离成多个主题，让您可以轻松覆盖其他人的主题。
您可以通过分组文件来创建组件（参见 5. 高级用法）

重要提示

默认情况下，资产以随机顺序加载（参见章节配置 > 文件顺序）

待办事项

允许使用 console assets:install 命令安装资产（图像、图标、字体）。

将翻译文件集成到主题中。
请再次检查 assetic 过滤器是否正常工作。

安装

1. 下载包

在您的 composer.json 中添加以下内容

{
    "require": {
        "teapotio/base-theme-bundle": "dev-master",
    }
}

然后更新您的项目

php composer.phar update

2. 将包添加到 AppKernel 类

您的 AppKernel 应位于项目的 app 文件夹中。

<?php
...
public function registerBundles()
{
    $bundles = array(
        ...
        new Teapotio\Base\ThemeBundle\TeapotioBaseThemeBundle(),
        ...
    );
...

3. 配置包

将以下内容添加到您的 config.yml 文件中。

teapotio_base_theme:
    directories: [] # List of folders that contains your themes
    themes: [] # List of themes that are enabled

注意：顺序很重要，找到的第一个模板将被使用。如果您想用您自己的主题覆盖其他主题，您的主题必须在其他主题之前定义。

示例

teapotio_base_theme:
    directories:
        - Resources/themes # Path relative to the app folder (example: YourProject/app/Resources/themes)
        - @TeapotioSiteBundle/Resources/themes # Supports namespace
    themes:
        - rainbow_override # Theme that overrides part or all of the "rainbow" theme
        - rainbow
        - simplified

4. 创建您的第一个主题

定义您将托管主题的文件夹，并将您的主题添加到已启用的主题列表中。

例如，我们将主题命名为 "teapotio_rocketstorm"（最好将您的主题前缀为您的 github 账户名称，这样可以避免主题冲突），我们将主题保存在 app/Resources/themes 中，配置如下

teapotio_base_theme:
    directories:
        - Resources/themes
    themes:
        - teapotio_rocketstorm

A. 模板

在您的项目中，您可能需要使用以下内容来渲染模板

return $this->render('YourBundle:Controller:action.html.twig', array());

您只需在您的主题中创建一个模板，如下所示：app/Resources/themes/teapotio_rocketstorm/YourBundle/Controller/action.html.twig

传递给 render 方法的字符串应该是您的主题中模板的路径（它包括包名称）。

这就完成了！

B. 资产

在开发过程中，运行以下命令

php app/console assetic:watch

如果资产位于您的主题中，您将注意到该命令将它们导出到一个以您的主题命名的文件中。

资产可以位于您的主题中的任何位置。

示例

app/Resources/themes/teapotio-rocketstorm/YourBundle/Controller/action.css
app/Resources/themes/teapotio-rocketstorm/YourBundle/Controller/action.js

在您的HTML中，添加以下内容

<!-- at least one CSS file must be defined for the file to be generated -->
<link href="/css/themeteapotio_rocketstorm.css" rel="stylesheet" media="screen" />
<!-- at least one JS file must be defined for the file to be generated -->
<link href="/css/themeteapotio_rocketstorm.js" rel="stylesheet" media="screen" />

特殊字符被下划线替换（使用正则表达式替换 /[^\w+]/ 为 _）。

完成了！

C. 配置（可选）

在您的主题文件夹根目录下创建一个 theme.yml 文件。

theme: ~

文件顺序

您应该预期您的资源文件是随机加载的。如果您需要确保某些资源（如jQuery）按特定顺序加载，则可以在主题配置文件中的 assets 键下列出这些资源，如下所示

theme:
    assets:
        scripts: [] # A list of scripts (such as Javascript) that must be loaded in a specific order
        stylesheets: [] # A list of stylesheet (such as CSS) that must be loaded in a specific order

例如

theme:
    assets:
        scripts:
            - assets/js/jquery.js
            - assets/js/flight.min.js
        stylesheets:
            - assets/css/bootstrap.css

它将先加载 jquery.js 和 flight.min.js，然后加载其他文件。

修改此文件时，不要忘记清除缓存。

5. 高级使用

您可以通过将不同的文件组合起来轻松创建HTML组件

<!-- app/Resources/themes/teapotio_rocketstorm/components/modal.html.twig -->
<div class="Modal">
</div>

/* app/Resources/themes/teapotio_rocketstorm/components/modal.css */
.Modal {
    display: block;
    border: 1px solid #000;
}

/* app/Resources/themes/teapotio_rocketstorm/components/modal.js */
$(document).ready(function () {
    // Do the needful
});

对于您的CSS文件，可以考虑使用 SuitCSS，对于您的JS文件，可以考虑使用 FlightJS。这两个库都将帮助您创建一致的组件。

teapotio / base-theme-bundle

维护者

详细信息