array - ¿Cómo incluir un archivo CSS en Symfony 2 y Twig?
twig documentation (4)
En caso de que esté utilizando Silex, agregue Symfony Asset como una dependencia:
composer require symfony/asset
Luego puede registrar el Proveedor de servicios de activos :
$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''
)
),
),
));
Luego, en su archivo de plantilla Twig en la sección principal:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% block head %}
<link rel="stylesheet" href="{{ asset(''style.css'') }}" />
{% endblock %}
</head>
<body>
</body>
</html>
Estoy jugando con Symfony2 , y tengo problemas para incluir los archivos CSS y JS en la plantilla de Twig .
Tengo un paquete llamado Webs/HomeBundle dentro del cual tengo HomeController con indexAction que representa un archivo de plantilla indexAction :
public function indexAction()
{
return $this->render("WebsHomeBundle:Home:index.html.twig");
}
Entonces esto es fácil. Ahora lo que quiero hacer es incluir algunos archivos CSS y JS dentro de esta plantilla Twig. La plantilla se ve así:
<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
<link href="{{ asset(''css/main.css'') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
</body>
</html>
El archivo que me gustaría incluir, el archivo main.css se encuentra en:
Webs/HomeController/Resources/public/css/main.css
Entonces mi pregunta es básicamente, ¿cómo demonios incluyo un simple archivo CSS dentro de la plantilla de Twig?
Estoy usando la función Twig asset() y simplemente no golpea la ruta correcta de CSS. Además, ejecuto este comando en la consola:
app/console assets:install web
Esto creó una nueva carpeta
/web/bundles/webshome/...
esto es solo un enlace a la
src/Webs/HomeController/Resources/public/
¿derecho?
Preguntas
- ¿Dónde colocas tus archivos de activos , JS, CSS e imágenes? ¿Está bien colocarlos en
Bundle/Resources/publiccarpetaBundle/Resources/public? ¿Es ese el lugar correcto para ellos? - ¿Cómo se incluyen estos archivos de activos en su plantilla de Twig usando la función de activos? Si están en una carpeta pública, ¿cómo puedo incluirlos?
- ¿Debo configurar algo más?
Está haciendo todo bien, excepto pasar su ruta de paquete a la función asset() .
Según la documentation , en tu ejemplo, esto debería verse a continuación:
{{ asset(''bundles/webshome/css/main.css'') }}
Consejo : también puede llamar a activos: instalar con la tecla --symlink , por lo que creará enlaces simbólicos en la carpeta web. Esto es extremadamente útil cuando a menudo aplica cambios js o css (de esta forma, sus cambios, aplicados a src/YouBundle/Resources/public se reflejarán inmediatamente en web carpeta web sin necesidad de llamar a los assets:install nuevo):
app/console assets:install web --symlink
Además, si desea agregar algunos elementos en su plantilla secundaria, puede llamar al método parent() para el bloque Twig. En tu caso sería así:
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset(''bundles/webshome/css/main.css'') }}" rel="stylesheet">
{% endblock %}
Las otras respuestas son válidas, pero la guía oficial de mejores prácticas de Symfony sugiere usar la web/ carpeta para almacenar todos los activos, en lugar de paquetes diferentes.
Dispersar sus activos web en decenas de paquetes diferentes hace que sea más difícil administrarlos. La vida de sus diseñadores será mucho más fácil si todos los recursos de la aplicación se encuentran en una ubicación.
Las plantillas también se benefician de la centralización de sus activos, porque los enlaces son mucho más concisos [...]
Me gustaría añadir esto sugiriendo que solo coloque micro-activos dentro de micro-paquetes, como algunas líneas de estilos solo requeridas para un botón en un paquete de botones, por ejemplo.
Y puedes usar la etiqueta% stylesheets% (feature 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 %}
Puede escribir path to css como parámetro (% parameter_name%).
Más sobre esta variante: http://symfony.com/doc/current/cookbook/assetic/asset_management.html