0

我正在使用 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/*from{% stylesheets '@DefaultBundle/Resources/public/css/*' %}但这样做会删除所有样式

我究竟做错了什么？

在此处输入图像描述

4

3 回答 3

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>
于 2014-09-14T18:14:16.757 回答
0

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

您还可以包含位于捆绑包的 Resources/public 文件夹中的资产。您需要运行 php app/console assets:install target [--symlink] 命令，它将文件移动（或符号链接）到正确的位置。（目标默认为“web”）。

http://symfony.com/doc/current/cookbook/assetic/asset_management.html#include-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 文件引用路径：捆绑包/应用程序/css。您可以使用其中任何一种，但在使用 CSS 样式表的 @AppBundle 语法时存在导致 cssrewrite 过滤器失败的已知问题。

于 2015-02-08T12:43:43.410 回答
0

这很有趣

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

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

于 2014-09-14T18:16:58.097 回答