2012-08-28 23 views
58

estoy jugando un poco con Symfony2, y no tengo problemas, incluyendo CSS y JS archivos en ramita plantilla.¿Cómo incluir un archivo CSS en Symfony 2 y Twig?

Tengo un paquete nombrado Webs/HomeBundle dentro de la cual tengo HomeController con indexAction que hace que un archivo de plantilla ramita:

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

Así que esto es fácil. Ahora lo que quiero hacer es incluir algunos archivos CSS y JS dentro de esta plantilla Twig. Plantilla 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 me gustaría incluir, main.css archivo se encuentra en:

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

Así que mi pregunta es, básicamente, cómo diablos voy a incluir archivo CSS sencilla en el interior de la ramita ¿modelo?

Estoy usando la función Twig asset() y simplemente no toca la ruta correcta de CSS. Asimismo, Corro este comando en la consola:

app/console assets:install web 

Esto crea una nueva carpeta

/web/bundles/webshome/... 

esto es sólo vincula a la

src/Webs/HomeController/Resources/public/ 

¿verdad?

Preguntas

  1. ¿Dónde colocar el activo archivos, JS, CSS, y las imágenes? ¿Está bien colocarlos en la carpeta Bundle/Resources/public? ¿Es ese el lugar correcto para ellos?
  2. ¿Cómo se incluyen estos activos archivos en su plantilla Twig usando la función activo? Si están en una carpeta pública, ¿cómo puedo incluirlos?
  3. ¿Debo configurar algo más?

Respuesta

74

Está haciendo todo bien, excepto al pasar su ruta de paquete a la función asset().

Según documentation - en su ejemplo, esto debe ser similar a continuación:

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

Consejo: también se puede llamar a los activos: instalar con --symlink clave, por lo que va a crear enlaces simbólicos en carpeta web.Esto es extremadamente útil cuando se aplican a menudo js o css cambios (de esta manera los cambios, aplicados a src/YouBundle/Resources/public se reflejan inmediatamente en web carpeta sin necesidad de llamar a assets:install de nuevo):

app/console assets:install web --symlink 

Además, si se desea agregar algunos activos en su plantilla secundaria, puede llamar al método parent() para el bloque Twig. En su caso sería así:

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

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

activos app/consola: instalar --watch regenerará automáticamente activos a medida que cambian – Radu

+1

@Radu sí, pero si crea enlaces simbólicos que no tendrá la --watch – Zero

11

y se puede utilizar la etiqueta de estilo%% (función 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 camino hacia la CSS como parámetro (% nombre_parámetro%).

Más acerca de esta variante: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

3

Las otras respuestas son válidas, pero la guía Official Symfony Best Practices sugiere el uso de la carpeta web/ para almacenar todos los activos, en lugar de diferentes paquetes.

Dispersión de sus activos web a través de decenas de diferentes paquetes hace que sea más difícil manejarlos. La vida de sus diseñadores será mucho más fácil si todos los recursos de la aplicación están en una ubicación.

plantillas también se benefician de la centralización de sus activos, debido a que los enlaces son mucho más concisa [...]

que me gustaría añadir a esto sugiriendo que sólo se pone micro-activos dentro de micro-haces , como algunas líneas de estilos que solo se requieren para un botón en un paquete de botones, por ejemplo.

0

En caso de que utilice Silex añadir el Symfony activos como una dependencia:

composer require symfony/asset 

A continuación, puede registrarse Activos de Servicio Proveedor:

$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 Twig archivo de plantilla 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> 
+0

Según la documentación, también se debe añadir twig- bridge ('composer require symfony/twig-bridge') – Gianluca

Cuestiones relacionadas