67

我正在玩Symfony2 ，并且在Twig模板中遇到了包括CSS和JS文件在内的问题。

我有一个名为的包Webs/HomeBundle，里面HomeController有一个indexAction渲染树枝模板文件的包：

public function indexAction()
{
    return $this->render("WebsHomeBundle:Home:index.html.twig");
}

所以这很容易。现在我想做的是在这个 Twig 模板中包含一些 CSS 和 JS 文件。模板如下所示：

<!DOCTYPE html>
<html>
<head>  
    {% block stylesheets %}
        <link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
    {% endblock %}
</head>
<body>
</body>
</html>

我想包含的文件，main.css文件位于：

Webs/HomeController/Resources/public/css/main.css

所以我的问题基本上是，我到底如何在 Twig 模板中包含简单的 CSS 文件？

我正在使用 Twigasset()函数，它只是没有找到正确的 CSS 路径。另外，我在控制台中运行此命令：

app/console assets:install web

这创建了一个新文件夹

/web/bundles/webshome/...

这只是链接到

src/Webs/HomeController/Resources/public/

对？

问题

  1. 您将资产文件、JS、CSS 和图像放在哪里？可以把它们放在Bundle/Resources/public文件夹里吗？这对他们来说是正确的位置吗？
  2. 您如何使用资产功能将这些资产文件包含在您的 Twig 模板中？如果它们在公用文件夹中，我该如何包含它们？
  3. 我应该配置其他东西吗？
4

4 回答 4

79

asset()除了将捆绑路径传递给功能之外，您所做的一切都是正确的。

根据文档- 在您的示例中，这应该如下所示：

{{ asset('bundles/webshome/css/main.css') }}

提示：您也可以使用--symlink密钥调用 assets:install，这样它就会在 web 文件夹中创建符号链接。js这在您经常应用或更改时非常有用css（这样您的更改，应用到src/YouBundle/Resources/public将立即反映在web文件夹中，无需assets:install再次调用）：

app/console assets:install web --symlink

此外，如果您希望在子模板中添加一些资产，您可以调用parent()Twig 块的方法。在你的情况下，它会是这样的：

{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
于 2012-08-28T19:10:01.290 回答
12

您可以使用 %stylesheets% （资产特征）标签：

{% stylesheets
    "@MainBundle/Resources/public/colorbox/colorbox.css"
    "%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}

您可以将路径写入 css 作为参数 (%parameter_name%)。

有关此变体的更多信息：http: //symfony.com/doc/current/cookbook/assetic/asset_management.html

于 2013-05-31T10:08:44.907 回答
4

其他答案是有效的，但官方 Symfony 最佳实践指南建议使用该web/文件夹来存储所有资产，而不是不同的包。

将您的网络资产分散在数十个不同的捆绑包中会使管理它们变得更加困难。如果所有应用程序资产都在一个位置，您的设计师的生活将会轻松得多。

模板还受益于集中您的资产，因为链接更加简洁[...]

我建议您只将微资产放在微包中，例如仅在按钮包中的按钮需要的几行样式。

于 2016-05-27T07:35:23.870 回答
0

如果您使用Silex，请将Symfony 资产添加为依赖项：

composer require symfony/asset

然后您可以注册Asset Service Provider：

$app->register(new Silex\Provider\AssetServiceProvider(), array(
    'assets.version' => 'v1',
    'assets.version_format' => '%s?version=%s',
    'assets.named_packages' => array(
        'css' => array(
            'version' => 'css2',
            'base_path' => __DIR__.'/../public_html/resources/css'
        ),
        'images' => array(
            'base_urls' => array(
                'https://img.example.com'
            )
        ),
    ),
));

然后在 head 部分的Twig模板文件中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% block head %}
    <link rel="stylesheet" href="{{ asset('style.css') }}" />
    {% endblock %}
</head>
<body>

</body>
</html>
于 2016-06-26T10:30:09.187 回答