Colección de bloqueos

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.

AEM Estos bloques provienen de proyectos de producción real de la. 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:

  • Intuitivo: Estructura de contenido intuitiva y fácil de crear
  • Útil: Sin dependencias, compatible con plantillas
  • Interactivo: Funciona en todos los puntos de interrupción
  • Según el contexto: Hereda el contexto CSS, como el texto y los colores de fondo
  • Localizable: Sin contenido codificado
  • Rápido: Sin impacto negativo en el rendimiento
  • SEO y A11y: Compatible con SEO y accesible

Todos los bloques pueden considerarse como una base para su propio desarrollo de bloques. Es muy probable que vaya a cambiar todas las .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

AEM AEM Los bloques más utilizados (así como los tipos de contenido predeterminados) se depuran en la plantilla de plantillas de y forman parte de todos los proyectos de creación de plantillas de contenido de la plataforma de trabajo de la plataforma de la plataforma de trabajo de la plataforma de la plataforma de trabajo de la plataforma de. AEM Para que un bloque forme parte de una plantilla, debe ser utilizado por la gran mayoría de todos los proyectos de la.

<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. AEM 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.

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.

<h3>Incrustar</h3>

Bloquear

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

<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

AEM Mostrar y reproducir vídeos directamente desde la interfaz de usuario de

<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

Herramienta de visualización dinámica que recorre con suavidad una serie de imágenes con contenido de texto opcional

<h3>Formulario</h3>

Bloquear

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

<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>Modal</h3>

Bloqueo automático

Una ventana emergente que aparece sobre el contenido de otro sitio

AEM La recopilación de bloques evoluciona continuamente en función de los comentarios de la comunidad de la. 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 la. Los candidatos actuales para la inclusión en la colección de bloques incluyen:

  • Titular de consentimiento

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

Bloquear grupo

AEM Con Block Party, nos gustaría dar a nuestra apasionada comunidad de desarrolladores un lugar para mostrar lo que han construido en sitios de la. También permite a otros evitar reinventar la rueda y reutilizar estos bloques / fragmentos de código / integraciones creadas por la comunidad y modificar el código según sea necesario para adaptarse a sus propios proyectos.

AEM Nota: Aunque amamos y apoyamos a nuestra comunidad de desarrolladores de, Adobe no es responsable de mantener o actualizar el código que se muestra en Block Party. Utilice el código a su discreción.

AEM Si usted es un Desarrollador de y desea enviar su bloque / fragmento de código cool o integración, por favor ingrese su envío uso de este formulario.

Fragmento de código
hannesolo

Vista previa

<small>Script para agregar modelos a tu página de franklin. Utiliza el nuevo elemento de diálogo nativo.

Puede verlo en acción aquí:

Vínculo

</small>

Fragmento de código
msagolj

Reproducción automática de vídeo

<small>Para la reproducción automática de vídeos en distintos navegadores, se debe definir un conjunto de atributos. Es importante establecer videoTag.muted = true exactamente de esta manera; de lo contrario, no se reproducirá en Chrome. P. ej. setAttribute('muted', true) no funciona.</small>

Complemento de Sidekick
dilandepass

Biblioteca de la barra de tareas

Vista previa

<small>La biblioteca de Sidekick es una extensión para el AEM Sidekick que permite a los desarrolladores crear herramientas controladas por la interfaz de usuario para autores de contenido. Incluye un complemento de bloques integrado que puede mostrar una lista de todos los bloques a los autores de forma intuitiva, lo que elimina la necesidad de que los autores recuerden o busquen cada variación de un bloque. Los desarrolladores también pueden escribir sus propios complementos para la biblioteca de la barra de tareas.</small>

Fragmento de código
davidnuescheler

CSP basado en metaetiqueta/JSON

<small>Este método consiste en configurar un CSP de forma que solo se transmita una vez por cable y, a continuación, se almacene en caché en el cliente. Permite administrar el CSP en un archivo JSON fácil de leer</small>

Crear herramientas
sachioross

AEM SASS +

<small>AEM SASS compila para su CSS mientras se desarrolla localmente en el</small>

Fragmento de código
Buuhuu

buscar

<small>AEM La recuperación es un pequeño contenedor alrededor de la función de recuperación de JavaScript que le ayuda a lidiar con la API de contenido de la aplicación de composición al crear una aplicación de composición. AEM Facilita la búsqueda de contenido desde un índice de, la aplicación de paginación diferida, el seguimiento de vínculos a páginas e incluso la extracción de metadatos de página. Con la recuperación de datos obtiene toda la facilidad de crear una aplicación sin encabezado sin el bagaje de rendimiento de los SDK sin encabezado y la complejidad de las API sin encabezado.</small>

Fragmento de código
shsteimer

Plantillas cargadas dinámicamente

<small>Cargue CSS y JS específicos de una plantilla, lo que permite un estilo específico de la plantilla y el bloqueo automático, sin mezclar ese código en scripts/estilos globales.

Nota: debido a que la plantilla js se carga antes de que los bloques se carguen, pero después de que las secciones/bloques estén decorados, el bloqueo automático debe realizarse teniendo eso en cuenta (es decir, construir y decorar los bloques, y añadirlos a una sección, pero no cargarlos).</small>

Fragmento de código
fakatie

Imágenes con vínculos

Vista previa

<small>Este fragmento agrega hipervínculos a imágenes. Para utilizarlo, consulte el fragmento de código vinculado. Y durante la creación en Word/GDoc, especifique la URL del vínculo inmediatamente después de la imagen.</small>

Bloquear
jalagari

Bloque de formulario

Vista previa

<small>Bloque de formularios con varias funcionalidades

  • Integración de Recaptcha de Google

  • Compatibilidad con archivos adjuntos en Forms.

  • Procesamiento posterior

    • Notificación por correo electrónico
    • Sincronizar datos con Marketo o Salesforce.</small>

Bloquear
niekraaijmakers

Pestañas

Vista previa

<small>Bloque de pestañas basado en secciones que se bloquean automáticamente en scripts.js Admite bloques de "anidación" en el bloque de pestañas, así como metadatos de sección como estilos.

Lógica de bloque de pestañas controlada parcialmente por css</small>

Bloquear
zopenco

Image-Compare

Vista previa

<small>Este es un bloque de contenido sencillo para comparar dos imágenes con un control deslizante para mostrar u ocultar la imagen izquierda o derecha.</small>

Bloquear
shsteimer

Ruta de navegación

<small>Crea una navegación de ruta de exploración basada en los títulos de página de las páginas principales</small>

Fragmento de código
andreituicu

DOM Helpers (React JSX-Like)

Vista previa

<small>AEM Dom Helpers inspirado en React JSX para hacer que el código JS de la sea más conciso, fácil de escribir, entender y revisar. Estructura de sintaxis similar a DOM para visualizar fácilmente el HTML resultante al mirar el código usando JS 100 % vainilla sin compilación ni dependencias externas requeridas. Una sobrecarga mínima (algunas llamadas de funciones y archivos) que le permite mantener 100 LHS y evitar los inconvenientes de utilizar plantillas de cadena para manipular DOM. Se puede utilizar tanto para procesar datos dinámicos desde hojas como con datos procedentes de documentos de Word.</small>

Complemento de Sidekick
herzog31

Programación de bloques y secciones

Vista previa

<small>Este código permite programar bloques o secciones. Simplemente agregue una fecha o un intervalo de fechas como fila a la tabla de metadatos de bloque o sección, y el contenido solo se mostrará después de la fecha o dentro del intervalo.

Esto viene con una extensión de Sidekick, que le permite previsualizar contenido pasado o futuro.

No es adecuado para datos confidenciales, ya que el contenido programado seguirá en el DOM.</small>

Otros
bosschaert

docxtools: trabaje con varios archivos .docx desde la línea de comandos al estilo de linux

