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

我的Symfony2玩弄，我有问题，包括CSS和嫩枝模板JS文件。如何在Symfony 2和Twig中包含CSS文件？

我有一个名叫包里面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

所以我的问题基本上是，到底如何做我包括里面的树枝简单的CSS文件模板？

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

app/console assets:install web

这创造了一个新的文件夹

/web/bundles/webshome/...

这仅仅是链接到

src/Webs/HomeController/Resources/public/

吧？

问题

你在哪里把你的资产文件，JS，CSS和图像？可以将它们放在Bundle/Resources/public文件夹中吗？这是他们的正确位置吗？

如何使用资产功能将这些资产文件包含在您的Twig模板中？如果他们在公共文件夹中，我怎么能包括他们？

我应该配置别的东西吗？

来源

2012-08-28 Limeni

除了将您的包路径传递给asset()函数，您正在做的都是正确的。

根据documentation - 在你的榜样这个应该如下：

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

提示：您也可以拨打资产：与--symlink键安装，所以它会创建Web文件夹的符号链接。这是非常有用的，当你经常应用js或css变化（这样的更改，适用于src/YouBundle/Resources/public会立即反映在无需web文件夹，再打电话assets:install）：

app/console assets:install web --symlink

另外，如果你想add你的孩子模板中的一些资产，你可以拨打parent()方法为树枝块。在你的情况下，它会是这样：

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

    <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet"> 
{% endblock %}

来源

2012-08-28 19:10:01

应用程序/控制台资产：安装，因为他们改变 – Radu

@Radu肯定的，但如果你创建符号链接，你将不需要--watch – Zero

而且你可以使用％样式％（assetic功能）标签：

{% 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％）。

来源

2013-05-31 10:08:44 ZhukV

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

将您的网络资产分散到数十个不同的捆绑包中，使其更难以管理它们。如果所有应用程序资产都位于同一位置，那么您的设计人员的生活将变得更加简单。

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

我想你建议你只放微束内微资产添加到该例如，仅在按钮捆绑包中需要按钮的几行样式。

来源

2016-05-27 07:35:23 aalaap

如果您正在使用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' 
      ) 
     ), 
    ), 
));

然后在你的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-26 10:30:09 Trix

按文档，你也应该补充twig- --watch会自动重新生成资产桥（'作曲家需要symfony/twig-bridge'） – Gianluca

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

问题

回答

相关问题