如何在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文件？

問題

回答

相關問題