Bloccare una raccolta

Ultimo aggiornamento: 26 febbraio 2025
  • Argomenti:

Questa è una raccolta di blocchi considerati parte del prodotto AEM e sono consigliati come blueprint per i blocchi nel tuo progetto.

Questi blocchi provengono da progetti AEM di produzione reali. Per far parte di questa raccolta, un blocco deve essere utilizzato in modo elevato in diversi progetti e fornire funzionalità astratte sufficienti, oltre a essere abbastanza generico da poter essere riutilizzato senza dover modificare il modello di contenuto sottostante.

Man mano che cambiano le esigenze e le progettazioni dei siti web, cambierà anche la raccolta di blocchi. Saranno effettuate aggiunte per riflettere le esigenze emergenti dei progetti, ma verranno rimossi anche i blocchi che non sono utilizzati con sufficiente frequenza (obsoleti).

Esistono pochi principi tecnici per i blocchi nella raccolta:

  • Intuitiva: struttura del contenuto intuitiva e facile da creare
  • Utilizzabile: Nessuna dipendenza, compatibile con boilerplate
  • Reattivo: funziona tra tutti i punti di interruzione
  • In base al contesto: eredita il contesto CSS, ad esempio i colori del testo e dello sfondo
  • Localizzabile: Nessun contenuto hardcoded
  • Veloce: Nessun impatto negativo sulle prestazioni
  • SEO e A11y: SEO-friendly e accessibile

Tutti i blocchi possono essere considerati come una base per lo sviluppo di blocchi personalizzati. È molto probabile che si modificherà tutto il codice .css e .js per soddisfare le proprie esigenze di progetto. Il valore principale di questi blocchi è la struttura del contenuto che forniscono.

Considerando che il codice del blocco verrà completamente adattato al progetto, non c’è intenzione che i blocchi nella raccolta siano compatibili con le versioni precedenti o che possano essere aggiornati.

Piastra calda

I blocchi più comunemente utilizzati (così come i tipi di contenuto predefiniti) sono curati in AEM Boilerplate e fanno parte di ogni progetto AEM. Affinché un blocco diventi parte di un piano terra, deve essere utilizzato dalla stragrande maggioranza di tutti i progetti AEM.

La base di codice per tutti i blocchi in AEM Boilerplate è open-source ed è disponibile in GitHub adobe/aem-boilerplate

I blocchi in AEM Boilerplate possono essere scoperti utilizzando la libreria di barra laterale di seguito. Utilizza il pulsante copy per copiare la struttura di contenuto corrispondente negli Appunti e incollarla in un documento per visualizzarne la struttura.

<h3>Titoli</h3>

Contenuto predefinito

Livelli diversi di titoli forniscono la struttura semantica del documento

<h3>Testo</h3>

Contenuto predefinito

Testo del corpo del testo o copia con opzioni di formattazione semantica

<h3>Immagini</h3>

Contenuto predefinito

Le immagini animano i contenuti

<h3>Elenchi</h3>

Contenuto predefinito

Elenchi ordinati e non ordinati dove necessari

<h3>Collegamenti</h3>

Contenuto predefinito

Fai riferimento ad altri siti web o al tuo contenuto

<h3>Pulsanti</h3>

Contenuto predefinito

Pulsanti di invito all’azione e altro ancora

<h3>Codice</h3>

Contenuto predefinito

Evidenzia frammenti di codice preformattati nel contenuto

<h3>Sezioni</h3>

Contenuto predefinito

Raggruppare il contenuto della pagina in sezioni

<h3>Icone</h3>

Contenuto predefinito

Rendere i contenuti più interessanti con le icone

<h3>Eroe</h3>

Blocco

Trattamento eroico nella parte superiore di una pagina

<h3>Colonne</h3>

Blocco

Modalità flessibile per gestire layout a più colonne in modo dinamico

<h3>Schede</h3>

Blocco

Elenco delle schede con o senza immagini e collegamenti

<h3>Intestazione</h3>

Blocco

Esempio di intestazione e navigazione flessibili

<h3>Piè di pagina</h3>

Blocco

Blocco piè di pagina estensibile semplice

<h3>Metadati</h3>

Aggiungere metadati alla pagina dove necessario

<h3>Metadati sezione</h3>

Evidenzia o struttura tutto il contenuto di una sezione

Bloccare una raccolta

La raccolta di blocchi contiene blocchi di uso comune, ma non così comuni da essere considerati piastre calde. Come regola empirica, per essere incluso nella raccolta di blocchi, un blocco deve essere utilizzato su più della metà di tutti i progetti AEM.

L'insieme di blocchi può essere il percorso di ingresso nel codice boilerplate. Allo stesso modo, se un blocco nella piastra non viene più utilizzato tanto, può essere spostato in questa raccolta.

La base di codice per tutti i blocchi nella raccolta di blocchi di AEM è open-source ed è disponibile in GitHub adobe/aem-block-collection

I blocchi nella raccolta di blocchi di AEM possono essere rilevati utilizzando la raccolta di collegamenti laterali di seguito. Utilizzare il pulsante copy per copiare la struttura di contenuto corrispondente negli Appunti e incollarla in un documento per visualizzarne la struttura.

<h3>Incorpora</h3>

Blocco

Un modo semplice per incorporare i contenuti dei social media nelle pagine AEM

<h3>Frammento</h3>

Blocco

Condivisione di contenuti su più pagine

<h3>Tabella</h3>

Blocco

Un modo per organizzare i dati tabulari in righe e colonne

<h3>Video</h3>

Blocco

Visualizzare e riprodurre video direttamente da AEM

<h3>Pannello a soffietto</h3>

Blocco

Stack di etichette descrittive che possono essere attivate per visualizzare il contenuto completo correlato

<h3>Breadcrumb</h3>

Componente aggiuntivo di blocco

Un elenco di titoli di pagina e collegamenti pertinenti che mostrano la posizione della pagina corrente nel gerarchia di navigazione

<h3>Carosello</h3>

Blocco

Strumento di visualizzazione dinamica che effettua una transizione fluida attraverso una serie di immagini con contenuto testo

<h3>Finestra modale</h3>

Blocco automatico

Popup visualizzato sopra altri contenuti del sito

<h3>Citazione</h3>

Blocco

Visualizzazione di una citazione o di un'evidenziazione di un passaggio specifico (o "citazioni") all'interno di un documento

<h3>Ricerca</h3>

Blocco

Consente agli utenti di trovare il contenuto del sito immettendo un termine di ricerca

<h3>Schede</h3>

Blocco

Informazioni sui segmenti in più pannelli con etichetta (o "a schede")

<h3>Modulo</h3>

Blocca (obsoleto)

Un insieme di controlli di input raggruppati che consente agli utenti di inviare informazioni

La raccolta blocchi è in continua evoluzione in base al feedback ricevuto dalla community di AEM. Se pensi che ci sia un blocco da includere nella raccolta blocchi, contatta il tuo contatto AEM. I candidati attuali per l'inclusione nella raccolta di blocchi includono:

  • Banner di consenso

Se hai bisogno immediato di un blocco che non fa ancora parte della raccolta, è relativamente facile trovare su GitHub progetti AEM con implementazioni di esempio per tutti i candidati indicati sopra.