Plantillas en Drupal 8: Añadiendo CSS y JS

Agregar atributos a los elementos script

 

Si deseas agregar los atributos de una etiqueta script, debes agregar una clave de atributos a JSON siguiendo la secuencia de comandos URL.

 

 

Dentro del objeto siguiendo la clave de atributos, agregar el nombre del atributo que deseas que aparezca en la secuencia de comandos como una nueva clave.

 

 

El valor de esta clave será el valor del atributo. Si este valor se establece en true, el atributo aparecerá por si mismo sin un valor en el elemento.

 

Por ejemplo:

https://maps.go... {type: external, attributes: { defer: true, async: true, data-test: map-link } }

 

Esto daría como resultado la siguiente información:

 

< script src="https://maps.go..." async defer data-test="map-link"></script>

 

CDN / librerías alojadas externamente

 

Es posible que desees utilizar JavaScript externo en un CDN (Content Delivery Network) - p. ej. las fuentes web generalmente sólo están disponibles mediante una URL externa; no puedes alojar por ti mismo.

 

 

Esto se puede hacer declarando la librería como externa (especificando type: external).

 

 

También es una buena idea incluir alguna información sobre la librería externa en la definición.

 

Ten en cuenta que, en general, no es una buena idea cargar librerías desde un CDN; evitar esto si es posible.

 

 

Se introducen más posibilidades de fallo tanto en el rendimiento como en la seguridad, requiere más conexiones TCP/IP para configurar y generalmente no está en la caché del navegador.

 

angular.angularjs:
 remote: https://github....
 version: 1.4.4
 license:
   name: MIT
   url: https://github....
   gpl-compatible: true
 js:
   https://ajax.go... { type: external, minified: true }

 

Si deseas que tu archivo externo solicite el mismo protocolo que solicita la página, especifica un dirección URL relativa al protocolo:

 

js:

  //ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js: { type: external, minified: true }

 

O si deseas añadir CSS, aquí hay un ejemplo de integrar Font Awesome:

 

font-awesome:
 remote: https://fortawe...
 version: 4.5.0
 license:
   name: MIT
   url: https://fortawe...
   gpl-compatible: true
 css:
   theme:
     https://maxcdn.... { type: external, minified: true }

 

 

JavaScript en línea

 

JavaScript en línea es desalentador. Es recomendable poner el JS que desees utilizar en línea en su lugar en un archivo, porque eso permite que JavaScript se almacene en caché en el lado cliente.

 

También permite que se pueda revisar y filtrar el código JavaScript.

 

JavaScript en línea que genera un formato

 

Ejemplos de esto son los anuncios, botones de compartir en medios sociales, listado de widgets de social media.

 

 

Estos hacen uso de JavaScript en línea. Pero son sólo un tipo especial de contenido/marcado, ya que no se trata de decorar el contenido del sitio o hacer que sea interactivo, sino que tiran de contenido externo mediante JavaScript.

 

 

Deseas poner estos en un bloque personalizado o incluso directamente en la plantilla de una Twig.

 

Por ejemplo:

 

<script type="text/javascript"><!--
ad_client_id = "some identifier"
ad_width = 160;
ad_height = 90;
//--></script>
<script type="text/javascript" src="http://adserver..."></script>

 

 

<a class="twitter-timeline" href="https://twitter..." data-widget-id="307116909013368833">Tweets by @wimleers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 

JavaScript en línea que afecta a toda la página

 

Ejemplos de JavaScript en línea que afecta a toda la página son analíticas (p. ej. Google Analytics) y servicios de fuentes alojadas. JavaScript en línea que afecta a toda la página puede estar en cualquiera de las dos categorías: front-end/estilo, o lógica.

 

¡En el caso de los front-end/estilos (por ejemplo font hosted services), JS encaja en el tema.

 

 

Pon el js directamente en tu archivo html.html.twig.

 

 

En el caso de fuentes, esto también te permitirá colocarlo justo en el lugar que te da la mejor (y más rápida) la experiencia del usuario final, ya que te permite evitar un FOUT (Flash de texto sin estilo), mientras que la fuente está cargando todavía (las fuentes cargadas a través de JS deben figurar en el código HTML <HEAD> antes del CSS)!

 

 

Leer más sobre esto en el excelente artículo “Async Typekit & the Micro-FOUT”.

 

En el otro caso, encaja en el módulo, y para eso, por favor, consulta "Añadiendo hojas de estilo (CSS) y JavaScript (JS) a un módulo de Drupal 8".


 

Diferencias con Drupal 7
 

 

Más información

 

Los estándares de codificación CSS

Los estándares de codificación JavaScript

 

Esto ha sido todo en cuanto a conexión de CSS y JS de nuestra Guía de Drupal Theming en español.

 

Esperamos que os esté sirviendo y en breve seguiremos con uno nuevo, en esta ocasión hablaremos de los Selectores CSS que tenemos disponibles.

Páginas

Total de votos: 300

Comentarios (0)

Deja un comentario