Een blok met opties ontwikkelen
Deze zelfstudie bouwt verder op de zelfstudie Edge Delivery Services en Universal Editor en begeleidt u bij het toevoegen van blokopties aan een blok. Door blokopties te definiëren, kunt u de weergave en functionaliteit van een blok aanpassen, zodat verschillende variaties kunnen worden aangepast aan de verschillende behoeften aan inhoud. Hierdoor is het ontwerpsysteem van uw site flexibeler en gebruiksvriendelijker.
In dit leerprogramma, zult u blokopties aan het blok van het Teaser toevoegen, toestaand auteurs om tussen twee vertoningsopties te kiezen: Gebrek en zij aan zij. De Standaard optie toont het beeld hierboven en achter de tekst, terwijl de zij aan zij optie de beeld en de tekst zij aan zij toont.
Vaak voorkomende gevallen
De gemeenschappelijke gebruiksgevallen voor het gebruiken van Opties van het Blok in Edge Delivery Services en Universele ontwikkeling van de Redacteur omvatten, maar zijn niet beperkt tot:
- variaties van de Lay-out: gemakkelijk schakelaar tussen lay-outs. Bijvoorbeeld horizontaal versus verticaal of raster versus lijst.
- het stileren variaties: gemakkelijk schakelaar tussen thema's, of visuele behandelingen. Bijvoorbeeld, licht versus donkere wijze, of grote versus kleine teksten.
- de vertoningscontrole van de inhoudsvertoning: knevel zicht van elementen of schakelaar tussen inhoudsstijlen (compact tegenover gedetailleerd).
Deze opties bieden flexibiliteit en efficiëntie bij het bouwen van dynamische en aanpasbare blokken.
Dit leerprogramma toont het gebruiksgeval van lay-outvariaties aan, waar het blok van het Taser in twee verschillende lay-outs kan worden getoond: Gebrek en zij aan zij.
Blokmodel
Als u blokopties wilt toevoegen aan het blok Taser, opent u het JSON-fragment bij /block/teaser/_teaser.json en voegt u een nieuw veld toe aan de modeldefinitie. In dit veld wordt de eigenschap name ingesteld op classes . Dit is een beveiligd veld dat door AEM wordt gebruikt om blokopties op te slaan. Deze worden op de Edge Delivery Services HTML van het blok toegepast.
Veldconfiguraties
In de onderstaande tabbladen ziet u verschillende manieren om blokopties in het blokmodel te configureren, waaronder enkele selectie met één CSS-klasse, één selectie met meerdere CSS-klassen en meerdere selecties met meerdere CSS-klassen. Dit leerprogramma voert de eenvoudigere benaderinguit die in wordt gebruikt uitgezocht met enige CSS klasse.
In deze zelfstudie wordt getoond hoe u een invoertype select (vervolgkeuzelijst) kunt gebruiken om auteurs één blokoptie te laten kiezen. Deze wordt vervolgens toegepast als één corresponderende CSS-klasse.
Blokmodel
De Standaard optie wordt vertegenwoordigd door een leeg koord (""), terwijl zij aan zij optie gebruikt "side-by-side". De naam van de optie en waarde moet niet het zelfde zijn, maar de waarde bepaalt de CSS klasse(n) die op HTML van het blok worden toegepast. Bijvoorbeeld, kon de zij aan zij waarde van de optie layout-10 in plaats van side-by-side zijn. Het is echter het beste om semantisch betekenisvolle namen te gebruiken voor CSS-klassen, zodat de optiewaarden duidelijk en consistent zijn.
/blocks/teaser/_teaser.json
...
"fields": [
{
"component": "select",
"name": "classes",
"value": "",
"label": "Teaser options",
"valueType": "string",
"options": [
{
"name": "Default",
"value": ""
},
{
"name": "Side-by-side",
"value": "side-by-side"
}
]
}
]
...
HTML blokkeren
Wanneer de auteur een optie selecteert, wordt de bijbehorende waarde als CSS-klasse toegevoegd aan de HTML van het blok:
-
Als Gebrek wordt geselecteerd:
<div class="block teaser"> <!-- Block content here --> </div> -
Als zij aan zij wordt geselecteerd:
<div class="block teaser side-by-side"> <!-- Block content here --> </div>
Op deze manier kunnen verschillende stijlen en voorwaardelijke JavaScript worden toegepast, afhankelijk van de gekozen opening.
deze benadering wordt niet gebruikt in dit leerprogramma maar illustreert een alternatieve methode en geavanceerde blokopties.
Met het invoertype select kunnen auteurs één blokoptie kiezen, die optioneel aan meerdere CSS-klassen kan worden toegewezen. Hiervoor geeft u de CSS-klassen op als door spaties gescheiden waarden.
Blokmodel
Bijvoorbeeld, kan de zij aan zij optie variaties steunen waar het beeld op de linkerzijde (side-by-side left) of het recht (side-by-side right) verschijnt.
/blocks/teaser/_teaser.json
...
"fields": [
{
"component": "select",
"name": "classes",
"value": "",
"label": "Teaser options",
"valueType": "string",
"options": [
{
"name": "Default",
"value": ""
},
{
"name": "Side-by-side with Image on left",
"value": "side-by-side left"
},
{
"name": "Side-by-side with Image on right",
"value": "side-by-side right"
}
]
}
]
...
HTML blokkeren
Wanneer de auteur een optie selecteert, wordt de corresponderende waarde toegepast als een set CSS-klassen met spaties in de HTML van het blok:
-
Als Gebrek wordt geselecteerd:
<div class="block teaser"> <!-- Block content here --> </div> -
Als zij aan zij met Beeld op linkerzijde wordt geselecteerd:
<div class="block teaser side-by-side left"> <!-- Block content here --> </div> -
Als zij aan zij met Beeld op recht wordt geselecteerd:
<div class="block teaser side-by-side right"> <!-- Block content here --> </div>
Hierdoor kunnen verschillende stijlen en voorwaardelijke JavaScript worden toegepast, afhankelijk van de gekozen optie.
deze benadering wordt niet gebruikt in dit leerprogramma maar illustreert een alternatieve methode en geavanceerde blokopties.
Met het invoertype van "component": "multiselect" kan de auteur meerdere opties tegelijk selecteren. Dit maakt complexe permutaties van de weergave van het blok mogelijk door meerdere ontwerpkeuzes te combineren.
Blokmodel
Bijvoorbeeld, kan het zij aan zij, Beeld op linkerzijde, en Beeld op recht variaties steunen waar het beeld op de linkerzijde (side-by-side left) of op het recht (side-by-side right) wordt geplaatst.
/blocks/teaser/_teaser.json
...
"fields": [
{
"component": "multiselect",
"name": "classes",
"value": [],
"label": "Teaser options",
"valueType": "array",
"options": [
{
"name": "Side-by-side",
"value": "side-by-side"
},
{
"name": "Image on left",
"value": "left"
},
{
"name": "Image on right",
"value": "right"
}
]
}
]
...
HTML blokkeren
Wanneer de auteur meerdere opties selecteert, worden de bijbehorende waarden toegepast als CSS-klassen met spaties in de HTML van het blok:
-
Als zij aan zij en Beeld op linkerzijde worden geselecteerd:
<div class="block teaser side-by-side left"> <!-- Block content here --> </div> -
Als zij aan zij en Beeld op recht worden geselecteerd:
<div class="block teaser side-by-side right"> <!-- Block content here --> </div>
Multiselect biedt flexibiliteit, maar het zorgt voor complexiteit bij het beheren van ontwerppermutaties. Zonder beperkingen kunnen conflicterende selecties leiden tot verbroken of buitenmerkse ervaringen.
Bijvoorbeeld:
- Beeld op verlaten of Beeld op recht zonder te selecteren zij aan zij impliciet toepast hen op Gebrek, dat altijd het beeld als achtergrond plaatst, zodat linker en juiste groepering irrelevant zijn.
- Het selecteren van zowel Beeld op verlaten en Beeld op recht is tegenstrijdig.
- Het selecteren van zij aan zij zonder Beeld op verlaten of Beeld op recht kan als dubbelzinnig worden beschouwd, aangezien de positie van het beeld niet gespecificeerd is.
Om problemen te voorkomen en verwarring tussen auteurs te voorkomen bij het gebruik van multi-select, zorgt u ervoor dat de opties goed zijn gepland en dat alle permutaties zijn getest. Multi-select werkt het beste voor eenvoudige, niet-conflicterende verbeteringen, zoals 'groot' of 'hooglicht', in plaats van lay-outveranderende keuzes.
deze benadering wordt niet gebruikt in dit leerprogramma maar illustreert een alternatieve methode en geavanceerde blokopties.
Blokopties kunnen als standaardopties worden ingesteld wanneer u een nieuwe blokinstantie aan een pagina in de Universal Editor toevoegt. Dit wordt gedaan door de standaardwaarde van het classes bezit in de definitie van het blokte plaatsen.
Blokdefinitie
In het voorbeeld hieronder, wordt de standaardoptie geplaatst aan zij aan zij door het value bezit van het classes gebied aan side-by-side toe te wijzen. De invoer van de bijbehorende blokoptie in het blokmodel is optioneel.
U kunt ook meerdere items voor hetzelfde blok definiëren, elk met een andere naam en klasse. Dit staat Universele Redacteur toe om verschillende blokingangen te tonen, elk pre-gevormd met een specifieke blokoptie. Terwijl deze als afzonderlijke blokken in de redacteur verschijnen, bevat codebase één enkel blok dat dynamisch teruggeeft gebaseerd op de geselecteerde optie.
/blocks/teaser/_teaser.json
{
"definitions": [{
"title": "Teaser",
"id": "teaser",
"plugins": {
"xwalk": {
"page": {
"resourceType": "core/franklin/components/block/v1/block",
"template": {
"name": "Teaser",
"model": "teaser",
"classes": "side-by-side",
"textContent_text": "<h2>Enter a title</h2><p>...and body text here!</p>",
"textContent_cta": "/",
"textContent_ctaText": "Click me!"
}
}
}
}
}],
"models": [... from previous section ...],
"filters": []
}
Veldconfiguratie voor deze zelfstudie
In dit leerprogramma, zullen wij selecteren met één enkele hierboven beschreven CSS klassenbenadering in het eerste lusje gebruiken, dat voor twee discrete blokopties toestaat: Gebrek en zij aan zij.
Voeg in de modeldefinitie in het JSON-fragment van het blok één selectieveld voor blokopties toe. In dit veld kunnen auteurs kiezen tussen de standaardlay-out en een lay-out Naast elkaar.
/blocks/teaser/_teaser.json
{
"definitions": [...],
"models": [
{
"id": "teaser",
"fields": [
{
"component": "select",
"name": "classes",
"value": "",
"label": "Teaser options",
"description": "",
"valueType": "string",
"options": [
{
"name": "Default",
"value": ""
},
{
"name": "Side-by-side",
"value": "side-by-side"
}
]
},
{
"component": "reference",
"valueType": "string",
"name": "image",
"label": "Image",
"multi": false
},
{
"component": "text",
"valueType": "string",
"name": "imageAlt",
"label": "Image alt text",
"required": true
},
{
"component": "richtext",
"name": "textContent_text",
"label": "Text",
"valueType": "string",
"required": true
},
{
"component": "aem-content",
"name": "textContent_cta",
"label": "CTA",
"valueType": "string"
},
{
"component": "text",
"name": "textContent_ctaText",
"label": "CTA label",
"valueType": "string"
}
]
}
],
"filters": []
}
Blok bijwerken in universele editor
Om de bijgewerkte blokopties te maken beschikbaar in Universele Redacteur, stel de JSON codeveranderingen in GitHub op, creeer een nieuwe pagina, voeg en auteur het blok van het Taser met de zij aan zij optie toe, dan publiceer de pagina aan voorproef. Laad na publicatie de pagina voor codering in de lokale ontwikkelomgeving.
Push-wijzigingen in GitHub
Om de bijgewerkte blokopties beschikbaar te maken input in Universele Redacteur voor het plaatsen van blokopties en het ontwikkelen tegen de resulterende HTML, moet het project worden gelinkt, en de veranderingen die aan een tak GitHub worden geduwd— in dit geval, de block-options tak.
# ~/Code/aem-wknd-eds-ue
# Lint the changes to catch any syntax errors
$ npm run lint
$ git add .
$ git commit -m "Add Teaser block option to JSON file so it is available in Universal Editor"
$ git push origin teaser
Een testpagina maken
Maak in de AEM Author-service een nieuwe pagina waaraan het Teaser-blok voor ontwikkeling moet worden toegevoegd. Na de overeenkomst in de Auteur a het hoofdstuk van het Blokvan het Edge Delivery Services en Universele leerprogramma van de Ontwikkelaar van de Redacteur, creeer een testpagina onder a branches pagina, noemend het na de tak van het Git u aan werkt - in dit geval, block-options.
Auteur van het blok
Bewerk de nieuwe pagina van de Opties van het Blok in Universele Redacteur en voeg het Taser blok toe. Voeg de queryparameter ?ref=block-options toe aan de URL om de pagina te laden met code uit de block-options GitHub-vertakking.
Het blokdialoog omvat nu a Opties van het Teken dropdown met Gebrek en zij aan zij selecties. Kies zij aan zij en voltooi de resterende inhoud creatie.
Naar keuze, voeg twee Taser blokken-één reeks aan Gebrek en andere aan zij aan zij toe. Dit staat u toe om beide opties naast elkaar tijdens ontwikkeling voor te vertonen en ervoor te zorgen dat het uitvoeren van zij aan zij niet de Standaard optie beïnvloedt.
