Colección de bloqueos

Última actualización: 27 de febrero de 2025

Esta es una colección de bloques que se consideran parte del producto AEM y se recomiendan como modelos para los bloques de su proyecto.

Estos bloques provienen de proyectos AEM de producción real. Para formar parte de esta colección, un bloque debe tener un alto uso en una serie de proyectos y proporcionar suficiente funcionalidad abstracta y ser lo suficientemente general como para que pueda reutilizarse sin tener que cambiar el modelo de contenido subyacente.

A medida que cambien las necesidades y los diseños de los sitios web, también cambiará la colección de bloques. Se realizarán adiciones para reflejar las necesidades emergentes de los proyectos, pero también se eliminarán los bloques que no se utilicen con la frecuencia suficiente (obsoletos).

Hay pocos principios técnicos para los bloques de la colección:

  • Intuitiva: Estructura de contenido intuitiva y fácil de crear
  • Útil: No hay dependencias, compatible con plantillas
  • Interactivo: funciona en todos los puntos de interrupción
  • Según el contexto: Hereda el contexto CSS, como los colores del texto y del fondo
  • Localizable: No hay contenido codificado
  • Rápido: Sin impacto negativo en el rendimiento
  • SEO y A11y: fáciles de usar y accesibles para SEO

Todos los bloques pueden considerarse como una base para su propio desarrollo de bloques. Es muy probable que cambie todo el código .css y .js para satisfacer sus propias necesidades de proyecto. El valor principal de estos bloques es la estructura de contenido que proporcionan.

Teniendo en cuenta que el código del bloque se adaptará completamente a su proyecto, no hay intención de que los bloques de la colección sean compatibles con sus respectivas versiones anteriores o que se puedan actualizar.

Placa De Caldera

Los bloques más utilizados (así como los tipos de contenido predeterminados) se depuran en las plantillas de AEM y forman parte de cada proyecto de AEM. Para que un bloque forme parte de una plantilla, debe utilizarse en la gran mayoría de los proyectos de AEM.

La base de código para todos los bloques en AEM Boilerplate es de código abierto y se puede encontrar en GitHub adobe/aem-boilerplate

Los bloques de AEM Boilerplate se pueden detectar con la biblioteca de la barra de tareas, use el botón copy para copiar la estructura de contenido correspondiente en el portapapeles y péguela en un documento para ver la estructura de contenido.

<h3>Encabezados</h3>

Contenido predeterminado

Los diferentes niveles de encabezados proporcionan la base semántica del documento

<h3>Texto</h3>

Contenido predeterminado

Texto independiente o copiar con opciones de formato semántico enriquecido

<h3>Imágenes</h3>

Contenido predeterminado

Las imágenes dan vida a tu contenido

<h3>Listas</h3>

Contenido predeterminado

Listas ordenadas y desordenadas donde sea necesario

<h3>Vínculos</h3>

Contenido predeterminado

Cite otros sitios web o su propio contenido

<h3>Botones</h3>

Contenido predeterminado

Botones de llamada a la acción y mucho más

<h3>Código</h3>

Contenido predeterminado

Resaltar fragmentos de código con formato previo en el contenido

<h3>Secciones</h3>

Contenido predeterminado

Agrupe el contenido de la página en secciones

<h3>Iconos</h3>

Contenido predeterminado

Haga que su contenido sea más interesante con los iconos

<h3>Héroe</h3>

Bloquear

Tratamiento de héroes en la parte superior de una página

<h3>Columnas</h3>

Bloquear

Forma flexible de gestionar diseños de varias columnas de forma adaptable

<h3>Tarjetas</h3>

Bloquear

Lista de tarjetas con imágenes y vínculos o sin ellos

<h3>Encabezado</h3>

Bloquear

Ejemplo de encabezado y navegación flexibles

<h3>Pie de página</h3>

Bloquear

Bloque de pie de página ampliable simple

<h3>Metadatos</h3>

Añada metadatos a la página donde sea necesario

<h3>Metadatos de sección</h3>

Resaltar o estructurar todo el contenido de una sección

Colección de bloqueos

La colección de bloques contiene bloques que se utilizan con frecuencia, pero que no son tan comunes que se consideren plantillas. Como regla general, para incluirse en la colección de bloques, se debe utilizar un bloque en más de la mitad de todos los proyectos de AEM.

La colección de bloques puede ser la ruta de entrada al código de las plantillas. Del mismo modo, si un bloque de la plantilla ya no se utiliza tanto, se puede mover a esta colección.

La base de código para todos los bloques de la colección de bloques de AEM es de código abierto y se puede encontrar en GitHub adobe/aem-block-collection

Los bloques de la colección de bloques de AEM se pueden detectar con la biblioteca de la barra de tareas, use el botón copy para copiar la estructura de contenido correspondiente en el portapapeles y péguela en un documento para ver la estructura de contenido.

<h3>Incrustar</h3>

Bloquear

Una forma sencilla de incrustar contenido de medios sociales en páginas de AEM

<h3>Fragmento</h3>

Bloquear

Compartir fragmentos de contenido en varias páginas

<h3>Tabla</h3>

Bloquear

Una forma de organizar los datos tabulares en filas y columnas

<h3>Vídeo</h3>

Bloquear

Mostrar y reproducir vídeos directamente desde AEM

<h3>Acordeón</h3>

Bloquear

Una pila de etiquetas descriptivas que se pueden alternar para mostrar el contenido completo relacionado

<h3>Rutas de exploración</h3>

Bloquear complemento

Una lista de títulos de páginas y vínculos relevantes que muestren la ubicación de la página actual en la jerarquía de navegación

<h3>Carrusel</h3>

Bloquear

Una herramienta de visualización dinámica que pasa sin problemas por una serie de imágenes con contenido de texto

<h3>Modal</h3>

Bloqueo automático

Una ventana emergente que aparece sobre el contenido de otro sitio

<h3>Cita</h3>

Bloquear

Visualización de una cita o un resaltado de un pasaje específico (o "extraer comillas") dentro de un documento

<h3>Búsqueda</h3>

Bloquear

Permite a los usuarios encontrar el contenido del sitio introduciendo un término de búsqueda

<h3>Pestañas</h3>

Bloquear

Información del segmento en varios paneles etiquetados (o "con pestañas")

<h3>Formulario</h3>

Bloquear (obsoleto)

Conjunto de controles de entrada agrupados que permiten a los usuarios enviar información

La recopilación de bloques evoluciona continuamente en función de los comentarios de la comunidad de AEM. Si cree que hay un bloque que debería incluirse en la colección de bloques, póngase en contacto con su contacto de AEM. Los candidatos actuales para la inclusión en la colección de bloques incluyen:

  • Titular de consentimiento

Si necesita inmediatamente un bloque que aún no forme parte de la colección, es relativamente fácil encontrar proyectos de AEM en GitHub que tengan implementaciones de ejemplo para todos los candidatos anteriores.