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

Я играю с 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 находится в:

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/

Правильно?

Вопросов

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

symfony twig
person Limeni    schedule 28.08.2012    source источник

Ответы (4)


arrow_upward
79
arrow_downward

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

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

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

Совет: вы также можете вызвать assets: install с помощью ключа --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 %}
person Vitalii Zurian    schedule 28.08.2012
comment
app / console assets: install --watch автоматически регенерирует активы по мере их изменения - person Radu; 24.09.2014
comment
@Radu да, но если вы создаете символические ссылки, вам не понадобится --watch - person Zero; 10.02.2015

arrow_upward
12
arrow_downward

И вы можете использовать тег% 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 как параметр (% имя_параметра%).

Подробнее об этом варианте: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

person ZhukV    schedule 31.05.2013

arrow_upward
4
arrow_downward

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

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

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

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

person aalaap    schedule 27.05.2016

arrow_upward
0
arrow_downward

Если вы используете 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>
person Pmpr    schedule 26.06.2016
comment
Согласно документации, вы также должны добавить ветвь-мост (composer require symfony/twig-bridge) - person Gianluca; 15.11.2017