<small>Esta herramienta de línea de comandos le permite realizar tareas en un árbol de directorios de archivos .docx un poco como lo haría con los comandos linux "grep" o "sed". Actualmente se admiten: * cat - contenido de texto de salida del archivo docx a la consola * grep - buscar una regex en el texto del documento * reemplazar/reemplazar-vínculo buscar y reemplazar texto o hipervínculos dentro de los archivos .docx de palabra Nota: la herramienta está escrita en Rust y las versiones proporcionan ejecutables específicos de la plataforma. Si necesita una plataforma diferente, envíe un ping al David B o contribuya con una PR.</small>

Otros
sinóxido

Flujo de trabajo del generador de fuentes RSS Github

Vista previa

<small>Este flujo de trabajo de GitHub actualiza el XML de fuente RSS cada vez que se publica una nueva página. Flujo de trabajo:

Vínculo

Scripts:

Vínculo

</small>

Fragmento de código
ramboz

Creando icono Sprite

Vista previa

<small>Mecanismo para insertar iconos de SVG directamente en el documento, de modo que se pueda aplicar estilo directamente desde CSS (tamaño, color, etc.)</small>

Otros
vtsaplin

AEM Expresiones de

Vista previa

<small>AEM AEM Las expresiones de permiten a los usuarios transformar documentos de trabajo en plantillas mediante la adición de expresiones simples con parámetros. A continuación, estas expresiones se convierten en elementos HTML que muestran contenido recuperado dinámicamente. También es posible utilizar expresiones como decoradores para aplicar estilo y aumentar el contenido alrededor del punto de inserción. AEM De este modo, las expresiones se convierten en fragmentos reutilizables que se pueden colocar dentro de bloques de de nivel superior.</small>

Fragmento de código
sdmcraft

Imágenes externas

Vista previa

<small>AEM AEM AEM AEM Este fragmento de código muestra un mecanismo para utilizar imágenes en una página web de que se recuperan de un sistema externo (fuera de la)</small>

Otros
sinóxido

Reemplazar vínculos en todos los archivos .docx mediante una hoja de Excel

<small>Reemplaza de forma recursiva los vínculos obsoletos de los documentos de Word con nuevos vínculos basados en una hoja de Excel con la asignación, normalmente redirects.xlsx.</small>

Otros
sdmcraft

Herramienta de comparación visual para páginas web

Vista previa

<small>Esta es una herramienta de comparación visual para comparar páginas web. A menudo, mientras se trabaja en cambios de estilo para un sitio, queremos evaluar el impacto de ese cambio en todo el sitio. Hacer esto manualmente para todas las páginas es un proceso tedioso. Con esta herramienta, esta tarea está automatizada en gran medida. Una vez que se le proporciona la referencia de rama y la lista de URL para probarlas visualmente, pasa por todas las URL de las ramas "principal" y "de prueba" y las carga en un navegador sin encabezado basado en Playwright, toma capturas de pantalla y registra las diferencias. La herramienta informa al usuario sobre las diferencias y proporciona una ubicación de las capturas de pantalla donde se pueden revisar las diferencias.</small>

Otros
amol-anand

Visor de registros

Vista previa

<small>AEM Una forma sencilla de ver los registros de su proyecto de entrega de Edge de la</small>

Complemento de Sidekick
usman-khalid

Modo de accesibilidad

Vista previa

<small>Este complemento agrega un botón en la barra de tareas para habilitar el "Modo de accesibilidad" en una página de Franklin determinada, que audita la página desde una perspectiva de contenido e informa sobre cosas como la falta de texto alternativo en imágenes, la facilidad de lectura y otros elementos de accesibilidad.

También se puede ampliar para crear comprobaciones personalizadas, que se pueden utilizar para promover el uso correcto del bloque y cumplir con las directrices de estilo, por ejemplo. Hay un ejemplo de esto en el repositorio que comprueba demasiadas instancias de un bloque en una página e informa sobre él.

Los autores de contenido pueden utilizarla para ver la página y abordar cualquier problema relacionado con el contenido o la accesibilidad como una comprobación preliminar antes de la publicación.</small>

Complemento de Sidekick
shsteimer

Comprobación de referencias

<small>Busca las referencias utilizadas por una página (formularios, fragmentos, vínculos, etc.) y proporciona a los autores acceso con un solo clic para verlos y editarlos. También puede comprobar referencias entrantes.</small>

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec