在Twig上使用Assetic嵌入

时间:2014-05-18 12:31:51

标签: php symfony twig

我是Symfony2和Twig的新手,我想将管理模板改编为Twig,并将其作为捆绑包包含在我的Symfony2项目中。

我只为资产,模板和部分创建了一个包。

我开始工作后解决了很多问题,但现在我不明白为什么资产不能很好地生成文件。

我在src / Name / Bundle / Resources中有下一个文件夹:

  • 公共
    • 管理员
    • CSS
    • 全球
    • 图像
    • JS​​
  • 的观点
    • 默认
      • default.html.twig
    • 布局
      • login.html.twig
    • 局部模板
      • footer.html.twig
      • head.html.twig
      • header.html.twig
      • javascripts.html.twig
      • sidebar.html.twig

我们的想法是定义默认布局,可以包含在未来布局中的部分,并生成不同的布局,扩展default.html.twig,并为特定类型的页面嵌入css或js等资源。

default.html.twig

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<head>
    {% block head %}{% endblock %}
</head>

<body>
    {% block header %}{% endblock %}
    {% block sidebar %}
        {#{{ include('NameBundle:Partials:sidebar.html.twig') }}#}
    {% endblock %}
    {% block content %}{% endblock %}
    {% block footer %}{% endblock %}
    {% block javascripts %}{% endblock %}
</body>

</html>

head.html.twig

<meta charset="utf-8"/>
<title>{% block title %}Admin Dashboard Template{% endblock %}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>

{% block stylesheets %}
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
  <!-- BEGIN GLOBAL MANDATORY STYLES -->
  {% stylesheets
    '@NameBundle/Resources/public/global/plugins/font-awesome/css/font-awesome.min.css'
    '@NameBundle/Resources/public/global/plugins/simple-line-icons/simple-line-icons.min.css'
    '@NameBundle/Resources/public/global/plugins/bootstrap/css/bootstrap.min.css'
    '@NameBundle/Resources/public/global/plugins/uniform/css/uniform.default.css' %}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css"/>
  {% endstylesheets %}
  <!-- END GLOBAL MANDATORY STYLES -->

  <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
  {% block page_level_plugin_stylesheets %}{% endblock %}
  <!-- END PAGE LEVEL PLUGIN STYLES -->

  <!-- BEGIN PAGE STYLES -->
  {% block page_stylesheets %}{% endblock %}
  <!-- END PAGE STYLES -->

  <!-- BEGIN THEME STYLES -->
  {% stylesheets
    '@NameBundle/Resources/public/global/css/components.css'
    '@NameBundle/Resources/public/global/css/plugins.css'
    '@NameBundle/Resources/public/admin/layout/css/layout.css'
    '@NameBundle/Resources/public/admin/layout/css/themes/default.css'
    '@NameBundle/Resources/public/admin/layout/css/custom.css' %}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css"/>
  {% endstylesheets %}
  <!-- END THEME STYLES -->

  <link rel="shortcut icon" href="favicon.ico"/>
{% endblock %}

我有2个静态字段,现在我想生成登录模板,扩展默认模板并向头部添加一些资源:

login.html.twig

{% extends 'NameBundle:Default:metronic.html.twig' %}

{% block head %}
  {% embed 'NameBundle:Partials:head.html.twig' %}
    {% block page_stylesheets %}
        {% stylesheets
            '@NameBundle/Resources/public/global/plugins/select2/select2.css'
            '@NameBundle/Resources/public/admin/pages/css/login.css' %}
            <link href="{{ asset_url }}" rel="stylesheet" type="text/css"/>
        {% endstylesheets %}
    {% endblock %}
  {% endembed %}

  {{ parent() }}
{% endblock %}

config_dev.yml

assetic:
  use_controller: false
  bundles:        [ D2ArmoryMetronicBundle ]

我也用过:

php app/console assetic:dump --watch
php app/console cache:clear

我的浏览器中该代码的结果是:

<head>
  <meta charset="utf-8">
  <title>Admin Dashboard Template</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="" name="description">
  <meta content="" name="author">

  <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all" rel="stylesheet" type="text/css">

  <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="/css/05f94b6_font-awesome.min_1.css" rel="stylesheet" type="text/css">
    <link href="/css/05f94b6_simple-line-icons.min_2.css" rel="stylesheet" type="text/css">
    <link href="/css/05f94b6_bootstrap.min_3.css" rel="stylesheet" type="text/css">
    <link href="/css/05f94b6_uniform.default_4.css" rel="stylesheet" type="text/css">
  <!-- END GLOBAL MANDATORY STYLES -->

  <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
  <!-- END PAGE LEVEL PLUGIN STYLES -->

  <!-- BEGIN PAGE STYLES -->
    <link href="/css/bf1faf2_select2_1.css" rel="stylesheet" type="text/css">
    <link href="/css/bf1faf2_login_2.css" rel="stylesheet" type="text/css">
  <!-- END PAGE STYLES -->

  <!-- BEGIN THEME STYLES -->
    <link href="/css/ed78c26_components_1.css" rel="stylesheet" type="text/css">
    <link href="/css/ed78c26_plugins_2.css" rel="stylesheet" type="text/css">
    <link href="/css/ed78c26_layout_3.css" rel="stylesheet" type="text/css">
    <link href="/css/ed78c26_default_4.css" rel="stylesheet" type="text/css">
    <link href="/css/ed78c26_custom_5.css" rel="stylesheet" type="text/css">
  <!-- END THEME STYLES -->

<link rel="shortcut icon" href="favicon.ico">


</head>

控制器如何处于假值我可以看到在/ web / css中创建的文件。

在该首部代码中,您可以找到资产的3个前缀:

05f94b6_ // Files included in head.html.twig GENERATED
bf1faf2_ // Files included in the login.html.twig embed code NOT GENERATED
ed78c26_ // Files included in head.html.twig GENERATED

我不知道我是否原谅了什么,或者我误解了工作流程。

提前致谢并对不起我的英语,我尽力做到最好。

0 个答案:

没有答案