Question

我正在使用symfony 2.5并且包括css和js文件虽然它们似乎工作但是当我在浏览器中检查源时我看到包含多个css和js文件，因为我只包含它们一次。这就是我的header.html.twig看起来像

{% block head %}
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Home | Flat Theme</title>
        {% block stylesheets %}
            {% stylesheets '@DefaultBundle/Resources/public/css/*' %}
            <link rel="stylesheet" href="{{ asset('bundles/default/css/bootstrap.min.css') }}"/>
            <link rel="stylesheet" href="{{ asset('bundles/default/css/font-awesome.min.css') }}"/>
            <link rel="stylesheet" href="{{ asset('bundles/default/css/prettyPhoto.css') }}"/>
            <link rel="stylesheet" href="{{ asset('bundles/default/css/animate.css') }}/">
            <link rel="stylesheet" href="{{ asset('bundles/default/css/main.css') }}"/>
            {% endstylesheets %}
        {% endblock %}

        {% block topjavascripts %}
            {% javascripts '@DefaultBundle/Resources/public/js/*' %}
            <script src="{{ asset('bundles/default/js/html5shiv.js') }}"></script>
            <script src="{{ asset('bundles/default/js/respond.min.js') }}"></script>
            {% endjavascripts %}
        {% endblock %}
    </head>
{% endblock %}
<body>

以下是我在浏览器中看到的来源，您会注意到每个css和js文件已被提及超过5次。

我尝试从@DefaultBundle/Resources/public/css/*删除{% stylesheets '@DefaultBundle/Resources/public/css/*' %}，但这样做会删除所有样式

我做错了什么？

enter image description here

Answer 1

试试这个：

{% block head %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home | Flat Theme</title>
    <link rel="stylesheet" href="{{ asset('bundles/default/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/default/css/font-awesome.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/default/css/prettyPhoto.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/default/css/animate.css') }}/">
    <link rel="stylesheet" href="{{ asset('bundles/default/css/main.css') }}"/>

    <script src="{{ asset('bundles/default/js/html5shiv.js') }}"></script>
    <script src="{{ asset('bundles/default/js/respond.min.js') }}"></script>
</head>
{% endblock %}
<body>

或者，如果您不想明确调用每个文件，请尝试以下方法：

{% block head %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home | Flat Theme</title>
    {% block stylesheets %}
        {% stylesheets 'bundles/default/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
        {% endstylesheets %}
    {% endblock %}

    {% block topjavascripts %}
        {% javascripts '@DefaultBundle/Resources/public/js/*' %}
            <script src="{{ asset_url }}"></script>
        {% endjavascripts %}
    {% endblock %}
</head>
{% endblock %}
<body>

Answer 2

这很有趣

           {% stylesheets '@DefaultBundle/Resources/public/css/*' %}

使用你告诉模板引擎迭代资产目录中的所有css，并将所有<link/>添加到它们，这就是他们重复资产的原因

Answer 3

根据文件：（http://symfony.com/doc/current/book/templating.html#including-stylesheets-and-javascripts-in-twig）

您还可以添加位于捆绑包中的资产。资源/公共文件夹。您将需要运行php app / console assets：install target [--symlink]命令，它将（或符号链接）文件移动到正确的位置。（目标是默认情况下＆＃34; web＆＃34;）。

http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-javascript-files

要包含JavaScript文件，请在任何模板中使用javascripts标记：

{% javascripts '@AppBundle/Resources/public/js/*' %}
 <script src="{{ asset_url }}"></script>
{% endjavascripts %}

包含CSS样式表：

{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

请注意，在包含JavaScript文件的原始示例中，您使用@ AppBundle / Resources / public / file.js之类的路径引用了这些文件，但在此示例中，您使用其实际引用了CSS文件，可公开访问的路径：bundles / app / css。您可以使用其中任何一个，除了在使用CSS样式表的@AppBundle语法时存在导致cssrewrite过滤器失败的已知问题。

在symfony 2.5中包含css和js文件

3 个答案: