beatgeb / terrific-core-bundle
启用基于terrific概念的前端开发
Requires
- symfony/framework-bundle: 2.8.*
Requires (Dev)
- symfony/console: 2.8.*
- symfony/filesystem: 2.8.*
- symfony/finder: 2.8.*
- symfony/yaml: 2.8.*
- twig/twig: 1.24.*
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 辅助函数 include 和 render 相似,并将包含的/嵌入的模块模板包装在适当的模块 <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。
就这样……享受吧!