Fragmentos

Los fragmentos son componentes HTML reutilizables que se pueden incluir en tus páginas. Ayudan a evitar la duplicación de código para elementos comunes como encabezados, pies de página, barras de navegación, etc.

Los fragmentos son porciones de código HTML pequeñas, independientes y reutilizables que se pueden agregar a cualquier página a través de la directiva render_snippet:

        
            <div>
                {{ render_snippet('mi-fragmento', page) }}
            </div>

Reglas de Nombrado de Fragmentos #

  • Debe estar en minúsculas (ej., header, nav-bar)
  • Debe comenzar con una letra
  • Solo puede contener letras, números y guiones
  • Ejemplos de nombres válidos: nav-bar, footer-2, main-menu
  • Ejemplos de nombres inválidos: Header (mayúscula), 1nav (comienza con número), nav_bar (guión bajo)

Crear Fragmentos #

Para crear un fragmento, usa el comando create:

        
            elemental-cms snippets create -s nav-bar

Esto crea dos archivos en tu SNIPPETS_FOLDER:

  • nav-bar.json: Contiene metadatos y dependencias del fragmento
  • nav-bar.html: Contiene el contenido HTML

Gestionar Fragmentos #

Listar Fragmentos

        
            elemental-cms snippets list

Muestra todos los fragmentos con indicadores de diferencias del repositorio (*) para:

  • Fragmentos que tienen diferencias entre versiones locales y de base de datos
  • Fragmentos que faltan sus archivos locales
  • Fragmentos que existen localmente pero no en la base de datos

Comparar Fragmentos

        
            # Comparar versiones locales y de base de datos
            elemental-cms snippets diff -s nav-bar
            
            # Usando ruta completa
            elemental-cms snippets diff -s workspace/snippets/nav-bar

Muestra diferencias en archivos de especificación y contenido en formato similar a git.

Subir Fragmentos

        
            # Formato directo
            elemental-cms snippets push -s nav-bar
            
            # Con ruta
            elemental-cms snippets push -s workspace/snippets/nav-bar
            
            # Subir todos los fragmentos
            elemental-cms snippets push --all

Descargar Fragmentos

        
            # Formato directo
            elemental-cms snippets pull -s nav-bar
            
            # Con ruta
            elemental-cms snippets pull -s workspace/snippets/nav-bar
            
            # Descargar todos los fragmentos
            elemental-cms snippets pull --all

Eliminar Fragmentos

        
            # Formato directo
            elemental-cms snippets remove -s nav-bar
            
            # Con ruta
            elemental-cms snippets remove -s workspace/snippets/nav-bar

Notas Importantes #

Soporte de Rutas

Todos los comandos de fragmentos soportan ambos formatos:

  • Directo: -s nombre (ej., -s nav-bar)
  • Con ruta: -s ruta (ej., -s workspace/snippets/nav-bar)

Operaciones por Lotes

Algunos comandos soportan la bandera --all:

  • push --all: Subir todos los fragmentos
  • pull --all: Descargar todos los fragmentos

Estructura de Fragmento #

Archivo de Especificación

El archivo de especificación (nav-bar.json) contiene los metadatos del fragmento:

        
            {
                "_id": {
                    "$oid": "62602530f62a2bb120f9ce14"
                },
                "name": "nav-bar",
                "cssDeps": [],
                "jsDeps": [],
                "createdAt": {
                    "$date": 1650468144926
                },
                "lastModifiedAt": {
                    "$date": 1650468144926
                }
            }

Archivo de Contenido

El archivo de contenido (nav-bar.html) contiene el HTML del fragmento:

        
            <div class="nav-bar">
                Tu contenido de navegación aquí
            </div>

Archivos de Respaldo #

Si el fragmento ya existe, se crearán archivos de respaldo y se almacenarán en:

  • [tu-carpeta-fragmentos]/.bak/nav-bar-[tiempo-epoch].json
  • [tu-carpeta-fragmentos]/.bak/nav-bar-[tiempo-epoch].html
Content