Blockera samling

Det här är en samling block som betraktas som en del av AEM och som rekommenderas som ritningar för block i ditt projekt.

De här blocken kommer från verkliga AEM. För att vara en del av denna samling måste ett block ha en hög användning i ett antal projekt och ge tillräckligt abstrakt funktionalitet och vara tillräckligt allmänt så att det kan återanvändas utan att den underliggande innehållsmodellen behöver ändras.

När behoven och utformningen av webbplatser ändras kommer även blocksamlingen att ändras. Tillägg kommer att göras för att ta hänsyn till nya behov i projekt, men block som inte används tillräckligt ofta tas också bort (tas bort).

Det finns få tekniska principer för blocken i samlingen:

  • Intuitiv: Innehållsstruktur som är intuitiv och enkel att skapa
  • Användbart: Inga beroenden, kompatibla med standardmallar
  • Responsiv: Fungerar över alla brytpunkter
  • Kontextmedveten: Ärver CSS-sammanhang som text och bakgrundsfärger
  • Lokaliserbart: Inget hårdkodat innehåll
  • Snabb: Ingen negativ inverkan på prestanda
  • SEO och A11y: Användarvänlig och åtkomlig för SEO

Alla blocken kan anses utgöra grunden för din egen blockutveckling. Det är mycket troligt att du kommer att ändra alla .css och .js kod som passar dina egna projektbehov. Det primära värdet för dessa block är innehållsstrukturen som de tillhandahåller.

Med tanke på att koden för blocket kommer att anpassas till ditt projekt, finns det ingen avsikt att blocken i samlingen ska vara bakåtkompatibla med deras respektive äldre versioner eller att göra dem uppgraderbara.

Mallplatta

De vanligaste blocken (och standardinnehållstyperna) struktureras i AEM och är en del av alla AEM projekt. För att ett block ska bli en del av en standardmall måste det användas av de allra flesta AEM projekt.

<h3>Rubriker</h3>

Standardinnehåll

Olika rubriknivåer ger dokumentets semantiska stamnät

<h3>Text</h3>

Standardinnehåll

Brödtext eller text med omfattande semantiska formateringsalternativ

<h3>Bilder</h3>

Standardinnehåll

Bilder ger liv åt ditt innehåll

<h3>Listor</h3>

Standardinnehåll

Ordnade och osorterade listor var de än behövs

<h3>Länkar</h3>

Standardinnehåll

Referera till andra webbplatser eller ditt eget innehåll

<h3>Knappar</h3>

Standardinnehåll

Knappar med uppmaning och mycket mer

<h3>Code</h3>

Standardinnehåll

Markera förformaterade kodfragment i innehållet

<h3>Avsnitt</h3>

Standardinnehåll

Gruppera innehåll på sidan i avsnitt

<h3>Ikoner</h3>

Standardinnehåll

Gör innehållet intressantare med ikoner

<h3>Hero</h3>

Blockera

Herobehandling överst på sidan

<h3>Kolumner</h3>

Blockera

Flexibelt sätt att hantera layouter med flera kolumner på ett responsivt sätt

<h3>Kort</h3>

Blockera

Lista med kort med eller utan bilder och länkar

<h3>Sidhuvud</h3>

Blockera

Exempel på flexibel rubrik och navigering

<h3>Sidfot</h3>

Blockera

Enkelt utbyggbart sidfotblock

<h3>Metadata</h3>

Lägg till metadata på sidan där det behövs

<h3>Avsnittsmetadata</h3>

Markera eller strukturera allt innehåll i ett avsnitt

Blockera samling

Blocksamlingen innehåller block som används ofta, men som inte är så vanliga att använda som mallplatta. Som tumregel måste ett block användas i mer än hälften av alla AEM projekt för att ingå i blocksamlingen.

Blocksamlingen kan vara inmatningssökvägen till mallkoden. Om ett block i mallsidan inte längre används så mycket kan det flyttas till den här samlingen.

<h3>Bädda in</h3>

