问题

Question

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

我有一个名为Webs/HomeBundle的软件包，我在其中HomeController使用indexAction呈现了一个twig模板文件：

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文件？

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

app/console assets:install web

这创建了一个新文件夹

/web/bundles/webshome/...

这只是链接到

src/Webs/HomeController/Resources/public/

正确？

问题

您在哪里放置资产文件，JS，CSS和图片？可以将它们放在Bundle/Resources/public文件夹中吗？这是他们的合适位置吗？
如何使用资产功能在Twig模板中包含这些资产文件？如果它们在公共文件夹中，我该如何包含它们？
我应该配置别的吗？

Answer 1

除了将捆绑路径传递给asset()函数外，您正在做的一切正确。

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

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

提示：您还可以调用资产：使用--symlink密钥安装，因此它将在网络文件夹中创建符号链接。当您经常应用js或css更改时，这非常有用（这样，应用于src/YouBundle/Resources/public的更改将立即反映在web文件夹中，而无需致电{ {1}}再次）：

assets:install

此外，如果您希望在子模板中添加某些资源，则可以为Twig块调用app/console assets:install web --symlink方法。在你的情况下，它将是这样的：

parent()

Answer 2

您可以使用％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

Answer 3

其他答案有效，但Official Symfony Best Practices指南建议使用web/文件夹存储所有资源，而不是存储不同的资源。

将您的网络资源分散到数十个不同的捆绑包中   更难以管理它们。你的设计师＆＃39;生活会很多   如果所有应用程序资产都在一个位置，则会更容易。

模板也可以从集中资产中受益，因为   链接更简洁[...]

我建议您只将微资产放在微型捆绑包中，例如只需按钮组中按钮所需的几行样式，就可以了解这一点。

Answer 4

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

composer require symfony/asset

然后您可以注册资产服务提供商：

$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>

如何在Symfony 2和Twig中包含CSS文件？

问题

4 个答案: