programing

Symfony 2 및 Twig에 CSS 파일을 포함하는 방법은 무엇입니까?

nasanasas 2020. 11. 28. 09:37
반응형

Symfony 2 및 Twig에 CSS 파일을 포함하는 방법은 무엇입니까?


Symfony2로 놀고 있는데 Twig 템플릿 CSSJS 파일을 포함하는 데 문제가 있습니다 .

나는 번들 이름이 Webs/HomeBundle내가 가진 내부 HomeControllerindexAction그 나뭇 가지 템플릿 파일을 렌더링을 :

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

그래서 내 질문은 기본적으로 Twig 템플릿에 간단한 CSS 파일을 어떻게 포함합니까?

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. 다른 것을 구성해야합니까?

번들 경로를 asset()함수 로 전달하는 것을 제외하고는 모든 것을 올바르게 수행하고 있습니다.

문서 에 따르면 -귀하의 예에서 이것은 다음과 같이 보일 것입니다.

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

: 또한 assets : install을 --symlink키로 호출 할 수 있으므로 웹 폴더에 심볼릭 링크가 생성됩니다. 이것은 자주 적용 js하거나 css변경할 때 매우 유용합니다 (이렇게하면 변경 사항이 적용되면 다시 호출 할 필요없이 폴더에 src/YouBundle/Resources/public즉시 반영 됩니다).webassets:install

app/console assets:install web --symlink

또한 자식 템플릿에 일부 자산 추가parent() 하려면 Twig 블록에 대한 메서드를 호출 할 수 있습니다. 귀하의 경우에는 다음과 같습니다.

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

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

그리고 % 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


The other answers are valid, but the Official Symfony Best Practices guide suggests using the web/ folder to store all assets, instead of different bundles.

Scattering your web assets across tens of different bundles makes it more difficult to manage them. Your designers' lives will be much easier if all the application assets are in one location.

Templates also benefit from centralizing your assets, because the links are much more concise[...]

I'd add to this by suggesting that you only put micro-assets within micro-bundles, such as a few lines of styles only required for a button in a button bundle, for example.


In case you are using Silex add the Symfony Asset as a dependency:

composer require symfony/asset

Then you may register Asset Service Provider:

$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'
            )
        ),
    ),
));

Then in your Twig template file in head section:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% block head %}
    <link rel="stylesheet" href="{{ asset('style.css') }}" />
    {% endblock %}
</head>
<body>

</body>
</html>

참고URL : https://stackoverflow.com/questions/12165485/how-to-include-css-file-in-symfony-2-and-twig

반응형