如何在 Symfony 2 和 Twig 中包含 CSS 文件? [英] How to include CSS file in Symfony 2 and Twig?
问题描述
我正在使用 Symfony2，但在 Twig 中遇到了包括 CSS 和 JS 文件在内的问题模板.
I'm playing around with Symfony2, and I have problems including CSS and JS files in Twig template.
我有一个名为 Webs/HomeBundle 的包，其中我有 HomeController 和 indexAction ，它呈现一个树枝模板文件:
I have a bundle named Webs/HomeBundle inside which I have HomeController with indexAction that renders a twig template file:
public function indexAction()
{
return $this->render("WebsHomeBundle:Home:index.html.twig");
}
所以这很容易.现在我想做的是在这个 Twig 模板中包含一些 CSS 和 JS 文件.模板如下所示:
So this is easy. Now what I want to do, is to include some CSS and JS files inside this Twig template. Template looks like this:
<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
</body>
</html>
我想包含的文件，main.css 文件位于:
The file I would like to include, main.css file is located in:
Webs/HomeController/Resources/public/css/main.css
所以我的问题基本上是，我到底如何在 Twig 模板中包含简单的 CSS 文件?
So my question is basically, how the hell do I include simple CSS file inside Twig template?
我正在使用 Twig asset() 函数，但它没有找到正确的 CSS 路径.另外，我在控制台中运行此命令:
I'm using Twig asset() function and it just doesn't hit the right CSS path. Also, I run this command in console:
app/console assets:install web
这创建了一个新文件夹
/web/bundles/webshome/...
这只是链接到
src/Webs/HomeController/Resources/public/
对吗?
- 您将资产文件、JS、CSS 和图像放在哪里?可以将它们放在
Bundle/Resources/public文件夹中吗?那是适合他们的位置吗? - 如何使用资产功能将这些资产文件包含在您的 Twig 模板中?如果它们在公共文件夹中，我该如何包含它们?
- 我应该配置其他东西吗?
- Where do you place your asset files, JS, CSS, and images? Is it OK to put them in
Bundle/Resources/publicfolder? Is that the right location for them? - How do you include these asset files in your Twig template using asset function? If they are in public folder, how can I include them?
- Should I configure something else?
推荐答案
除了将包路径传递给 asset() 函数之外，您做的一切都是正确的.
You are doing everything right, except passing your bundle path to asset() function.
根据文档 - 在您的示例中，这应该如下所示:
According to documentation - in your example this should look like below:
{{ asset('bundles/webshome/css/main.css') }}
提示:您也可以使用 --symlink 键调用 assets:install，因此它会在 web 文件夹中创建符号链接.当您经常应用 js 或 css 更改时，这非常有用(这样您的更改，应用于 src/YouBundle/Resources/public 将立即反映在web文件夹中，无需再次调用assets:install):
Tip: you also can call assets:install with --symlink key, so it will create symlinks in web folder. This is extremely useful when you often apply js or css changes (in this way your changes, applied to src/YouBundle/Resources/public will be immediately reflected in web folder without need to call assets:install again):
app/console assets:install web --symlink
此外，如果您希望在子模板中添加一些资产，您可以为 Twig 块调用 parent() 方法.在你的情况下，它会是这样的:
Also, if you wish to add some assets in your child template, you could call parent() method for the Twig block. In your case it would be like this:
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
这篇关于如何在 Symfony 2 和 Twig 中包含 CSS 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
