Blokverzameling

Dit is een inzameling van blokken die als een deel van het AEM product worden beschouwd en als blauwdrukken voor blokken in uw project worden geadviseerd.

Deze blokken komen uit echte productie AEM projecten. Als u deel wilt uitmaken van deze verzameling, moet een blok een groot gebruik hebben in een aantal projecten en voldoende abstracte functionaliteit bieden en algemeen genoeg zijn, zodat het opnieuw kan worden gebruikt zonder het onderliggende inhoudsmodel te hoeven wijzigen.

Naarmate de behoeften en ontwerpen van websites veranderen, verandert ook de blokverzameling. Er zullen aanvullingen worden aangebracht om rekening te houden met de opkomende behoeften van projecten, maar blokken die niet vaak genoeg worden gebruikt, worden ook verwijderd (afgekeurd).

Er zijn weinig technische principes voor de blokken in de inzameling:

  • Intuïtief: Intuïtieve en eenvoudig te ontwerpen inhoudsstructuur
  • Te gebruiken: Geen afhankelijkheden, compatibel met boilerplate
  • Responsief: Werkt over alle onderbrekingspunten
  • Contextgevoelig: Overerft CSS-context zoals tekst en achtergrondkleuren
  • Lokaal: Geen hard-gecodeerde inhoud
  • Snel: Geen negatieve invloed op prestaties
  • SEO en A11y: SEO-vriendelijk en toegankelijk

Alle blokken kunnen als basis voor uw eigen blokontwikkeling worden beschouwd. Het is zeer waarschijnlijk dat u alle .css en .js code om aan uw eigen projectbehoeften te voldoen. De primaire waarde van deze blokken is de inhoudstructuur die ze bieden.

Aangezien de code van uw blok volledig aan uw project zal worden aangepast, is er geen bedoeling dat de blokken in de inzameling achterwaarts compatibel met hun respectieve oudere versies zijn of hen upgradable maken.

Boilerplate

De meest algemeen gebruikte blokken (evenals standaardinhoudstypes) worden gebogen in AEM Boilerplate en zijn een deel van elk AEM project. Om een blok deel te laten uitmaken van een bouwsteen, moet het worden gebruikt door de overgrote meerderheid van alle AEM projecten.

<h3>Koppen</h3>

Standaardinhoud

De verschillende niveaus van rubrieken verstrekken de semantische backbone van uw document

<h3>Tekst</h3>

Standaardinhoud

Platte tekst of kopie met opties voor semantische opmaak

<h3>Afbeeldingen</h3>

Standaardinhoud

Afbeeldingen brengen uw inhoud levend

<h3>Lijsten</h3>

Standaardinhoud

Geordende en ongeordende lijsten waar deze nodig zijn

<h3>Koppelingen</h3>

Standaardinhoud

Verwijs naar andere websites of uw eigen inhoud

<h3>Knoppen</h3>

Standaardinhoud

Vraag-aan-actie knopen en meer

<h3>Code</h3>

Standaardinhoud

Vooraf opgemaakte codefragmenten in uw inhoud markeren

<h3>Secties</h3>

Standaardinhoud

Inhoud op uw pagina in secties groeperen

<h3>pictogrammen</h3>

Standaardinhoud

Maak uw inhoud interessanter met pictogrammen

<h3>Hero</h3>

Blok

Hero-behandeling boven aan een pagina

<h3>Kolommen</h3>

Blok

Flexibele manier om lay-outs met meerdere kolommen op een responsieve manier te verwerken

<h3>Kaarten</h3>

Blok

Lijst met kaarten met of zonder afbeeldingen en koppelingen

<h3>Koptekst</h3>

Blok

Flexibel voorbeeld voor koptekst en navigatie

<h3>Voettekst</h3>

Blok

Eenvoudig, uitbreidbaar voettekstblok

<h3>Metagegevens</h3>

Voeg waar nodig metagegevens toe aan de pagina

<h3>Sectie-metagegevens</h3>

Alle inhoud in een sectie markeren of structureren

Blokverzameling

De blokinzameling bevat blokken die algemeen worden gebruikt, maar niet zo gemeenschappelijk om als boilerplate worden beschouwd. Als regel van duim, om in de blokinzameling te worden opgenomen moet een blok op meer dan de helft van alle AEM projecten worden gebruikt.

De blokinzameling kan de ingangsweg in boilerplate code zijn. Op dezelfde manier als een blok in de boilerplate niet meer zo veel wordt gebruikt, kan het naar deze inzameling worden verplaatst.

<h3>Insluiten</h3>

Blok

