beatgeb/terrific-core-bundle

启用基于terrific概念的前端开发

安装: 24

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 2

语言:JavaScript

类型:symfony-bundle

v1.0.4 2017-01-17 16:58 UTC

This package is not auto-updated.

Last update: 2024-09-20 21:42:33 UTC


README

TerrificCore 组件使得基于 Terrific 概念 的前端开发变得简单。它为你提供了一个良好的起点和有用的功能(例如,额外的 assetic 过滤器),以简化你的前端开发。

TerrificCore 组件没有依赖,但与 TerrificComposerBundle 结合使用效果最佳。有关安装 TerrificComposerBundle 的说明,请参阅 此处

安装

可以通过 Composer 方便地安装 TerrificCoreBundle。只需将以下内容添加到您的 composer.json 文件中

// composer.json
{
    // ...
    require: {
        // ...
        "brunschgi/terrific-core-bundle": "dev-master"
    }
}

注意:请将上述代码片段中的 dev-master 替换为最新稳定分支,例如 1.0.*。请检查 Github 上的标签,了解哪些版本可用。然后,您可以通过在 composer.json 文件所在的目录中运行 Composer 的 update 命令来安装新依赖项

php composer.phar update

现在,Composer 将自动下载所有必需的文件,并为您安装它们。剩下的只需更新您的 AppKernel.php 文件,并注册新组件

// in AppKernel::registerBundles()
public function registerBundles()
{
    return array(
        // ...
        new Terrific\CoreBundle\TerrificCoreBundle(),
    );
}

app/config/config.yml 中启用新的 terrificrewrite 过滤器

# app/config/config_dev.yml
# extend assetic filter configuration (rewrite of the backround image path in your terrific modules)
assetic:
    …
    filters:
        …
        terrificrewrite:
            resource: %kernel.root_dir%/../vendor/brunschgi/terrific-core-bundle/Terrific/CoreBundle/Resources/config/terrificrewrite.xml

app/config/config_dev.yml 中启用组件的配置

# app/config/config_dev.yml
terrific_core:
    copy_images: true # copy your module images on the fly without running `assets:install web`

用法

要查看 TerrificComposerCore 的实际效果,请下载 Terrific Composer Distribution 并尝试使用包含的示例。有关 Terrific 概念的更多信息,请访问 http://terrifically.org

之后,以下操作应该很简单 ;-)

基本布局

基本 twig 布局提供了您开始 Terrific 项目所需的一切。只需从您的项目布局扩展基本布局即可

{# eg. src/Terrific/Composition/Resources/views/base.html.twig #}
{% extends 'TerrificCoreBundle::base.html.twig' %}
...

核心布局为您提供了多个 twig 块,您可以根据需要扩展或覆盖它们。其中最重要的包括

    {# main content of your page #}
    {% block composition %}here comes the content of the <body> element…{% endblock %}

    {# content of the <title> element #}
    {% block title %}Terrific Composer{% endblock %}

    {# placeholder for your meta tags (charset is always set to utf-8) #}
    {% block meta %}here comes your meta tags…{% endblock %}

    {# styles #}
    {% block styles %}
        {% stylesheets
            '@TerrificComposition/Resources/public/css/reset.less'
            '@TerrificComposition/Resources/public/css/grid.less'
            '@TerrificComposition/Resources/public/css/elements.less'
            output="css/compiled/project.css"
        %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

        {# styles from parent (terrific core) layout #}
        {{ parent() }}
    {% endblock %}

    {# scripts #}
    {% block scripts %}
        {% javascripts
            '../src/Terrific/Module/*/Resources/public/js/*.js'
            '../src/Terrific/Module/*/Resources/public/js/skin/*.js'
            output='js/compiled/base.js'
        %}
            <script src="{{ asset_url }}" type="text/javascript"></script>
        {% endjavascripts %}
    {% endblock %}

有关可用块的全列表,请参阅 @TerrificCoreBundle::base.html.twig。

模块宏

每个 Terrific 模块 都是一个独立的组件。模块宏使得在您的页面上混合和匹配它们变得简单。它的工作方式与内置的 twig 辅助函数 includerender 相似,并将包含的/嵌入的模块模板包装在适当的模块 <div> 中,例如 <div class="mod mod-news" data-connectors="update">... your template ...</div>

包含模块模板

{# wrap & include the view template /src/Terrific/Module/Teaser/Resources/views/default.html.twig #}
{{ tc.module('Teaser', 'default') }}

{# wrap & include the view template /src/Terrific/Module/Teaser/Resources/views/Concept/reusability.html.twig #}
{{ tc.module('Teaser', 'Concept/reusability') }}

嵌入模块控制器

如果您使用 Terrific 构建不仅是模板,而是真正的应用程序,那么将所有数据相关的工作委托给模块本身可能很有用,这样您就不必重复自己。

{# wrap & embed the module controller /src/Terrific/Module/Navigation/Controller/NavigationController.php -> mainAction #}
{{ tc.module('Navigation', 'Navigation:main') }}

模块宏可以接受比模块名称和视图更多的参数。

{% macro module(name, view, skins, connectors, attrs, data) %}

有关更详细的信息,请参阅 Twig/Extension/terrificcore.html.twig。

就这样……享受吧!