Componentdefinitie component-definition

Begrijp het JSON-contract tussen de componentdefinitie en de Universal Editor in detail.

Overzicht overview

In het bestand component-definition.json worden de componenten gedefinieerd die beschikbaar zijn voor de auteurs van de inhoud voor het project. In dit document wordt in detail uitgelegd wat het doel van dit bestand is en hoe de Universal Editor dit gebruikt om pagina-ontwerpcomponenten aan uw auteurs voor te stellen.

TIP
Voor een overzicht van de inhoud modellerend proces, te zien gelieve het document Modellering van de Inhoud voor de Authoring van WYSIWYG met de Projecten van Edge Delivery Services.
TIP
U hoeft geen geheel nieuw component-definition.json -bestand te maken. Het project boilerplate dat u aan laarzentrekker uw projectgebruikt bevat a volledig-functionerend component-definition.json dossierdat u aan uw behoeften kunt aanpassen.

Voorbeeldcomponentdefinitie example

Hieronder volgt een volledig, maar eenvoudig component-definition.json als voorbeeld.

{
  "groups":[
    {
      "title":"General Components",
      "id":"general",
      "components":[
        {
          "title":"Text",
          "id":"text",
          "model": "text",
          "filter": "texts",
          "plugins":{
            "aem":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            },
            "aem65":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            }
          }
        }
      ]
    }
  ]
}

groups groups

groups bepaalt de groepen componenten die de auteur in de Universele Redacteur ziet wanneer het klikken ​pictogram in het eigenschappenpaneel van de redacteur toevoegt een nieuwe component aan een pagina. Groepen helpen bij het ordenen van de componenten. De gemeenschappelijke groepen zouden Algemene Componenten en Geavanceerde Componenten kunnen zijn.

  • title definieert de tekstuele beschrijving van de groep die wordt weergegeven in de gebruikersinterface van de editor.
  • id geeft de groep op unieke wijze aan.

components components

components definieert welke componenten tot een groep behoren.

  • title definieert de tekstuele beschrijving van de component die in de UI wordt weergegeven.

  • id geeft de component op unieke wijze aan.

    • Het componentenmodelvan het zelfde id bepaalt de gebieden van de component.
    • Omdat het uniek is kan het, bijvoorbeeld, in a filterdefinitieworden gebruikt om te bepalen welke componenten aan een container kunnen worden toegevoegd.
  • model bepaalt welk modelmet de component wordt gebruikt.

  • filter bepaalt welke filtermet de component zou moeten worden gebruikt.

plugins plugins

plugins definieert welke plug-in verantwoordelijk is voor het voortduren van de component. Veelgebruikte plug-ins zijn:

  • aem voor AEM as a Cloud Service.
  • aem5 voor AEM 6.5.
  • xwalk voor AEM as a Cloud Service WYSIWYG authoring.

page of cf page-cf

Nadat plugin is gedefinieerd, moet u aangeven of het een pagina-gerelateerd of fragmentgerelateerd bestand is.

  • page geeft aan dat de component inhoud op de huidige pagina is.
  • cf wijst erop dat de component met inhoud binnen a het Fragment van de Inhoudverwant is.

page page

Als de component inhoud op de pagina is, kunt u de volgende informatie verstrekken.

  • resourceType bepaalt het VerschuivenresourceType wordt gebruikt voor het teruggeven van de component die.
  • template definieert optionele sleutel/waarden die automatisch naar de nieuwe component moeten worden geschreven en definieert welk filter en/of model op de component moet worden toegepast.
    • Nuttig voor verklarende, steekproef, of placeholder tekst.

template template

Door optionele sleutel/waardeparen op te geven, kan template deze automatisch naar de nieuwe component schrijven. Daarnaast kunnen ook de volgende optionele waarden worden opgegeven.

cf cf

Als de component verwant is aan inhoud binnen een inhoudsfragment, kunt u de volgende informatie verstrekken.

  • name definieert een optionele naam die is opgeslagen in de JCR voor de nieuwe component.
    • Alleen informatief en wordt gewoonlijk niet in de gebruikersinterface weergegeven als de title is.
  • cfModel bepaalt het 2} model van het Fragment van de Inhoud {voor de onlangs-gecreeerde component.
  • cfFolder definieert in welke map het inhoudsfragment moet worden gemaakt.
  • title definieert de titel van het nieuwe inhoudsfragment.
  • description definieert een beschrijving van het nieuwe inhoudsfragment.
  • template definieert optionele sleutel(waarden) die automatisch naar het nieuwe inhoudsfragment moeten worden geschreven.
    • Nuttig voor verklarende, steekproef, of placeholder tekst.

cf Kan worden geïmporteerd cf-implied

Als de pagina 🔗 van instrumenten wordt voorzien om aan een verwijzingsgebied te richten, zal cf worden verondersteld.

<div data-aue-resource="urn:aem:/content" data-aue-type="container" data-aue-prop="field"></div>

In een dergelijk geval wordt cf aangenomen, omdat data-aue-prop naar een verwijzingsveld verwijst. Zonder de instructie data-aue-prop gaat de Universal Editor ervan uit dat page wordt gebruikt, omdat de componenten in dat geval niet via een referentieveld zijn gekoppeld.

<div data-aue-resource="urn:aem:/content" data-aue-type="container"></div>

Componenten zijn eenvoudigweg subknooppunten onder de bron.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab