Crear diseño backend
En aras de la organización, debería reservarse una página para almacenar los diseños del backend. Si se trata de un sitio web en el que todos los editores tienen acceso a todo el árbol de páginas, ésta puede ser la página de inicio. En caso contrario, se crea una carpeta de sistema para ello.
Se puede crear un nuevo registro de backend layout en la vista de lista. Ahora se puede abrir el asistente de backend layout a través del icono "Asistente" en Configuración. Aquí puede diseñar su propio backend layout. El número de columna se utiliza posteriormente en el TypoScript para leer el contenido.
Configurar el diseño del backend
Para que los diseños se muestren en todas las páginas en las propiedades de página, debe especificarse el ID de la carpeta del sistema con los diseños backend en Page TSconfig:
##id storagepage of gridlayout TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID=29 TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID=29
Cuando configure los editores, asegúrese de que también tienen acceso a la carpeta del sistema.
El diseño estándar para todas las subpáginas se define en las propiedades de página de la página de inicio. Esto significa que el editor no tiene que seleccionar un diseño para cada página recién creada, sino sólo para las páginas que se desvían del diseño estándar.
Si no desea que el editor tenga la opción de no seleccionar una maquetación, es decir, "Ninguna", para poder trabajar con la antigua vista backend, puede ocultar esta opción de la siguiente manera:
##hide no backend layout label TCEFORM.pages.backend_layout_next_level.removeItems= -1 TCEFORM.pages.backend_layout.removeItems= -1
También hay un campo de selección vacío para el diseño estándar. También se puede etiquetar. De este modo, un editor también puede reconocer qué diseño está preestablecido.
##dar una definición a la etiqueta vacía TCEFORM.pages.backend_layout.altLabels.0 = Disposición predefinida
Vincular el diseño del backend con el frontend
En primer lugar, se define una clase CSS para la etiqueta body en la configuración en función del diseño seleccionado y se asigna a page.bodyTagCObject:
##La vista de cuadrícula backend define la clase body para css temp.selectbodytag = CASE temp.selectbodytag { key.field = backend_layout key.ifEmpty.
data = levelfield:-2, backend_layout_next_level, slide default = TEXT default.value = layout1
1 = TEXT 1.value = layout1 2 = TEXT 2.
value = layout2 3 = TEXT 3.value = layout3 stdWrap.wrap = }
En el ejemplo siguiente, se define una subparte "contentWrap" en la plantilla HTML. Como COA, se puede dividir en varias subpartes.
contentWrap.10 es un div que se produce en todos los diseños de backend.
contentWrap.20 sólo aparece en las maquetaciones con ID 1 ó 2.
contentWrap.20.20 sólo aparece en las maquetaciones con ID 2. contentWrap.20.30 sólo aparece en las maquetaciones con ID 3.
contentWrap.30 aparece de nuevo en todas las maquetas del backend.
Con la consulta if, primero se comprueba el valor del campo "Diseño de fondo (para subpáginas de esta página)" en las páginas superiores. Si hay un valor en el campo "Backend layout", se sobrescribe el resultado anterior y se comprueba si este valor coincide con el valor.
page = PAGE page { ##clase css en bodytag según layout bodyTagCObject < temp.selectbodytag 10 = TEMPLATE ...
10.subparts { contentWrap = COA ##Caja superior contentWrap.10 < styles.content.get contentWrap.10
.wrap = <div id="contentTop">|</div> ##cajas flotantes envueltas en una caja contentWrap.20
= COA contentWrap.20
.if { ## backend layout query by uid value = 1,2 isInList.
data = levelfield:-2,backend_layout_next_level,slide isInList.override.data = TSFE:page|backend_layout }
contentWrap.20.wrap = <div> | </div> contentWrap.20.10 < styles.content.get contentWrap.20
.10.select.where = colPos = 1 contentWrap.20.10.wrap = <div id="contentLeft">|</div> contentWrap.20.20 = COA contentWrap.20
.20 { if { valor = 2 isInList.
data = levelfield:-2,backend_layout_next_level,slide isInList.override.data = TSFE:page|backend_layout }
10 < styles.content.get 10.select.where = colPos = 2 10.
wrap = <div class="contentMiddle">|</div> } contentWrap.20
.30 = COA contentWrap.20
.30 { if { valor = 3 isInList.
data = levelfield:-2,backend_layout_next_level,slide isInList.override.data = TSFE:page|backend_layout }
10 < styles.content.get 10.select.where = colPos = 5 10.
wrap = <div class="contentMiddle">|</div> 20 < styles.
content.get 20.select.where = colPos = 6 20.wrap = <div class="contentMiddle">|</div> }
contentWrap.20.40 < styles.content.get contentWrap.20.40.select.where = colPos = 3 contentWrap.20
.40.wrap = <div id="contentRight">|</div> ##caja inferior contentWrap.30
< styles.content.get contentWrap.30.select.where = colPos = 4 contentWrap.30
.wrap = <div id="contentBottom">|</div> }
}
El contenido de esta página se ha traducido automáticamente.