Как включить файл CSS в Symfony 2 и Twig?

Question

Как включить файл CSS в Symfony 2 и Twig?

55

Я играю с Symfony2, и у меня есть проблемы, включая CSS и JS файлы в Twig шаблон.

У меня есть пакет с именем Webs/HomeBundle, внутри которого у меня есть HomeController с indexAction, который отображает файл шаблона ветки:

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

Так легко. Теперь, что я хочу сделать, нужно включить некоторые CSS и JS файлы в этот шаблон Twig. Шаблон выглядит следующим образом:

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

Файл, который я хотел бы включить, main.css file находится в:

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

Итак, мой вопрос в основном, как я могу включить простой CSS файл в шаблон Twig?

Я использую функцию Twig asset(), и она просто не попадает в правый CSS-путь. Кроме того, я запускаю эту команду в консоли:

app/console assets:install web

Это создало новую папку

/web/bundles/webshome/...

это просто ссылка на

src/Webs/HomeController/Resources/public/

верно?

Вопросы

Где вы размещаете файлы активов, JS, CSS и изображения? Можно ли разместить их в папке Bundle/Resources/public? Это правильное место для них?
Как вы включаете эти активы в свой шаблон Twig с помощью функции актива? Если они находятся в общей папке, как я могу их включить?
Должен ли я настроить что-то еще?

Limeni 28 авг. 2012, в 18:52

Источник

Теги:

symfony

twig

4 ответа

11

И вы можете использовать тег% 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

ZhukV 31 май 2013, в 11:02

3

Другие ответы действительны, но руководство Official Symfony Best Practices предлагает использовать папку web/ для хранения всех активов, а не для разных расслоения.

Рассеяние ваших сетевых ресурсов через десятки разных пакетов делает это их сложнее управлять. Жизнь ваших дизайнеров будет много проще, если все активы приложения находятся в одном месте.

Шаблоны также выигрывают от централизации ваших активов, поскольку ссылки гораздо более сжатые [...]

Я бы добавил к этому, предположив, что вы размещаете только микро-активы в микро-связках, например, несколько строк стилей, необходимых только для кнопки в пучке кнопок.

aalaap 27 май 2016, в 08:08

0

Если вы используете Silex, добавьте Symfony Asset как зависимость:

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>

Trix 26 июнь 2016, в 11:12

0

В соответствии с документацией, вы также должны добавить twig-bridge (для composer require symfony/twig-bridge )
Gianluca 15 нояб. 2017, в 10:23

Ещё вопросы

В соответствии с документацией, вы также должны добавить twig-bridge (для composer require symfony/twig-bridge )

Vitalii Zurian · Accepted Answer · 2012-08-28T20-02-00.000Z

Вы делаете все правильно, за исключением того, что передаете свой путь пакета к функции asset().

Согласно документации - в вашем примере это должно выглядеть следующим образом:

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

Совет: вы также можете вызвать активы: установить с помощью ключа --symlink, чтобы он создавал символические ссылки в веб-папке. Это очень полезно, если вы часто применяете изменения 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 %}

Ресурсы приложения / консоли: установка --watch автоматически регенерирует активы при их изменении
@Radu да, но если вы создадите символические ссылки, вам не понадобится --watch