README

Bootstrap 主题包为基于 Symfony2 的 Bootstrap 项目提供了管理主题/模板的能力。您可以将实时编辑器集成到您的主题中，以便实时编辑主题，并保存更改。

还有一个服务允许您编译主题的更改并获取当前主题的信息。

例如用法见 (Corvus)[https://github.com/ilikeprograms/corvus]

此项目使用 (Cluckles)[https://github.com/ilikeprograms/Cluckles] 来实现实时编辑功能。

入门

要开始使用 BootstrapThemeBundle，请将项目和其依赖项添加到您的 app/composer.json 文件中。

{
    "require": {
        "ilp/bootstrap-theme-bundle": "~0.1.0",
        "oyejorge/less.php": "~1.5"
    }
}

然后，在您的 AppKernel 中启用此 Bundle

$bundles = array(
// ... Other Dependencies
    new ILP\BootstrapThemeBundle\ILPBootstrapThemeBundle()
);

然后提供包含您想要 Bundle 管理的主题/模板文件夹的文件夹（config.yml），以及包含资源的 Bundle（以下格式，供应商和 Bundle 名称不带 "Bundle"）

ilp_bootstrap_theme:
    theme_base: 'src/Corvus/FrontendBundle/Resources/public/css'
    template_base: 'src/Corvus/FrontendBundle/Resources/views'
    bundle: CorvusFrontend # Not case sensitive (Corvus = Vendor, Frontend = Bundle name)

这些文件夹期望 public/css 和 Resources/views 将有以主题/模板名称命名的文件夹。预期的 Resources/views/* 文件夹将包含当前主题的 twig 模板。期望 public/css 文件夹将包含包含当前主题文件的文件夹。

使用主题

默认情况下，如果您在 public/css 文件夹中有一个文件夹，它将被视为主题目录，如果没有主题.css 文件，则会自动为其创建一个。此主题.css 文件将具有通用的基础 Twitter Bootstrap 风格。

要更改此主题，可以使用 BootstrapThemeBundle 的编辑器，其中有一个 themeEditor.html.twig 视图可以包含在其他模板中，以提供编辑器视图。然后可以与此视图交互来自定义当前主题。

然后您需要包含基本 bootstrap.less 以便可以实时修改

# theme_editor.bootstrap path returns the path to the Custom bootstrap.less file included with Cluckles
<link type="text/css" href="{{ asset('theme_editor.bootstrap_path') }}" rel="stylesheet/less" />

最后，您需要包含主题编辑器 js 并初始化一个实例，这将允许您编辑并保存更改

{% include 'ILPBootstrapThemeBundle:Default:editor-js.html.twig' %}

<script>
    var themeEditor = new ThemeEditor(less, {
        theme: {
            // theme_manager.getCurrentThemeJsonPath returns the web path to the current theme's theme.json file
            src: '{{ asset(theme_manager.getCurrentThemeJsonPath) }}'
        },
        export: {
            // Attach Export buttons to this element
            target: '#download-panel-footer',

            // Provide Export buttons for Css and JSON Formats
            css: {},
            json: {},

            save: {
                // Save Css and Json
                formats: ['css', 'json'],
                append: "#download-panel-footer",

                // Send the Modifications to here
                url: '{{ path('ilp_bootstrap_theme_EditorSaveModifications') }}',

                // Optional Callback
                callback: function () {
                    alert('Theme Changes have been Saved');
                }
            }
        }
    });
</script>

在 themeEditor.html.twig 视图中将有一个下载/保存链接，这将启用更改的保存。它们将被发布到 theme-editor/save URL（相对于项目 URL），然后 theme_manager 服务将编译并保存更改。