Inhoud modelleren voor WYSIWYG Authoring met Edge Delivery Services Projecten content-modeling

Leer hoe het modelleren van inhoud voor WYSIWYG Authoring met Edge Delivery Services projecten en hoe te om uw eigen inhoud te modelleren.

Vereisten prerequisites

De projecten die WYSIWYG Authoring met Edge Delivery Services gebruiken erven de meerderheid van de mechanica van een ander Edge Delivery Services project, onafhankelijk van de inhoudsbron of auteursmethode.

Voordat u begint met het modelleren van inhoud voor uw project, moet u eerst de volgende documentatie lezen.

Het is van essentieel belang dat u deze concepten begrijpt om te komen tot een aansprekend inhoudsmodel dat op een bronagnostische manier werkt. Dit document bevat details over de mechanismen die specifiek zijn geïmplementeerd voor WYSIWYG-authoring.

Standaardinhoud default-content

Standaard inhoud is inhoud een auteur intuïtief op een pagina zou zetten zonder extra semantiek toe te voegen. Dit omvat tekst, koppen, koppelingen en afbeeldingen. Deze inhoud spreekt voor zich in zijn functie en doel.

In AEM, wordt deze inhoud uitgevoerd als componenten met zeer eenvoudige, vooraf bepaalde modellen, die alles omvatten die in Prijsvermindering en HTML kan in series worden vervaardigd.

Het model van deze componenten maakt deel uit van Boilerplate voor het schrijven WYSIWYG met Edge Delivery Services.

Blokken blocks

Blokken worden gebruikt om rijkere inhoud met specifieke stijlen en functionaliteit te maken. In tegenstelling tot de standaardinhoud, vereisen de blokken extra semantiek. De blokken kunnen met componenten in de AEM paginaredacteur worden vergeleken.

Blokken zijn in wezen stukken inhoud die door JavaScript zijn versierd en met een stijlblad zijn opgemaakt.

Blokmodeldefinitie model-definition

Wanneer het gebruiken van WYSIWYG creatie met Edge Delivery Services, moet de inhoud van blokken uitdrukkelijk worden gemodelleerd om de auteur de interface te verstrekken om inhoud tot stand te brengen. In principe moet u een model maken, zodat de ontwerpgebruikersinterface weet welke opties op basis van het blok aan de auteur moeten worden voorgesteld.

Het component-models.jsondossier bepaalt het model van blokken. De velden die in het componentmodel worden gedefinieerd, blijven behouden als eigenschappen in AEM en worden weergegeven als cellen in de tabel waaruit een blok bestaat.

{
  "id": "hero",
  "fields": [
    {
      "component": "reference",
      "valueType": "string",
      "name": "image",
      "label": "Image",
      "multi": false
    },
    {
      "component": "text-input",
      "valueType": "string",
      "name": "imageAlt",
      "label": "Alt",
      "value": ""
    },
    {
      "component": "text-area",
      "name": "text",
      "value": "",
      "label": "Text",
      "valueType": "string"
    }
  ]
}

Merk op dat niet elk blok een model moet hebben. Sommige blokken zijn eenvoudig containersvoor een lijst van kinderen, waar elk kind zijn eigen model heeft.

Het is ook nodig om te bepalen welke blokken bestaan en aan een pagina kunnen worden toegevoegd gebruikend de Universele Redacteur. Het component-definitions.jsondossier maakt een lijst van de componenten aangezien zij door de Universele Redacteur ter beschikking worden gesteld.

{
  "title": "Hero",
  "id": "hero",
  "plugins": {
    "xwalk": {
      "page": {
        "resourceType": "core/franklin/components/block/v1/block",
        "template": {
          "name": "Hero",
          "model": "hero"
        }
      }
    }
  }
}

Het is mogelijk om één model voor vele blokken te gebruiken. Sommige blokken kunnen bijvoorbeeld een model delen dat een tekst en afbeelding definieert.

Voor elk blok:

Al deze informatie wordt opgeslagen in AEM wanneer een blok aan een pagina wordt toegevoegd. Als het middeltype of de bloknaam ontbreken, zal het blok niet op de pagina teruggeven.

Blokstructuur block-structure

De eigenschappen van blokken worden bepaald in de componentenmodellenen als dusdanig voortgeduurd in AEM. Eigenschappen worden als cellen gerenderd in de tabelachtige structuur van het blok.

Eenvoudige blokken simple

In de eenvoudigste vorm geeft een blok elke eigenschap weer in één rij/kolom in de volgorde waarin de eigenschappen in het model zijn gedefinieerd.

In het volgende voorbeeld wordt de afbeelding eerst in het model gedefinieerd en vervolgens de tekst. Ze worden dus eerst met de afbeelding en vervolgens met de tekst gerenderd.

{
  "name": "Hero",
  "model": "hero",
  "image": "/content/dam/image.png",
  "imageAlt": "Helix - a shape like a corkscrew",
  "text": "<h1>Welcome to AEM</h1>"
}

<div class="hero">
  <div>
    <div>
      <picture>
        <img src="/content/dam/image.png" alt="Helix - a shape like a corkscrew">
      </picture>
    </div>
  </div>
  <div>
    <div>
      <h1>Welcome to AEM</h1>
    </div>
  </div>
</div>

+---------------------------------------------+
| Hero                                        |
+=============================================+
| ![Helix - a shape like a corkscrew][image0] |
+---------------------------------------------+
| # Welcome to AEM                            |
+---------------------------------------------+

Het kan opvallen dat bepaalde typen waarden het afleiden van semantiek in de opmaak toestaan en dat eigenschappen in één cel worden gecombineerd. Dit gedrag wordt beschreven in de sectie Inferentie van het Type.

Key-Value-blok key-value

In veel gevallen is het raadzaam de gerenderde semantische opmaakcode te decoreren, CSS-klassennamen toe te voegen, nieuwe knooppunten toe te voegen of deze in de DOM te verplaatsen en stijlen toe te passen.

In andere gevallen echter, wordt het blok gelezen als sleutel-waarde paar-als configuratie.

Een voorbeeld van dit is de sectiemetagegevens. In dit gebruiksgeval, kan het blok worden gevormd om als sleutel-waarde paarlijst terug te geven. Gelieve te zien de sectie Secties en Metagegevens van de Sectievoor meer informatie.

{
  "name": "Featured Articles",
  "model": "spreadsheet-input",
  "key-value": true,
  "source": "/content/site/articles.json",
  "keywords": ['Developer','Courses'],
  "limit": 4
}

<div class="featured-articles">
  <div>
    <div>source</div>
    <div><a href="/content/site/articles.json">/content/site/articles.json</a></div>
  </div>
  <div>
    <div>keywords</div>
    <div>Developer,Courses</div>
  <div>
  <div>
    <div>limit</div>
    <div>4</div>
  </div>
</div>

+-----------------------------------------------------------------------+
| Featured Articles                                                     |
+=======================================================================+
| source   | [/content/site/articles.json](/content/site/articles.json) |
+-----------------------------------------------------------------------+
| keywords | Developer,Courses                                          |
+-----------------------------------------------------------------------+
| limit    | 4                                                          |
+-----------------------------------------------------------------------+

Containerblokken container

Beide structuren hebben één dimensie: de lijst met eigenschappen. Met behulp van containerblokken kunnen onderliggende elementen worden toegevoegd (meestal van hetzelfde type of model) en zijn deze dus tweedimensionaal. Deze blokken ondersteunen nog steeds hun eigen eigenschappen die worden gerenderd als rijen met eerst één kolom. Maar zij staan ook toe toevoegend kinderen, waarvoor elk punt als rij en elk bezit als kolom binnen die rij wordt teruggegeven.

In het volgende voorbeeld accepteert een blok een lijst met gekoppelde pictogrammen als onderliggende pictogrammen, waarbij elk gekoppeld pictogram een afbeelding en een koppeling heeft. Merk filteridentiteitskaartop die in de gegevens van het blok wordt geplaatst om de filterconfiguratie van verwijzingen te voorzien.

{
  "name": "Our Partners",
  "model": "text-only",
  "filter": "our-partners",
  "text": "<p>Our community of partners is ...</p>",
  "item_0": {
    "model": "linked-icon",
    "image": "/content/dam/partners/foo.png",
    "imageAlt": "Icon of Foo",
    "link": "https://foo.com/"
  },
  "item_1": {
    "model": "linked-icon"
    "image": "/content/dam/partners/bar.png",
    "imageAlt": "Icon of Bar",
    "link": "https://bar.com"
  }
}