Een eenvoudige manier om inhoud van sociale media in te sluiten in AEM pagina's

<h3>Fragment</h3>

Blok

Delen van inhoud op meerdere pagina's

<h3>Tabel</h3>

Blok

Een manier om tabelgegevens in rijen en kolommen te ordenen

<h3>Video</h3>

Blok

Video's rechtstreeks vanaf AEM weergeven en afspelen

<h3>Accordeon</h3>

Blok

Een stapel beschrijvende labels die kunnen worden geschakeld om gerelateerde volledige inhoud weer te geven

<h3>Broodkruimels</h3>

Invoegtoepassing blokkeren

Een lijst met paginatitels en relevante koppelingen die de locatie van de huidige pagina in de navigatiehiërarchie weergeven

<h3>Carousel</h3>

Blok

Een dynamisch weergavegereedschap waarmee u een reeks afbeeldingen met optionele tekstinhoud vloeiend kunt doorlopen

<h3>Formulier</h3>

Blok

Een set invoerbesturingselementen die zijn gegroepeerd en waarmee gebruikers informatie kunnen verzenden

<h3>Offerte</h3>

Blok

Een aanhalingsteken of een markering van een bepaalde passage (of "pull-aanhalingstekens") in een document weergeven

<h3>Zoeken</h3>

Blok

Hiermee kunnen gebruikers site-inhoud zoeken door een zoekterm in te voeren

<h3>Tabs</h3>

Blok

Informatie segmenteren in meerdere gelabelde (of 'tabsgewijze') deelvensters

<h3>Modal</h3>

Autoblock

Een pop-up die boven andere site-inhoud wordt weergegeven

De blokinzameling evolueert voortdurend gebaseerd op terugkoppelen van de AEM gemeenschap. Als u denkt dat er een blok is dat in de blokinzameling zou moeten worden omvat, gelieve met uw AEM contact te spreken. Tot de huidige kandidaten voor inschrijving in de blokcollectie behoren:

  • Constante banner

Als u directe behoefte aan een blok hebt dat nog geen deel van de inzameling uitmaakt, is het vrij gemakkelijk om AEM projecten op GitHub te vinden die voorbeeldimplementaties voor alle bovengenoemde kandidaten hebben.

Blokpartij

Met Block Party willen we onze gepassioneerde ontwikkelaarsgemeenschap een plek geven om te laten zien wat ze op AEM sites hebben gebouwd. Het staat anderen ook toe om het wiel te vermijden opnieuw uit te vinden en deze blokken/codefragmenten/integraties te hergebruiken die door de gemeenschap worden gebouwd en de code zonodig aan te passen om hun eigen projecten te passen.

Opmerking: hoewel we onze AEM ontwikkelaarscommunity liefhebben en ondersteunen, is Adobe niet verantwoordelijk voor het onderhouden of bijwerken van de code die wordt weergegeven in Block Party. Gebruik de code naar eigen inzicht.

Als u een AEM ontwikkelaar bent en uw coole blok/codefragment of integratie wilt verzenden, voert u uw verzending in dit formulier gebruiken.

Codefragment
hannessolo

Voorvertoning

<small>Script om modules aan uw franklin pagina toe te voegen. Hierbij wordt het nieuwe (standaard)dialoogelement gebruikt.

U kunt het hier in actie zien:

Koppeling

</small>

Codefragment
msagolj

Video automatisch afspelen

<small>Als u video's automatisch wilt afspelen in verschillende browsers, moet u een set kenmerken instellen. Het is belangrijk om videoTag.muted = waar precies deze manier te plaatsen anders zal het niet in chroom spelen. Eg. setAttribute('muted', true) werkt niet.</small>

Sidekick-insteekmodule
dylandepas

Sidekick Library

Voorvertoning

<small>De bibliotheek van de Sidekick is een uitbreiding voor de AEM Sidekick die ontwikkelaars toelaat om UI-gedreven hulpmiddelen voor inhoudsauteurs tot stand te brengen. Het omvat een ingebouwde blokinsteekmodule die een lijst van alle blokken aan auteurs op een intuïtieve manier kan tonen, die de behoefte aan auteurs om elke variatie van een blok te herinneren of te zoeken verwijdert. Ontwikkelaars kunnen ook hun eigen insteekmodules voor de sidekick-bibliotheek schrijven.</small>

Codefragment
davidnuescheler

CSP op basis van metatag / JSON

<small>Deze benadering plaatst op een manier CSP die slechts over de draad eens wordt vervoerd en dan op de cliënt in het voorgeheugen ondergebracht. Hiermee kunt u het CSP beheren in een eenvoudig te lezen JSON-bestand</small>

