Drupal 8 - Revision history

Klau: /* Twig */

2016-03-20T00:47:21Z

Twig

← Older revision		Revision as of 00:47, 20 March 2016
Line 350:		Line 350:
	</code>		</code>

	[[Category:~~Hacklab~~]]		[[Category:Hackafou]]

Klau: /* Twig */

2016-03-20T00:46:57Z

Twig

← Older revision		Revision as of 00:46, 20 March 2016
Line 349:		Line 349:
	</div>{# /.layout-container #}		</div>{# /.layout-container #}
	</code>		</code>

			[[Category:Hacklab]]

Bart at 22:37, 2 March 2016

2016-03-02T22:37:56Z

@@ Line 276: / Line 276: @@
 Y cerramos haciendo Ctrl+C.
@@ Line 282: / Line 288: @@
 Éste es uno de los cambios más destacados de drupal 8. Pasamos de PHPTemplate a Twig. Twig es un sistema de plantillas con una sintaxis idéntica a la de Django. Tiene la ventaja de seguridad de que no permite llamar a código PHP arbitrariamente desde la plantilla, sino tan sólo a determinadas funciones, fundamentalmente a través del sistema de filtros.
 Lo mejor a la hora de crear plantillas es no comenzar de cero, sino copiarlas de otro tema, por ejemplo 'classy', que es uno de los temas base que viene en el core. La estructura de nombres se mantiene aunque se sufija con 'html.twig'. Por ejemplo el archivo 'page.html.twig' define la maquetación de la página por defecto. 'front.html.twig' define la home y sobreescribe a la anterior, etc. 'node.html.twig' definiría cómo se ve un nodo de drupal por defecto y 'node--article.html.twig' definiría la maquetación de un nodo de tipo 'article' y sobreescribiría a la anterior, etc.Estos archivos han de estar en una carpeta llamada 'templates'.
 Por ejemplo podemos copiar de classy 'page.html.twig':

Bart at 21:46, 2 March 2016

2016-03-02T21:46:47Z

← Older revision		Revision as of 21:46, 2 March 2016
Line 294:		Line 294:
	<div class="layout-container">		<div class="layout-container">
	<header role="banner">		<header role="banner">
	{{ page.header }}		\{\{ page.header \}\}
	</header>		</header>
	{{ page.primary_menu }}		{{ page.primary_menu }}

Bart at 21:43, 2 March 2016

2016-03-02T21:43:03Z

← Older revision		Revision as of 21:43, 2 March 2016
Line 291:		Line 291:
	Y editarlo para ver cómo funciona:		Y editarlo para ver cómo funciona:

			<code>
	<div class="layout-container">		<div class="layout-container">
	<header role="banner">		<header role="banner">
Line 323:		Line 323:
	{% endif %}		{% endif %}
	</div>{# /.layout-container #}		</div>{# /.layout-container #}
			</code>

Bart at 21:42, 2 March 2016

2016-03-02T21:42:27Z

← Older revision		Revision as of 21:42, 2 March 2016
Line 291:		Line 291:
	Y editarlo para ver cómo funciona:		Y editarlo para ver cómo funciona:

	<div class="layout-container">
			<div class="layout-container">
	<header role="banner">		<header role="banner">
	{{ page.header }}		{{ page.header }}

Bart at 21:41, 2 March 2016

2016-03-02T21:41:47Z

← Older revision		Revision as of 21:41, 2 March 2016
Line 276:		Line 276:

	Y cerramos haciendo Ctrl+C.		Y cerramos haciendo Ctrl+C.


			=== El sistema de plantillas ===

			Éste es uno de los cambios más destacados de drupal 8. Pasamos de PHPTemplate a Twig. Twig es un sistema de plantillas con una sintaxis idéntica a la de Django. Tiene la ventaja de seguridad de que no permite llamar a código PHP arbitrariamente desde la plantilla, sino tan sólo a determinadas funciones, fundamentalmente a través del sistema de filtros.
			Lo mejor a la hora de crear plantillas es no comenzar de cero, sino copiarlas de otro tema, por ejemplo 'classy', que es uno de los temas base que viene en el core. La estructura de nombres se mantiene aunque se sufija con 'html.twig'. Por ejemplo el archivo 'page.html.twig' define la maquetación de la página por defecto. 'front.html.twig' define la home y sobreescribe a la anterior, etc. 'node.html.twig' definiría cómo se ve un nodo de drupal por defecto y 'node--article.html.twig' definiría la maquetación de un nodo de tipo 'article' y sobreescribiría a la anterior, etc.Estos archivos han de estar en una carpeta llamada 'templates'.

			Por ejemplo podemos copiar de classy 'page.html.twig':

			mkdir templates
			cd /var/www/d8/public_html/
			cp core/themes/classy/templates/layout/page.html.twig themes/custom/calafou/templates

			Y editarlo para ver cómo funciona:

			<div class="layout-container">
			<header role="banner">
			{{ page.header }}
			</header>
			{{ page.primary_menu }}
			{{ page.secondary_menu }}
			{{ page.breadcrumb }}
			{{ page.highlighted }}
			{{ page.help }}
			<main role="main">
			<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
			<div class="layout-content">
			{{ page.content }}
			</div>{# /.layout-content #}
			{% if page.sidebar_first %}
			<aside class="layout-sidebar-first" role="complementary">
			{{ page.sidebar_first }}
			</aside>
			{% endif %}
			{% if page.sidebar_second %}
			<aside class="layout-sidebar-second" role="complementary">
			{{ page.sidebar_second }}
			</aside>
			{% endif %}
			</main>
			{% if page.footer %}
			<footer role="contentinfo">
			{{ page.footer }}
			</footer>
			{% endif %}
			</div>{# /.layout-container #}

Bart at 21:29, 2 March 2016

2016-03-02T21:29:57Z

← Older revision		Revision as of 21:29, 2 March 2016
Line 261:		Line 261:

	Hacemos Control+D y volvemos a la terminal original y podemos seguir trabajando tranquilamente con compass compilando en segundo plano cualquier cambio sobre el estilo. Screen seguirá funcionando aunque nos vayamos del servidor, lo cual puede ser cómodo aunque hay que controlarlo. Es un consumo de recursos.		Hacemos Control+D y volvemos a la terminal original y podemos seguir trabajando tranquilamente con compass compilando en segundo plano cualquier cambio sobre el estilo. Screen seguirá funcionando aunque nos vayamos del servidor, lo cual puede ser cómodo aunque hay que controlarlo. Es un consumo de recursos.
	Si queremos quitar el proceso podemos comprobar ~~que~~ las screens abiertas con sus nombres haciendo un:		Si queremos quitar el proceso podemos comprobar las screens abiertas con sus nombres haciendo un:

	screen -ls		screen -ls
Line 271:		Line 271:
	1 Socket in...		1 Socket in...

	'Reatachamos' la screen ~~haciendo~~:		'Reatachamos' la screen llamándola por su nombre de sesión:

	screen -r calafou-sass		screen -r calafou-sass

	Y cerramos haciendo Ctrl+C.		Y cerramos haciendo Ctrl+C.

Bart at 21:29, 2 March 2016

2016-03-02T21:29:07Z

← Older revision		Revision as of 21:29, 2 March 2016
Line 268:		Line 268:

	There is a screen on:		There is a screen on:
	15581.calafou-sass (02/03/16 22:26:44) (Detached)		15581.calafou-sass (02/03/16 22:26:44) (Detached)
	1 Socket in...		1 Socket in...

Bart at 21:28, 2 March 2016

2016-03-02T21:28:27Z

← Older revision		Revision as of 21:28, 2 March 2016
Line 240:		Line 240:
	# line_comments = false		# line_comments = false
	preferred_syntax = :sass		preferred_syntax = :sass

			Para estructurar la css vamos a usar un enfoque derivado SMACSS (de J. Snook). Este enfoque separa las hojas de estilo atendiendo a una estructura lógica. En una carpeta tenemos variables, en otra una base del tema y en la otra 'componentes'. Y las cargamos en ese orden en un punto de compilación global, global.sass, que es la única hoja que se compilará a css. La ventaja de este sistema es que encapsulamos el estilo en elementos pequeños y fáciles de mantener y que se sobreescriben en un orden lógico. Primero variables, luego la base y luego los componentes finales, elementos que tienen la mayor flexibilidad ya que sobreescriben de manera natural a los anteriores:

			cd sass
			mkdir variables base components
			vi global.sass

			Y en global.sass:

			@import compass/css3
			@import sass-globbing
			@import variables/*
			@import base/*
			@import components/*

			Pues listo, ya tenemos la base. Es cuestión de añadir parciales a cada carpeta. Si por ejemplo queremos dar estilo a un bloque de login de drupal podemos crear el archivo _block-login.sass en la carpeta components y dentro poner el estilo a nuestro gusto. El archivo global.sass reconocerá que hemos añadido un archivo --gracias a sass-globbing y al *-- y lo importará y se compilará finalmente dentro de global.css.
			Para activar compass y que nos mire los cambios yo suelo usar screen para que no me bloquee la consola. Le añadimos un parámetro -S para darle un nombre por si tenemos más procesos corriendo en segundo plano en screen saber reconocerlo a la primera:

			screen -S calafou-sass compass watch

			Hacemos Control+D y volvemos a la terminal original y podemos seguir trabajando tranquilamente con compass compilando en segundo plano cualquier cambio sobre el estilo. Screen seguirá funcionando aunque nos vayamos del servidor, lo cual puede ser cómodo aunque hay que controlarlo. Es un consumo de recursos.
			Si queremos quitar el proceso podemos comprobar que las screens abiertas con sus nombres haciendo un:

			screen -ls

			Nos saldrá algo parecido a:

			There is a screen on:
			15581.calafou-sass (02/03/16 22:26:44) (Detached)
			1 Socket in...

			'Reatachamos' la screen haciendo:

			screen -r calafou-sass

			Y cerramos haciendo Ctrl+C.