Blockera

Ett enkelt sätt att bädda in innehåll för sociala medier på AEM sidor

<h3>Fragment</h3>

Blockera

Dela innehåll på flera sidor

<h3>Tabell</h3>

Blockera

Ett sätt att ordna tabelldata i rader och kolumner

<h3>Video</h3>

Blockera

Visa och spela upp videor direkt från AEM

<h3>Dragspel</h3>

Blockera

En hög med beskrivande etiketter som kan växlas för att visa relaterat fullständigt innehåll

<h3>Breadcrumbs</h3>

Blockera tillägg

En lista med sidrubriker och relevanta länkar som visar den aktuella sidans plats i navigeringshierarkin

<h3>Carousel</h3>

Blockera

Ett dynamiskt visningsverktyg som smidigt övergår genom en serie bilder med valfritt textinnehåll

<h3>Formulär</h3>

Blockera

En uppsättning indatakontroller grupperade tillsammans som gör det möjligt för användare att skicka information

<h3>Citat</h3>

Blockera

En visning av ett citattecken eller en markering av en viss del (eller"pull-citattecken") i ett dokument

<h3>Sök</h3>

Blockera

Låter användarna hitta webbplatsinnehåll genom att ange en sökterm

<h3>Tabbar</h3>

Blockera

Segmentinformation i flera taggade paneler (eller"flikade")

<h3>Modal</h3>

AutoBlock

En popup som visas över annat webbplatsinnehåll

Blocksamlingen utvecklas kontinuerligt utifrån synpunkter från AEM användare. Om du tror att det finns ett block som ska tas med i blocksamlingen kan du kontakta din AEM. Aktuella kandidater för att delta i blocksamlingen är bland annat:

  • Medgivande - banderoll

Om du har ett omedelbart behov av ett block som ännu inte ingår i samlingen är det relativt enkelt att hitta AEM projekt på GitHub som har exempelimplementeringar för alla ovanstående kandidater.

Blockera grupp

Med Block Party vill vi ge våra passionerade utvecklarcommunityn en plats att visa upp vad de har byggt på AEM sajter. Det gör det också möjligt för andra att undvika att uppfinna hjulet på nytt och återanvända dessa block/kodfragment/integreringar som byggts av communityn och justera koden efter behov för att passa sina egna projekt.

Obs! Vi älskar och stöder vår AEM utvecklarcommunity, men Adobe ansvarar inte för att underhålla eller uppdatera koden som visas i Block Party. Använd koden efter eget gottfinnande.

Om du är AEM Developer och vill skicka in ditt coola block/kodfragment eller din integrering anger du ditt tävlingsbidrag använda det här formuläret.

Kodfragment
hannessolo

Förhandsgranska

<small>Skript för att lägga till moduler på din ankelinsida. Detta använder det nya (ish) inbyggda dialogelementet.

Du kan se hur det fungerar här:

Länk

</small>

Kodfragment
msagolj

Autospela video

<small>Om du vill spela upp videofilmer automatiskt i olika webbläsare måste du ange en uppsättning attribut. Det är viktigt att ställa in videoTag.muted = true på exakt det här sättet, annars spelas det inte upp i Chrome. T.ex. setAttribute('muted', true) fungerar inte.</small>

Sidekick plugin
dylandepass

Sidekick Library

Förhandsgranska

<small>Biblioteket i Sidekick är ett tillägg för AEM Sidekick som gör det möjligt för utvecklare att skapa gränssnittsstyrda verktyg för innehållsförfattare. Det innehåller en plugin för inbyggda block som kan visa en lista med alla block för författare på ett intuitivt sätt, vilket eliminerar behovet av att författare kommer ihåg eller söker efter alla varianter av ett block. Utvecklare kan också skriva egna plugin-program för sidsparkbiblioteket.</small>

Kodfragment
davidnuescheler

Metatag/JSON-baserad CSP

<small>Det här sättet är att ställa in en CSP på ett sätt som bara överförs via kabeln en gång och sedan cachas på klienten. Gör att CSP kan hanteras i en lättläst JSON-fil</small>

Bygg verktyg
sachioross

SASS + AEM

<small>SASS-kompilering för CSS samtidigt som man lokalt utvecklar AEM</small>

Kodfragment
Buuhuu

hämta

<small>ffetch är en liten wrapper runt JavaScript-hämtningsfunktionen som hjälper dig att hantera AEM Content API när du skapar ett sammansatt program. Det gör det enkelt att hämta innehåll från ett AEM index, använda lat sidnumrering, följa länkar till sidor och till och med hämta sidmetadata. Med Adobe Fetch blir det enkelt att skapa ett headless-program utan prestandabagage från headless SDK:er och komplexiteten hos headless API:er.</small>

Kodfragment
shsteimer

Dynamiskt inlästa mallar

<small>Läs in CSS och JS som är specifika för en mall, vilket möjliggör mallspecifik formatering och automatisk blockering, utan att behöva sammanfoga koden i globala skript/format.

Obs! Eftersom mallens js läses in innan -block läses in, men när -avsnitt/block har dekorerats, måste automatisk blockering göras med det i åtanke (d.v.s. byggas och dekoreras blocken och läggas till i ett -avsnitt, men de läses inte in).</small>

Kodfragment
fkakatie

Bilder med länkar

Förhandsgranska

<small>Det här kodutdraget lägger till hyperlänkar till bilder. Om du vill använda det läser du i det länkade kodfragmentet. När du skriver i Wod/GDoc anger du länken url omedelbart efter bilden.</small>

Blockera
jalagari

Formulärblock

Förhandsgranska

<small>Formulärblock med olika funktioner

  • Integrering med Google Recaptcha

  • Stöd för bifogade filer i Forms.

  • Efterbearbetning

    • E-postmeddelande
    • Synkronisera data till Marketo eller Salesforce.</small>

Blockera
niekraaijers

Tabbar

Förhandsgranska

<small>Tabbar som är baserade på avsnitt som automatiskt blockeras i skript.js Stöder kapslingsblock i tabbblocket samt avsnittsmetadata som format.

Tabbblockslogik som delvis styrs av css</small>

Blockera
dave-fink

Bildjämförelse

Förhandsgranska

<small>Det här är ett enkelt innehållsblock om du vill jämföra två bilder med ett reglage för att visa eller dölja den vänstra eller högra bilden.</small>

Blockera
shsteimer

<small>Skapar en navigeringsnavigering baserad på de överordnade sidornas sidtitlar</small>

Kodfragment
andreituicu

DOM Helpers (React JSX-like)

Förhandsgranska

<small>Dom Helpers inspirerades av React JSX för att göra den AEM JS-koden mer kortfattad, enklare att skriva, förstå och granska. DOM gillar syntaxstruktur för att enkelt visualisera HTML när du tittar på koden med 100 % vanilj-JS utan kompilering eller externa beroenden. Minimal overhead (några få ifs och funktionsanrop) som gör att du kan behålla 100 LHS och undvika fallgropar med att använda strängmallar för DOM-manipulering. Kan användas både för att återge dynamiska data från blad eller med data från Word-dokument.</small>

Sidekick plugin
herzog31

Schemaläggning av block och avsnitt

Förhandsgranska

<small>Med den här koden kan du schemalägga block och avsnitt. Lägg bara till ett datum eller datumintervall som rad i metadatatabellen för block eller avsnitt så visas innehållet bara efter datumet eller inom intervallet.

Detta levereras med ett Sidekick-tillägg som gör att du kan förhandsgranska tidigare eller framtida innehåll.

Passar inte för konfidentiella data eftersom det schemalagda innehållet fortfarande kommer att finnas i DOM.</small>

Övriga
bosschaert

docxtools: arbeta med flera .docx-filer från kommandoradsformatet linux