Gereedschappen maken
sachioroos

SASS + AEM

<small>SASS compileert voor uw CSS terwijl zich plaatselijk ontwikkelend in AEM</small>

Codefragment
Buuhuu

fetch

<small>De functie JavaScript ophalen is een kleine omslag rond de functie JavaScript waarmee u de AEM Content API kunt gebruiken wanneer u een composable toepassing maakt. Zo kunt u eenvoudig inhoud ophalen van een AEM Index, luie paginering toepassen, koppelingen naar pagina's volgen en zelfs metagegevens van pagina's ophalen. Met de fakkel krijgt u het gemak om een toepassing zonder kop te maken zonder de prestatiebagage van SDK's zonder kop en zonder de complexiteit van API's zonder kop.</small>

Codefragment
schimmelaar

Dynamisch geladen sjablonen

<small>Laad CSS en JS specifiek voor een malplaatje, dat voor malplaatjespecifieke het stileren en auto-blokkeren toestaat, zonder die code in globale manuscripten/stijlen te mengen.

Opmerking: omdat de sjabloon js wordt geladen voordat blokken worden geladen, maar nadat secties/blokken zijn gedecoreerd, moet automatisch blokkeren worden uitgevoerd met dat in gedachten (dat wil zeggen, bouwt en decoreert uw blokken en voegt deze toe aan een sectie, maar laadt ze niet).</small>

Codefragment
fkakatie

Afbeeldingen met koppelingen

Voorvertoning

<small>Dit fragment voegt hyperlinks toe aan afbeeldingen. Raadpleeg het gekoppelde codefragment als u dit wilt gebruiken. En tijdens het ontwerpen in Wod/GDoc, specificeer de verbinding URL onmiddellijk na het beeld.</small>

Blok
jalagari

Formulierblok

Voorvertoning

<small>Formulierblok met verschillende mogelijkheden

  • Google Recaptcha-integratie

  • Bijlageondersteuning in Forms.

  • Nabewerking

    • E-mailmelding
    • Gegevens synchroniseren naar Marketo of Salesforce.</small>

Blok
niekraïners

Tabs

Voorvertoning

<small>Tabs blokkeren op basis van secties die automatisch worden geblokkeerd in scripts.js Ondersteunt 'geneste' blokken in het tabblok en sectiemetagegevens zoals stijlen.

Tabbloklogica die gedeeltelijk door css wordt beheerd</small>

Blok
dave-fink

Afbeelding vergelijken

Voorvertoning

<small>Dit is een eenvoudig inhoudsblok waarmee u twee afbeeldingen kunt vergelijken met een schuifregelaar om de linker- of rechterafbeelding weer te geven of te verbergen.</small>

Blok
schimmelaar

Broodkruimel

<small>Hiermee maakt u een broodkruimelnav op basis van paginatitels van bovenliggende pagina's</small>

Codefragment
andreituicu

DOM Helpers (React JSX-like)

Voorvertoning

<small>Dom Helpers geïnspireerd door React JSX om de AEM JS code beknopter te maken, gemakkelijker te schrijven, te begrijpen en te herzien. DOM als syntaxisstructuur om de resulterende HTML gemakkelijk te visualiseren wanneer het bekijken van de code gebruikend 100% vanilla JS zonder vereiste compilatie of externe gebiedsdelen. Minimale overhead (enkele ifs- en functieaanroepen) zodat u 100 LHS kunt behouden en de valkuilen van het gebruik van tekenreekssjablonen voor DOM-manipulatie kunt voorkomen. Kan zowel worden gebruikt voor het weergeven van dynamische gegevens van bladen als voor gegevens die afkomstig zijn van tekstdocumenten.</small>

Sidekick-insteekmodule
herzog31

Blok- en sectieplanning

Voorvertoning

<small>Met deze code kunt u blokken of secties plannen. U voegt eenvoudig een datum of datumbereik als rij toe aan de tabel met metagegevens voor blokken of secties en uw inhoud wordt alleen weergegeven na de datum of binnen het bereik.

Dit wordt geleverd met een extensie voor Sidekicks, waarmee u eerdere of toekomstige inhoud kunt voorvertonen.

Niet geschikt voor vertrouwelijke gegevens, aangezien de geplande inhoud nog steeds in het DOM staat.</small>

Overige
bosschaert

docxtools: werken met meerdere .docx-bestanden van de opdrachtregel linux-stijl

