Plantillas como distribución

En este vídeo aprenderá de qué trata la serie, qué es realmente una distribución y para qué grupo de destinatarios son adecuados los vídeos.

Para los videos se necesita una instalación TYPO3 fresca y vacía. En este vídeo instalamos TYPO3 versión 7.

La forma más fácil de crear una distribución es con la ayuda de la extensión "Extension Builder". En este vídeo puedes ver cómo instalar el Extension Builder en TYPO3 7.

(Extension Builder en Github)

Una distribución es un tipo especial de extensión. Utilizamos el "Extension Builder" para crear la estructura básica de nuestra distribución.

En este vídeo, realizamos algunos ajustes en la distribución creada previamente y, por último, la activamos.

Antes de integrar la plantilla HTML, realizamos ajustes en la estructura de carpetas de la distribución. También preparamos una estructura TypoScript lo más eficaz posible.

Como ejemplo, en los vídeos utilizamos una plantilla HTML del sitio web initializr.com. En este vídeo, preparamos el uso de la plantilla en la distribución. Por supuesto, aquí también puede utilizar su propia plantilla.

Una plantilla HTML debe estructurarse de forma razonable para su uso en Fluidtemplate. En este vídeo, dividimos la plantilla en diseños, plantillas y parciales.

Una vez que la plantilla se ha dividido en diseño, plantilla y parciales, tenemos que integrar estos archivos en TYPO3. Para ello, utilizamos el objeto FLUIDTEMMPLATE.

En este vídeo puede ver cómo integrar archivos CSS y JavaScript utilizando TypoScript.

Hay varias etiquetas meta en el área - de la plantilla. También se pueden integrar fácilmente con Typoscript.

Ciertos comentarios condicionales pueden utilizarse para dar soporte a navegadores Internet Explorer antiguos. En este vídeo puede ver una posible forma de integrar estos comentarios condicionales en la plantilla.

Si ya no desea dar soporte a Internet Explorer 8 o anteriores, puede simplemente saltarse este vídeo.

En este vídeo, personalizamos el TypoScript y el archivo de plantilla para que los elementos de contenido también se muestren en el frontend.

Utilizamos un diseño de backend para que la visualización de las columnas en el backend se corresponda con la salida en el frontend. También personalizamos el TypoScript para poder trabajar con varios diseños de backend más adelante.

La navegación relativamente sencilla de la plantilla HTML puede realizarse con unas pocas líneas de TypoScript.

Se puede integrar un enlace a la página de inicio del sitio web en la zona izquierda de la cabecera utilizando TypoScript.

El pie de página puede utilizarse para mostrar un menú secundario.

TypoScript puede utilizarse para garantizar que el elemento <aside> sólo se muestre si el contenido está realmente presente.

Puede mejorar la representación HTML de TYPO3 con unos pocos parámetros en el config-TypoScript.

Las instrucciones TSconfig también pueden almacenarse en archivos e integrarse automáticamente por la distribución.

A partir de TYPO3 7.4, es posible definir diseños de backend a través de la página TSconfig. Esto significa que ahora también es posible externalizar diseños a los archivos.

Si está utilizando una versión anterior a la 7.4, puede saltarse este vídeo.

Tenga en cuenta:

Algo ha cambiado en TYPO3 desde que se crearon estos vídeos. Si los diseños del backend se subcontratan a PageTSconfig, el ID del diseño del backend debe ir precedido de pagets__ en el TypoScript.

El siguiente es un ejemplo de código que funciona a partir de TYPO3 7.6.

Por favor, no utilice simplemente este código 1:1 para la distribución de demostración, ¡es un ejemplo que, por supuesto, tendría que ser adaptado!

página.10 = FLUIDTEMPLATE
page.10 {
  partialRootPath = EXT:mydemodistribution/Resources/Private/Partials/
  layoutRootPath = EXT:mydemodistribution/Resources/Private/Layouts/

  ## Evaluar diseños backend
  archivo.stdWrap.cObject = CASE
  archivo.stdWrap.cObject {
    key.data = pagelayout

    # por defecto = 2Columnas
    por defecto = TEXT
    default.value = EXT:mydemodistribution/Resources/Private/Templates/2Columns.html

    ## Si los diseños BE se almacenan en la base de datos, sólo se puede acceder a ellos a través del ID, es decir, 1 = TEXTO...
    ## Si los diseños BE se almacenan en PageTS, se accede a través de pagets__ID, por ejemplo pagets__1 = TEXT...

    # Página
    pagets__1 = TEXTO
    pagets__1.value = EXT:mydemodistribution/Resources/Private/Templates/Homepage.html

    # 2Columnas
    pagets__2 < .default

    # 1Columna
    pagets__3 = TEXTO
    pagets__3.value = EXT:mydemodistribution/Resources/Private/Templates/1Column.html
  }

  ## Transferir contenido a las plantillas
  variables {

    left < styles.content.get
    left.select.where = colPos = 1

    main < styles.content.get
    main.select.where = colPos = 0

    right < styles.content.get
    right.select.where = colPos = 2
  }
}

Con Fluid, puede trasladar gran parte de la lógica a la plantilla. Cosas que antes tenían que resolverse (a veces laboriosamente) usando TypoScript pueden hacerse ahora con relativa facilidad directamente en la plantilla Fluid. Echemos un vistazo a los siguientes ayudantes de vista como ejemplos: if, format.crop y format.date

Lo especial de las distribuciones es que se pueden suministrar ambos archivos e instalar árboles de páginas completos, incluido el contenido. En este vídeo, creamos algunos archivos de ejemplo y generamos un archivo de exportación .t3d.

Probamos si nuestra distribución funciona en un TYPO3 7.4.0 recién instalado y vacío.