Bloccare una raccolta

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 di produzione reale AEM. 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:

  • Intuitivo: Struttura dei contenuti intuitiva e facile da creare
  • Utilizzabile: Nessuna dipendenza, compatibile con boilerplate
  • Reattivo: Funziona su 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 cambierai tutte le .css e .js per soddisfare le tue 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 nel Boilerplate dell'AEM e fanno parte di ogni progetto dell'AEM. Perché un blocco diventi parte del boilerplate deve essere usato dalla stragrande maggioranza di tutti i progetti AEM.

<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 dei blocchi è necessario utilizzare un blocco 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.

<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 dall’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

Elenco di titoli di pagina e collegamenti rilevanti che mostrano la posizione della pagina corrente nella gerarchia di navigazione

<h3>Carosello</h3>

Blocco

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

<h3>Modulo</h3>

Blocco

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

<h3>Citazione</h3>

Blocco

Visualizzazione di una citazione o di un'evidenziazione di un passaggio specifico (o "virgolette") 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>Finestra modale</h3>

Blocco automatico

Popup visualizzato sopra altri contenuti del sito

La raccolta di blocchi è in continua evoluzione sulla base del feedback ricevuto dalla comunità AEM. Se pensi che ci sia un blocco da includere nella raccolta blocchi, contatta il 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 progetti AEM su GitHub che abbiano implementazioni di esempio per tutti i candidati sopra indicati.

Blocca gruppo

Con Block Party, vorremmo dare alla nostra appassionata comunità di sviluppatori un posto in cui mostrare ciò che hanno costruito sui siti dell'AEM. Permette inoltre ad altri di evitare di reinventare la ruota e di riutilizzare questi blocchi / snippet di codice / integrazioni costruiti dalla community e di ritoccare il codice in base alle necessità per adattarlo ai propri progetti.

Nota: anche se apprezziamo e supportiamo la community di sviluppatori AEM, Adobe non è responsabile della manutenzione o dell’aggiornamento del codice presentato nel Blocco Party. Utilizza il codice a tua discrezione.

Se sei uno sviluppatore di AEM e desideri inviare il tuo blocco cool / frammento di codice o integrazione, inserisci i tuoi dati inviati utilizzo di questo modulo.

Frammento di codice
hannessolo

Finestra modale

Anteprima

<small>Script per aggiungere modali alla pagina franklin. In questo modo viene utilizzato il nuovo elemento della finestra di dialogo nativo (ish).

Puoi visualizzarlo in azione qui:

Collegamento

</small>

Frammento di codice
msagolj

Riproduzione automatica video

<small>Per riprodurre automaticamente i video su diversi browser, è necessario impostare una serie di attributi. È importante impostare videoTag.muted = true esattamente in questo modo altrimenti non verrà riprodotto in chrome. Esempio: setAttribute('muted', true) non funziona.</small>

plugin Sidekick
dylandepass

Libreria di Sidekick

Anteprima

<small>La Libreria dei Sidekick è un'estensione per AEM Sidekick che consente agli sviluppatori di creare strumenti guidati dall'interfaccia utente per gli autori di contenuto. Include un plug-in per blocchi integrato che può mostrare agli autori un elenco di tutti i blocchi in modo intuitivo, eliminando la necessità di ricordare o cercare ogni variante di un blocco. Gli sviluppatori possono anche scrivere i propri plug-in per la libreria della barra laterale.</small>

Frammento di codice
davidnuescheler

CSP basato su metatag/JSON

<small>Questo approccio consiste nell’impostare un CSP in modo che venga trasportato sul cavo una sola volta e quindi memorizzato nella cache del client. Consente di gestire i CSP in un file JSON di facile lettura</small>

Creare strumenti
sachiorosi

SASS + AEM

<small>Compilazione SASS per CSS durante lo sviluppo locale in AEM</small>

Frammento di codice
Buuhuu

recuperare