<small>Met dit opdrachtregelprogramma kunt u taken uitvoeren in een mappenstructuur van .docx-bestanden, net als met de linux 'grep' of 'sed'-opdrachten. Momenteel ondersteund zijn: * cat - output 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 within the word.docx files Note: the tool is written in Rust and the releases provided platform-specific executables. Als je een ander platform nodig hebt, pingel dan David B of draag een PR bij.</small>

Overige
synox

RSS Feed Generator Github Workflow

Voorvertoning

<small>Deze workflow van Github werkt de RSS feed-XML bij telkens wanneer een nieuwe pagina wordt gepubliceerd. Workflow:

Koppeling

Scripts:

Koppeling

</small>

Codefragment
ramboz

Pictogramsprite maken

Voorvertoning

<small>Een mechanisme om SVG-pictogrammen direct in het document in te line zetten, zodat de pictogrammen rechtstreeks vanuit het CSS kunnen worden opgemaakt (grootte, kleur, enz.)</small>

Overige
vtsaplin

AEM expressies

Voorvertoning

<small>Met AEM expressies kunnen gebruikers AEM documenten transformeren in sjablonen door eenvoudige expressies met parameters toe te voegen. Deze expressies worden vervolgens HTML-elementen die dynamisch opgehaalde inhoud weergeven. Het is ook mogelijk om expressies als decoratoren te gebruiken om de inhoud rond de invoegpositie op te maken en te vergroten. Hierdoor worden expressies omgezet in herbruikbare fragmenten die binnen blokken op hoofdniveau AEM kunnen worden geplaatst.</small>

Codefragment
sdmcraft

Externe afbeeldingen

Voorvertoning

<small>Dit codefragment demonstreert een mechanisme voor het gebruik van afbeeldingen op een AEM AEM webpagina die worden opgehaald van een extern systeem (buiten AEM AEM)</small>

Overige
synox

Koppelingen in alle .docx-bestanden vervangen met Excel-werkblad

<small>Verouderde koppelingen in Word-documenten recursief vervangen door nieuwe koppelingen op basis van een Excel-werkblad door de toewijzing, meestal de redirects.xlsx.</small>

Overige
sdmcraft

Het visuele vergelijkingsgereedschap voor webpagina's

Voorvertoning

<small>Dit is een visueel vergelijkingsprogramma voor het vergelijken van webpagina's. Als u werkt aan opmaakwijzigingen voor een site, willen we de impact van die wijziging op de hele site beoordelen. Dit handmatig doen voor alle pagina's is een vervelend proces. Met dit instrument wordt deze taak grotendeels geautomatiseerd. Zodra de vertakkingsverwijzing en de lijst van URLs aan het voor visueel het testen worden verstrekt, gaat het door alle URLs op de "hoofd"en "test"takken en laadt hen in een Op playwright gebaseerde hoofdloze browser, neemt screenshots en registreert de verschillen. Het hulpmiddel informeert de gebruiker over de verschillen en verstrekt plaats van de schermafbeeldingen waar de verschillen kunnen worden herzien.</small>

Overige
amol-anand

Log Viewer

Voorvertoning

<small>Eenvoudige manier om logboeken voor uw AEM Edge Delivery-project te bekijken</small>

Sidekick-insteekmodule
usman-khalid

Toegankelijkheidsmodus

Voorvertoning

<small>Met deze insteekmodule wordt een knop toegevoegd in het hulpgedeelte om de modus Toegankelijkheid in te schakelen op een bepaalde Franklin-pagina. Hiermee wordt de pagina vanuit het perspectief van de inhoud gecontroleerd en worden gegevens gerapporteerd over bijvoorbeeld ontbrekende alt-tekst in afbeeldingen, de leesbaarheid en andere toegankelijkheidspunten.

Het is ook mogelijk om aangepaste controles te maken, die bijvoorbeeld kunnen worden gebruikt om het juiste blokgebruik te bevorderen en om aan stijlrichtlijnen te voldoen. In het verslag wordt een voorbeeld gegeven van een dergelijk geval, waarin te veel gevallen van een blok op een pagina worden gecontroleerd en gerapporteerd.

Deze kan door auteurs van inhoud worden gebruikt om de pagina weer te geven en om eventuele inhoud of toegankelijkheidsgerelateerde problemen als een preflight-controle te behandelen voordat deze worden gepubliceerd.</small>

Sidekick-insteekmodule
schimmelaar

Referentiecontrole

<small>Hiermee zoekt u de referenties die door een pagina worden gebruikt (formulieren, fragmenten, koppelingen, enz.) en geeft auteurs met één muisklik toegang om ze te bekijken en bewerken. Kan ook controleren op binnenkomende referenties.</small>

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