<div class="our-partners">
  <div>
    <div>
        Our community of partners is ...
    </div>
  </div>
  <div>
    <div>
      <picture>
         <img src="/content/dam/partners/foo.png" alt="Icon of Foo">
      </picture>
    </div>
    <div>
      <a href="https://foo.com">https://foo.com</a>
    </div>
  </div>
  <div>
    <div>
      <picture>
         <img src="/content/dam/partners/bar.png" alt="Icon of Bar">
      </picture>
    </div>
    <div>
      <a href="https://bar.com">https://bar.com</a>
    </div>
  </div>
</div>

+------------------------------------------------------------ +
| Our Partners                                                |
+=============================================================+
| Our community of partners is ...                            |
+-------------------------------------------------------------+
| ![Icon of Foo][image0] | [https://foo.com](https://foo.com) |
+-------------------------------------------------------------+
| ![Icon of Bar][image1] | [https://bar.com](https://bar.com) |
+-------------------------------------------------------------+

Semantische inhoudsmodellen maken voor blokken creating-content-models

Met de mechanica van verklaarde blokstructuur,is het mogelijk om een inhoudsmodel tot stand te brengen dat inhoud in AEM één-aan-één aan de leveringsrij voortzette in kaart brengt.

Vroeg in elk project, moet een inhoudsmodel zorgvuldig worden overwogen voor elk blok. De functie moet niet op de hoogte zijn van de inhoudsbron en de ervaring die u hebt opgedaan om auteurs de mogelijkheid te geven om te schakelen of te combineren terwijl ze blokimplementaties en -stijlen opnieuw gebruiken. Meer details en algemene begeleiding kunnen in het Model van David worden gevonden (neem 2). Specifieker, bevat de blokinzamelingeen uitgebreide reeks inhoudsmodellen voor specifieke gebruiksgevallen van gemeenschappelijke gebruikersinterfacepatronen.

Voor WYSIWYG creatie met Edge Delivery Services, roept dit de vraag op hoe te om een dwingende semantische inhoudsmodel te dienen wanneer de informatie met vormen wordt authored die uit veelvoudige gebieden in plaats van het uitgeven semantische prijsverhoging in-context zoals rijke teksten worden samengesteld.

U kunt dit probleem oplossen door drie methoden te gebruiken waarmee u een aansprekend inhoudsmodel kunt maken:

Type-gevolgtrekking type-inference

Voor sommige waarden kunnen we de semantische betekenis afleiden van de waarden zelf. Deze waarden zijn onder meer:

Alle andere elementen worden weergegeven als onbewerkte tekst.

Veld samenvouwen field-collapse

Veld samenvouwen is het mechanisme voor het combineren van meerdere veldwaarden in één semantisch element op basis van een naamgevingsconventie met de achtervoegsels Title, Type, MimeType, Alt en Text (allemaal hoofdlettergevoelig). Een eigenschap die eindigt met een van deze achtervoegsels wordt niet als een waarde beschouwd, maar als een kenmerk van een andere eigenschap.

Afbeeldingen image-collapse

{
  "image": "/content/dam/red-car.png",
  "imageAlt: "A red card on a road"
}

<picture>
  <img src="/content/dam/red-car.png" alt="A red car on a road">
</picture>

![A red car on a road][image0]

Koppelingen en knoppen links-buttons-collapse

{
  "link": "https://www.adobe.com",
  "linkTitle": "Navigate to adobe.com",
  "linkText": "adobe.com",
  "linkType": "primary"
}

<a href="https://www.adobe.com" title="Navigate to adobe.com">adobe.com</a>

<strong>
  <a href="https://www.adobe.com" title="Navigate to adobe.com">adobe.com</a>
</strong>

<em>
  <a href="https://www.adobe.com" title="Navigate to adobe.com">adobe.com</a>
</em>

[adobe.com](https://www.adobe.com "Navigate to adobe.com")
**[adobe.com](https://www.adobe.com "Navigate to adobe.com")**
_[adobe.com](https://www.adobe.com "Navigate to adobe.com")_

Koppen headings-collapse

{
  "heading": "Getting started",
  "headingType": "h2"
}

<h2>Getting started</h2>

## Getting started

Elementgroepering element-grouping

Terwijl het gebied samenvouwtover het combineren van veelvoudige eigenschappen in één enkel semantisch element is, element groepering over het aaneenschakelen van veelvoudige semantische elementen in één enkele cel. Dit is met name handig in gevallen waarin de auteur moet worden beperkt in het type en het aantal elementen dat hij kan maken.

Met een teaser-component kan de auteur bijvoorbeeld alleen een ondertitel, titel en een enkele alinealijn maken, gecombineerd met maximaal twee actieknoppen. Als u deze elementen groepeert, levert dit een semantische opmaak op die zonder verdere actie kan worden opgemaakt.

Bij elementgroepering wordt een naamgevingsconventie gebruikt, waarbij de groepsnaam van elke eigenschap in de groep wordt gescheiden door een onderstrepingsteken. Veldsamenvouwen van de eigenschappen in een groep werkt zoals eerder beschreven.

{
  "name": "teaser",
  "model": "teaser",
  "image": "/content/dam/teaser-background.png",
  "imageAlt": "A group of people sitting on a stage",
  "teaserText_subtitle": "Adobe Experience Cloud"
  "teaserText_title": "Meet the Experts"
  "teaserText_titleType": "h2"
  "teaserText_description": "<p>Join us in this ask me everything session...</p>"
  "teaserText_cta1": "https://link.to/more-details",
  "teaserText_cta1Text": "More Details"
  "teaserText_cta2": "https://link.to/sign-up",
  "teaserText_cta2Text": "RSVP",
  "teaserText_cta2Type": "primary"
}

<div class="teaser">
  <div>
    <div>
      <picture>
        <img src="/content/dam/teaser-background.png" alt="A group of people sitting on a stage">
      </picture>
    </div>
  </div>
  <div>
    <div>
      <p>Adobe Experience Cloud</p>
      <h2>Meet the Experts</h2>
      <p>Join us in this ask me everything session ...</p>
      <p><a href="https://link.to/more-details">More Details</a></p>
      <p><strong><a href="https://link.to/sign-up">RSVP</a></strong></p>
    </div>
  </div>
</div>

+-------------------------------------------------+
| Teaser                                          |
+=================================================+
| ![A group of people sitting on a stage][image0] |
+-------------------------------------------------+
| Adobe Experience Cloud                          |
| ## Welcome to AEM                               |
| Join us in this ask me everything session ...   |
| [More Details](https://link.to/more-details)    |
| [RSVP](https://link.to/sign-up)                 |
+-------------------------------------------------+

Secties en sectiemetagegevens sections-metadata

De zelfde manier een ontwikkelaar kan veelvoudige blokken bepalen en modelleren,zij kunnen verschillende secties bepalen.

Het inhoudsmodel van Edge Delivery Services staat opzettelijk slechts één enkel niveau van het nesten toe, dat om het even welke standaardinhoud of een blok bevat door een sectie is. Dit betekent dat, om complexere visuele componenten te hebben die andere componenten kunnen bevatten, zij als secties moeten worden gemodelleerd en samen moeten worden gecombineerd gebruikend auto-blokkerende cliëntkant. Typische voorbeelden hiervan zijn tabbladen en inklapbare secties zoals accordeons.

Een sectie kan op dezelfde manier als een blok worden gedefinieerd, maar met het middeltype van core/franklin/components/section/v1/section. De secties kunnen een naam en a filteridentiteitskaart hebben,die door de Universele Redacteurslechts wordt gebruikt, evenals a modelidentiteitskaart,die wordt gebruikt om de sectiemetagegevens terug te geven. Het model is op deze manier het model van het blok met sectiemetagegevens, dat automatisch aan een sectie als sleutel-waardeblok zal worden toegevoegd als het niet leeg is.

modelidentiteitskaarten filteridentiteitskaartvan de standaardsectie is section. Deze kan worden gebruikt om het gedrag van de standaardsectie te wijzigen. In het volgende voorbeeld worden enkele stijlen en een achtergrondafbeelding toegevoegd aan het metagegevensmodel van de sectie.

{
  "id": "section",
  "fields": [
    {
      "component": "multiselect",
      "name": "style",
      "value": "",
      "label": "Style",
      "valueType": "string",
      "options": [
        {
          "name": "Fade in Background",
          "value": "fade-in"
        },
        {
          "name": "Highlight",
          "value": "highlight"
        }
      ]
    },
    {
      "component": "reference",
      "valueType": "string",
      "name": "background",
      "label": "Image",
      "multi": false
    }
  ]
}

In het volgende voorbeeld wordt een tabsectie gedefinieerd die kan worden gebruikt om een tabblok te maken door opeenvolgende secties te combineren met een kenmerk voor tabtitelgegevens in een tabblok tijdens automatische blokkering.

{
  "title": "Tab",
  "id": "tab",
  "plugins": {
    "xwalk": {
      "page": {
        "resourceType": "core/franklin/components/section/v1/section",
        "template": {
          "name": "Tab",
          "model": "tab",
          "filter": "section"
        }
      }
    }
  }
}

Metagegevens pagina page-metadata

Documenten kunnen een pagina meta-gegevensblok hebben,dat wordt gebruikt om te bepalen welke <meta> elementen in <head> van een pagina worden teruggegeven. De pagina-eigenschappen van pagina's in AEM as a Cloud Service worden toegewezen aan de pagina-eigenschappen die buiten het vak beschikbaar zijn voor Edge Delivery Services, zoals title , description , keywords , enz.

Lees eerst de volgende documenten voordat u gaat onderzoeken hoe u uw eigen metagegevens kunt definiëren. Op deze manier krijgt u meer inzicht in het begrip metagegevens van pagina's.

Het is ook mogelijk om aanvullende metagegevens voor pagina's op twee manieren te definiëren.

Metagegevensspreadsheets metadata-spreadsheets

Het is mogelijk metagegevens per pad of per padpatroonbasis op een tabelachtige manier te definiëren in AEM as a Cloud Service. Er is een ontwerpgebruikersinterface voor tabelachtige gegevens beschikbaar die vergelijkbaar is met Excel- of Google-bladen.

U maakt een dergelijke tabel door een pagina te maken en de sjabloon Metagegevens in de Sites-console te gebruiken.

Definieer in de pagina-eigenschappen van het werkblad de metagegevensvelden die u samen met de URL nodig hebt. Voeg vervolgens metagegevens toe per paginapad of paginapad.

Zorg ervoor dat het werkblad ook aan de padtoewijzing is toegevoegd voordat u het publiceert.

{
  "mappings": [
    "/content/site/:/",
    "/content/site/metadata:/metadata.json"
  ]
}

Pagina-eigenschappen page-properties

Veel van de standaardpagina-eigenschappen die beschikbaar zijn in AEM, worden toegewezen aan de desbetreffende pagina-metagegevens in een document. Dit geldt bijvoorbeeld voor title , description , robots , canonical url of keywords . Er zijn ook enkele AEM-specifieke eigenschappen beschikbaar:

Het is ook mogelijk om een componentenmodel voor meta-gegevens van de douanepagina te bepalen, die aan de auteur als lusje van het de paginaeigenschappen van AEM Sites beschikbaar zullen worden gemaakt.

Hiertoe maakt u een componentmodel met de id page-metadata .

{
  "id": "page-metadata",
  "fields": [
    {
      "component": "text",
      "name": "theme",
      "label": "Theme"
    }
  ]
}

Volgende stappen next-steps

Nu u weet hoe te om inhoud te modelleren, kunt u blokken voor uw eigen Edge Delivery Services met WYSIWYG auteursproject tot stand brengen.

Zie het document Creërend Blokken Instrumented voor gebruik met de Universele Redacteurom te leren hoe te tot blokken die voor gebruik met de Universele Redacteur in WYSIWYG authoring met de projecten van Edge Delivery Services tot stand brengen.

Als u reeds vertrouwd met het creëren van blokken bent, te zien gelieve de document Begonnen Gids van de Ontwikkelaar die voor het schrijven WYSIWYG met Edge Delivery Serviceswordt begonnen om u met een nieuwe plaats van Adobe Experience Manager gebruikend Edge Delivery Services en de Universele Redacteur voor inhoudsauthoring op te halen.