<small>Il recupero è un piccolo wrapper intorno alla funzione di recupero JavaScript che consente di gestire l’API dei contenuti AEM durante la creazione di un’applicazione componibile. Semplifica il recupero del contenuto da un indice AEM, l’applicazione di una paginazione lenta, il follow-up dei collegamenti alle pagine e persino il pull dei metadati della pagina. Con il recupero puoi creare facilmente un’applicazione headless senza il bagaglio di prestazioni degli SDK headless e la complessità delle API headless.</small>

Frammento di codice
shsteimer

Modelli caricati dinamicamente

<small>Carica CSS e JS specifici per un modello, consentendo uno stile specifico per il modello e il blocco automatico, senza mescolare tale codice in script/stili globali.

Nota: poiché il template js viene caricato prima del caricamento dei blocchi, ma dopo che le sezioni o i blocchi sono decorati, il blocco automatico deve essere eseguito tenendo presente questo aspetto (ovvero, creare e decorare i blocchi e aggiungerli a una sezione, ma non caricarli).</small>

Frammento di codice
fkakatie

Immagini con collegamenti

Anteprima

<small>Questo frammento aggiunge collegamenti ipertestuali alle immagini. Per utilizzarlo, fai riferimento al frammento di codice collegato. E durante l’authoring in Word/Google, specifica l’URL di collegamento immediatamente dopo l’immagine.</small>

Blocca
jalagari

Blocco modulo

Anteprima

<small>Blocco di moduli con varie funzionalità

  • Integrazione di Google Recaptcha

  • Supporto degli allegati in Forms.

  • Post-elaborazione

    • Notifica e-mail
    • Sincronizza dati con Marketo o Salesforce.</small>

Blocca
niekraaijmakers

Schede

Anteprima

<small>Le schede bloccano in base alle sezioni bloccate automaticamente in scripts.js Supporta la "nidificazione" dei blocchi nel blocco di scheda e dei metadati di sezione, come gli stili.

Logica di blocco scheda controllata parzialmente da css</small>

Blocca
dave-fink

Image-Compare

Anteprima

<small>Questo è un blocco di contenuto semplice per confrontare due immagini con un cursore per mostrare o nascondere l’immagine sinistra o destra.</small>

Blocca
shsteimer

<small>Crea una navigazione breadcrumb in base ai titoli delle pagine padre</small>

Frammento di codice
andreituicu

Helper DOM (React JSX-Like)

Anteprima

<small>Dom Helpers ispirato da React JSX per rendere il codice AEM JS più conciso, più facile da scrivere, capire e rivedere. Struttura della sintassi DOM like per visualizzare facilmente il HTML risultante quando si osserva il codice utilizzando JS 100% vanilla senza alcuna compilazione o dipendenze esterne richieste. Un sovraccarico minimo (alcuni se e chiamate di funzione) consente di mantenere 100 LHS ed evitare le insidie dell’utilizzo di modelli di stringhe per la manipolazione DOM. Può essere utilizzato sia per il rendering di dati dinamici da fogli che con dati provenienti da documenti di Word.</small>

plugin Sidekick
herzog31

Programmazione di blocchi e sezioni

Anteprima

<small>Questo codice consente di pianificare blocchi o sezioni. È sufficiente aggiungere una data o un intervallo di date come riga alla tabella di metadati del blocco o della sezione e il contenuto verrà visualizzato solo dopo la data o all’interno dell’intervallo.

Questa viene fornita con un’estensione di Sidekick, che consente di visualizzare in anteprima contenuti passati o futuri.

Non adatto per dati riservati, poiché il contenuto pianificato sarà ancora nel DOM.</small>

Altro
bosschaert

docxtools: utilizzo di più file docx dalla riga di comando in stile linux

<small>Questo strumento da riga di comando consente di eseguire operazioni su una struttura di directory di file con estensione docx in modo analogo a quanto avviene con i comandi linux 'grep' o 'sed'. Attualmente supportati sono: * cat - output del contenuto di testo del file docx nella console * grep - ricerca di un regex nel testo del documento * replace/replace-link search e sostituzione di testo o collegamenti ipertestuali all'interno dei file .docx di Word Nota: lo strumento è scritto in Rust e le versioni forniscono eseguibili specifici per la piattaforma. Se hai bisogno di una piattaforma diversa, esegui il ping del David B o contribuisci con una PR.</small>