<small>Med det här kommandoradsverktyget kan du utföra åtgärder i ett katalogträd med .docx-filer på ungefär samma sätt som med kommandona grep och sed i Linux. Följande stöds för närvarande: * cat - utdata text content of docx file to console * grep - search for a regex in the document text * replace/replace-link search and replace text or hyperlinks inside the word .docx files Obs! verktyget är skrivet i Rust och versionerna innehåller plattformsspecifika körbara filer. Om du behöver en annan plattform som pingar David B eller bidrar med en PR.</small>

Övriga
synox

RSS-matningsgeneratorn Github Workflow

Förhandsgranska

<small>Det här Github-arbetsflödet uppdaterar RSS-feed-XML varje gång en ny sida publiceras. Arbetsflöde:

Länk

Skript:

Länk

</small>

Kodfragment
ramboz

Skapar ikon-sprite

Förhandsgranska

<small>En mekanism som infogar SVG-ikoner direkt i dokumentet så att ikonerna kan formateras direkt från CSS (storlek, färg osv.)</small>

Övriga
vtsaplin

AEM

Förhandsgranska

<small>Med AEM kan användare omvandla AEM dokument till mallar genom att lägga till enkla uttryck med parametrar. Uttrycken blir sedan element i HTML som visar dynamiskt hämtat innehåll. Du kan också använda uttryck som dekoratorer för att formatera och förstärka innehåll runt insättningspunkten. Detta gör om uttryck till återanvändbara fragment som kan placeras inuti AEM på den översta nivån.</small>

Kodfragment
sdmcraft

Externa bilder

Förhandsgranska

<small>Det här kodfragmentet visar en mekanism för att använda bilder på en AEM AEM webbsida som hämtas från ett externt system (utanför AEM AEM)</small>

Övriga
synox

Ersätta länkar i alla .docx-filer med Excel-blad

<small>Ersätter gamla länkar i Word-dokument rekursivt med nya länkar som är baserade på ett Excel-blad med mappningen, vanligen redirects.xlsx.</small>

Övriga
sdmcraft

Visual Comparison Tool for webpages

Förhandsgranska

<small>Det här är ett visuellt jämförelseverktyg för att jämföra webbsidor. När vi arbetar med formatändringar för en webbplats vill vi ofta utvärdera effekten av ändringen på hela webbplatsen. Att göra detta manuellt för alla sidor är en mödosam process. Med det här verktyget automatiseras den här uppgiften i stor utsträckning. När filialreferensen och listan med URL:er har angetts för visuell testning går den igenom alla URL:er på grenarna"main" och"test" och läser in dem i en Playwright-baserad webbläsare utan rubrik, tar skärmbilder och registrerar skillnaderna. Verktyget informerar användaren om skillnaderna och anger var skärmbilderna finns där skillnaderna kan granskas.</small>

Övriga
amol-anand

Loggvisare

Förhandsgranska

<small>Enkelt sätt att visa loggar för AEM Edge Delivery-projekt</small>

Sidekick plugin
usman-khalid

Tillgänglighetsläge

Förhandsgranska

<small>Det här plugin-programmet lägger till en knapp i sidosparken för att aktivera"hjälpmedelsläget" på en viss Franklin-sida, som granskar sidan från ett innehållsperspektiv och rapporterar saker som att det saknas alternativ text på bilder, lättläst text och andra hjälpmedelsobjekt.

Det går även att utöka för att skapa anpassade kontroller, som kan användas för att främja korrekt blockanvändning och till exempel följa stilriktlinjer. Det finns ett exempel på detta i rapporten som söker efter för många förekomster av ett block på en sida och rapporterar om det.

Den kan användas av innehållsförfattare för att visa sidan och åtgärda eventuella innehålls- eller tillgänglighetsrelaterade problem som en preflight-kontroll före publicering.</small>

Sidekick plugin
shsteimer

Referenskontroll

<small>Söker efter referenser som används av en sida (formulär, fragment, länkar osv.) och ger författarna tillgång till dem med ett klick så att de kan visa och redigera dem. Kan även söka efter inkommande referenser.</small>

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