Personalizar plantillas de secciones HTML

Requisitos y objetivo del tutorial

Necesitas acceso al editor HTML y al gestor de archivos del CMS bluetronix, así como los derechos de desarrollador adecuados para la carpeta de plantillas. En este tutorial aprenderás a adaptar secciones de página existentes, crear tus propias plantillas de sección HTML y ofrecer a tus editores únicamente las plantillas aprobadas según sea necesario.

Trabajamos con las plantillas de ejemplo Clientes y Banner. Los archivos estándar permanecen sin cambios; las modificaciones individuales se realizan mediante la etiqueta _own.

1. Encontrar plantillas de secciones de página en el editor

Abre una página existente en el CMS, selecciona Editar y abre la selección de plantillas a través de Insertar → Sección de página. El menú contextual también ofrece la entrada Bloque de texto para contenidos reutilizables más pequeños. Este tutorial se centra inicialmente en las secciones de página.

En la ventana Sección de página, las plantillas disponibles se muestran con una vista previa. 

Selecciona como ejemplo la categoría Clientes. Allí encontrarás varias variantes de diseño.

2. Dónde se guardan las plantillas

Los archivos de plantilla se encuentran en la carpeta de desarrolladores /bx_Layout/. Abre en el gestor de archivos esta carpeta. Allí encontrarás, entre otras cosas, archivos para secciones de página (Section*.txt) y bloques de texto (Tag*.txt).

El nombre del archivo determina la asignación a la selección de plantillas. Una plantilla de sección de página siempre comienza con Section; después sigue su nombre individual. Para variantes propias, se utiliza el sufijo _own antes de la extensión del archivo.

También puedes crear una plantilla completamente nueva. Para ello, eliges un nombre propio detrás de Section. Si no existe un archivo estándar con el mismo nombre, la nueva plantilla aparecerá adicionalmente en lugar de reemplazar una existente.

3. Por qué no debes editar directamente los archivos estándar

Los archivos estándar proporcionados con el CMS en /bx_Layout/ son sobrescritos durante las actualizaciones del sistema. Por lo tanto, los cambios directos en SectionClients.txt o SectionBanner.txt no son permanentes. Copia el archivo estándar deseado y marca tu propia versión con _own. Las variantes correspondientes _own están destinadas a tus ajustes individuales, que perduren a través de actualizaciones.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Si existen ambos archivos, el CMS utilizará el SectionClients_own.txt correspondiente en lugar de la plantilla estándar SectionClients.txt. No necesitas renombrar la categoría Clients en el editor.

Si en cambio creas un archivo propio con un nuevo nombre, por ejemplo SectionMyTemplate_own.txt, la plantilla estándar Clients seguirá estando disponible.

4. Estructura de una plantilla de sección HTML: el marcador de separación

Un archivo de sección puede contener varias variantes de diseño de la misma categoría. Para que el editor del CMS reconozca las diferentes variantes, se separan entre sí con la siguiente marca de separación:

<!--__SP_SectionTemplate__-->

La marca está al principio, entre las variantes y al final del archivo de ejemplo. Mantén la escritura exactamente. Si falta la marca de separación, el editor no podrá mostrar varias variantes de manera confiable como selección separada.

La plantilla estándar SectionBanner.txt muestra este principio con varios diseños de banner diferentes. Puedes usarla como base para una sección sencilla y propia.

<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
   <div class="container py-3">
      <div class="row align-items-center g-4">
         <div class="col-lg-8 wow fadeInLeft">
            <span class="badge text-bg-warning mb-3">&#x00AD;New&#x00AD;</span>
            <h2 class="mb-2">&#x00AD;Designed for everyday success&#x00AD;</h2>
            <p class="mb-0">&#x00AD;Explore practical solutions created to make everyday work easier, clearer and more effective.&#x00AD;</p>
         </div>
         <div class="col-lg-4 text-lg-end wow fadeInRight">
            <a href="#"><button class="btn btn-light btn-lg">&#x00AD;Learn more&#x00AD;</button></a>
         </div>
      </div>
   </div>
</Section>
<!--__SP_SectionTemplate__-->

El ejemplo es una variante completa de banner. Para una segunda variante, coloca su código HTML detrás de la última marca de separación y también termina esta variante con la misma marca. Después puedes estructurar la sección real según tus requisitos.

No necesitas agregar manualmente la clase sectionAll: el editor de bluetronix la añade automáticamente al insertar un segmento de página.

5. Copiar la plantilla de clientes y cambiar el título

Abre la plantilla SectionClients existente en el administrador de archivos y examina su código HTML. En nuestro ejemplo, contiene un encabezado, una descripción y varias tarjetas de socios.

Copia la plantilla correspondiente como SectionClients_own.txt y abre la copia mediante Editar. Agrega la cadena NEW!!!! al encabezado para nuestra prueba. También puedes cambiar el texto, la cantidad de tarjetas, los símbolos o el CSS individualmente.

<!-- Vorher -->
<h2>&#x00AD;Trusted by growing organizations&#x00AD;</h2>

<!-- Nachher in SectionClients_own.txt -->
<h2>&#x00AD;NEW!!!! Trusted by growing organizations&#x00AD;</h2>

Haz clic en Guardar y luego abre nuevamente la selección Insertar → Sección de página → Clients. Allí reconocerás tu versión por el encabezado modificado. La segunda variante de Clients se puede seleccionar y editar independientemente.