Altro
sinossi

Flusso di lavoro Github del generatore di feed RSS

Anteprima

<small>Questo flusso di lavoro Github aggiorna l’XML del feed RSS ogni volta che viene pubblicata una nuova pagina. Flusso di lavoro:

Collegamento

Script:

Collegamento

</small>

Frammento di codice
ramboz

Creazione di sprite di icone

Anteprima

<small>Un meccanismo per allineare le icone di SVG direttamente nel documento, in modo che possano essere formattate direttamente dal CSS (dimensioni, colore, ecc.)</small>

Altro
vtsaplin

Espressioni AEM

Anteprima

<small>Le espressioni AEM consentono agli utenti di trasformare i documenti AEM in modelli aggiungendo espressioni semplici con parametri. Queste espressioni diventano quindi elementi HTML che visualizzano il contenuto recuperato in modo dinamico. È inoltre possibile utilizzare le espressioni come decoratori per applicare uno stile e migliorare il contenuto intorno al punto di inserimento. Questo trasforma le espressioni in frammenti riutilizzabili che possono essere posizionati all’interno di blocchi AEM di livello superiore.</small>

Frammento di codice
sdmcraft

Immagini esterne

Anteprima

<small>Questo frammento di codice illustra un meccanismo per l’utilizzo di immagini su una pagina web dell’AEM dell’AEM che vengono recuperate da un sistema esterno (al di fuori dell’AEM AEM)</small>

Altro
sinossi

Sostituire i collegamenti in tutti i file con estensione docx utilizzando il foglio di Excel

<small>Sostituisce in modo ricorsivo i collegamenti obsoleti nei documenti di Word con nuovi collegamenti basati su un foglio di Excel con la mappatura, in genere reindirizzamenti.xlsx.</small>

Altro
sdmcraft

Strumento di confronto visivo per pagine Web

Anteprima

<small>Si tratta di uno strumento di confronto visivo per il confronto di pagine Web. Spesso, mentre si lavora sulle modifiche di stile per un sito, vogliamo valutare l’impatto di tali modifiche in tutto il sito. Eseguire questa operazione manualmente per tutte le pagine è un processo noioso. Con questo strumento, questo compito è in larga misura automatizzato. Una volta fornito il riferimento al ramo e l’elenco degli URL per il test visivo, questo passa attraverso tutti gli URL dei rami "principale" e "test" e li carica in un browser headless basato su Playright, prende schermate e registra le differenze. Lo strumento informa l’utente sulle differenze e fornisce la posizione delle schermate in cui è possibile esaminare le differenze.</small>

Altro
amolo-anand

Visualizzatore registro

Anteprima

<small>Modo semplice per visualizzare i registri del progetto AEM Edge Delivery</small>

plugin Sidekick
usman-khalid

Modalità di accesso facilitato

Anteprima

<small>Questo plug-in aggiunge un pulsante nella barra laterale per abilitare la "Modalità di accessibilità" su una determinata pagina Franklin, che controlla la pagina dal punto di vista del contenuto e segnala elementi come testo alternativo mancante nelle immagini, facilità di leggibilità e altri elementi di accessibilità.

È inoltre estendibile per creare controlli personalizzati, che possono essere utilizzati per promuovere il corretto utilizzo dei blocchi e rispettare le linee guida di stile, ad esempio. Nell’archivio esiste un esempio di questo tipo che controlla troppe istanze di un blocco su una pagina e genera rapporti su di esso.

Può essere utilizzato dagli autori di contenuti per visualizzare la pagina e risolvere eventuali problemi relativi al contenuto o all’accessibilità come verifica preliminare prima della pubblicazione.</small>

plugin Sidekick
shsteimer

Controllo riferimenti

<small>Trova i riferimenti utilizzati da una pagina (moduli, frammenti, collegamenti, ecc.) e consente agli autori di accedere con un solo clic per visualizzarli e modificarli. Può anche verificare la presenza di riferimenti in ingresso.</small>

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