6. Ofrecer tu propia plantilla bajo un nuevo nombre

En lugar de un archivo de reemplazo con el mismo nombre, también puedes crear una plantilla separada. Por ejemplo, copia una variante de Clients y guárdala como SectionMyTemplate_own.txt. La parte detrás de Section es el nombre de tu propia plantilla; este determina la nueva selección en el editor. La plantilla Clients original no será reemplazada si tiene un nombre diferente.

SectionClients.txt          → Standard: Clients
SectionClients_own.txt      → eigene Version von Clients
SectionMyTemplate_own.txt   → zusätzliche eigene Vorlage MyTemplate

De esta manera, puedes desarrollar secciones fijas para tipos de página específicos para un cliente sin tener que modificar el contenido de todas las plantillas proporcionadas.

7. Mostrar exclusivamente tus propias plantillas con Only_own.txt

Si el cliente final solo debe usar tus plantillas aprobadas, crea el archivo de bandera Only_own.txt en la carpeta /bx_Layout/. Según la configuración de plantilla mostrada, esto ofrecerá únicamente los archivos propios correspondientes con el sufijo _own en la selección de plantillas. Este archivo no requiere código HTML para esta función.

/bx_Layout/Only_own.txt

Ejemplo: Si hay en el directorio SectionClients.txt, SectionBanner.txt y SectionMyTemplate_own.txt, la selección, tras activar esta configuración, solo debe contener la plantilla propia correspondiente. Así podrás proporcionar a un cliente una selección específica y orientada al proyecto.

8. Plantillas de etiquetas personalizadas para bloques de texto

El mismo principio _own se aplica a los bloques de texto más pequeños. Sus archivos comienzan con Tag. Por ejemplo, TagTemplate.txt se convierte en TagTemplate_own.txt. Esta variante se puede proporcionar a través de la entrada Bloque de texto en el editor.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Duplicar columnas editables con colAll

Si una sección contiene varias columnas repetibles, una columna con la clase colAll puede ser reconocida como un bloque independiente. Esto hace que la función Columna de artículo → Duplicar esté disponible en el menú contextual.

<div class="colAll col-md-6">
   <h2>&#x00AD;Hello world&#x00AD;</h2>
   <p>&#x00AD;Writing&#x00AD;</p>
</div>

Al duplicar, el bloque correspondiente se inserta como segunda columna. Por lo tanto, para una tarjeta o columna de artículo repetible, debes colocar colAll en el contenedor adecuado. La clase sectionAll de nivel superior, en cambio, se agrega automáticamente desde el editor.

10. Marcadores de texto y plantillas multilingües

Las secciones estándar proporcionadas contienen dentro de los textos de ejemplo la cadena ­, por ejemplo, antes y después de los encabezados. Estas marcas de texto no deben confundirse con la marca de separación <!--__SP_SectionTemplate__-->. Al copiar plantillas existentes, debes mantener tales marcas de CMS inicialmente si deseas que se conserve el comportamiento anterior del editor.

<h2>&#x00AD;Designed for everyday success&#x00AD;</h2>

En proyectos multilingües, marcar las traducciones adicionales puede ser útil para que los editores mantengan el contenido en los idiomas necesarios. El CMS de bluetronix está diseñado para 24 idiomas. Para una plantilla de proyecto simple y monolingüe, puedes omitir las marcas de traducción adicionales que no se necesiten; las marcas de separación de secciones requeridas para el editor deben mantenerse.

11. Funciones propias e includes necesarios

Al expandir una plantilla con funciones PHP o salidas de módulos, utiliza nombres únicos para tus propias funciones. Una función existente no debe declararse nuevamente con el mismo nombre. Puedes asegurar la declaración, por ejemplo, con function_exists():

if(!function_exists("MyTestFunction")) {
   function MyTestFunction($Test) {
      return $Test;
   }
}

Los includes necesarios deben integrarse al menos una vez por sección. Una marca de include correspondiente puede ser copiada a través del editor:

<!--bxInclude--/bx_Mod/Blog_Detail-->

Los archivos de plantilla internos con las extensiones .txt y .bx no están destinados a ser accesibles directamente a través de URLs HTTP/HTTPS públicas en la configuración del servidor CMS descrita. Son leídos y procesados en el servidor.

12. Por qué las plantillas restringidas son útiles para equipos editoriales

Con secciones propias y Only_own.txt, determinas qué bloques de diseño terminados puede seleccionar el cliente final. Adicionalmente, en la configuración del usuario se pueden restringir funciones del editor como cambios de fuente o de color. Los editores pueden entonces principalmente insertar secciones predefinidas, editar textos e intercambiar imágenes, sin tener que reconstruir libremente el diseño de la página establecido.

Este modo de trabajo es especialmente adecuado para proyectos grandes de clientes, portales empresariales y equipos con varios editores. El diseño se mantiene uniforme, mientras que el contenido puede ser gestionado de manera flexible.

13. Resultado y resumen

Abres /bx_Layout/, copias un archivo de sección existente, añades _own, ajustas el código HTML y revisas la salida bajo Insertar → Sección de página. Para nuevas categorías de selección, utilizas un nombre de archivo propio que comience con Sección.

SectionClients.txt
       ↓ kopieren
SectionClients_own.txt
       ↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
       ↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → Clients

Si activas además Only_own.txt y restringes los derechos del editor adecuadamente, tus editores pueden trabajar específicamente con las plantillas de sección HTML propias que se proporcionan.