Aan de slag-handleiding voor ontwikkelaars voor WYSIWYG Authoring met Edge Delivery Services edge-dev-getting-started

Deze gids zal u aan de slag met een nieuwe plaats van Adobe Experience Manager gebruikend Edge Delivery Services en de Universele Redacteur voor de inhoud van WYSIWYG authoring krijgen.

Vereisten prerequisites

Voordat u met deze handleiding begint, dient u al op de hoogte te zijn van de basisbeginselen van en toegang te hebben tot Edge Delivery Services, zoals:

Basisconcepten bij het ontwikkelen voor Edge Delivery Services core-concepts

Edge Delivery Services zijn gebaseerd op het concept van blokken. AEM wordt geleverd met een uitgebreide bibliotheek met vooraf gedefinieerde blokken, die kan worden uitgebreid om aan uw projectbehoeften te voldoen. De code voor de projecten van Edge Delivery Services wordt beheerd in GitHub.

Blokken blocks

Blokken zijn het meest fundamentele onderdeel van een pagina die door Edge Delivery Services wordt geleverd. Een blok omvat het stileren en de code die een logische component van een inhoudspagina drijft.

AEM biedt standaardblokken als onderdeel van het product binnen het bouwsteenbouwproject. Tot deze blokken behoren kop, tekst, afbeeldingen, koppelingen, lijsten, enzovoort.

TIP
Gelieve te zien de sectie van de Bouwstijlvan de documentatie van Edge Delivery Services voor meer details op blokken en hoe te zich voor de diensten van Edge Delivery ontwikkelen.

Edge Delivery Services en GitHub github-edge

Edge Delivery hefboomwerkingen GitHub zodat kunt u code van uw bewaarplaats beheren en opstellen GitHub.

Uw auteurs kunnen inhoud maken met gebruik van op documenten gebaseerde ontwerpen of met gebruik van inhoud in AEM met de Universal Editor. Ontwikkelaars kunnen de functionaliteit van uw site aanpassen door CSS en JavaScript in GitHub te gebruiken, ongeacht hoe de auteurs hun inhoud maken.

Er worden automatisch websites gemaakt voor elk van uw vertakkingen, van de voorvertoning van de inhoud tot de productie. Elk middel dat u in uw bewaarplaats GitHub zet is beschikbaar op uw website zonder een bouwstijlproces.

TIP
Gelieve te zien de sectie van de Bouwstijlvan de documentatie van Edge Delivery Services voor meer details op blokken en hoe te zich voor de diensten van Edge Delivery ontwikkelen.

Aan de slag met WYSIWYG Authoring en Edge Delivery Services getting-started

Zodra u aan de eerste vereistenhebt voldaan en de keus gemaakt om de Universele Redacteur te gebruiken,u kunt op uw eigen project beginnen.

Uw GitHub-project maken create-github-project

Eerst zult u een nieuw project op GitHub moeten tot stand brengen, dat op het malplaatje van de Adobe wordt gebaseerd.

  1. Navigeer aan https://github.com/adobe-rnd/aem-boilerplate-xwalken klik op Gebruik dit malplaatje en selecteer creeer een nieuwe bewaarplaats.

    • U zult binnen aan GitHub moeten worden ondertekend om deze optie te zien.

    project van de bewaarplaats van het Exemplaar

  2. Standaard wordt de opslagplaats aan u toegewezen. Verander dit zonodig evenals verstrek een een bewaarplaatsnaam en een beschrijving en klik creeer bewaarplaats.

    Creërend de bewaarplaats

  3. In een nieuw lusje in zelfde browser, navigeer aan https://github.com/apps/aem-code-syncen klik vormen.

    de Synchronisatie van de Code

  4. Klik vormen voor org waar u uw nieuwe bewaarplaats in de vorige stap creeerde.

    het Kiezen van org voor codesynchronisatie

  5. Op de AEM pagina van GitHub van de Synchronisatie van de Code onder Toegang van de Bewaarplaats, selecteer slechts bewaarplaatsen, selecteer de bewaarplaats die u in de vorige stap creeerde, en klik dan sparen.

    verlenen AEM de toegang van de Synchronisatie van de Code

  6. Nadat AEM Codesynchronisatie is geïnstalleerd, ontvangt u een bevestigingsscherm. Ga terug naar het browsertabblad van de nieuwe opslagplaats.

    de installatiebevestiging van de Synchronisatie van de Code

  7. Klik het fstab.yaml dossier om het te openen en dan dit dossier pictogram uitgeven om het uit te geven.

    fstab.yaml

  8. Bewerk het fstab.yaml -bestand om het koppelingspunt van uw project bij te werken. Vervang standaardGoogle DOS URL met URL van uw het auteursrecht van AEM as a Cloud Service en klik dan veranderingen vastleggen….

    • https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
    • Als u het koppelingspunt wijzigt, weet u aan Edge Delivery Services waar ze de inhoud van de site moeten vinden.

    Bijwerkend fstab

  9. Voeg toe begaat bericht zoals gewenst en klik dan veranderingen begaan, die hen direct aan de main tak begaan.

    het Aanwijzen veranderingen

  10. Terugkeer naar de wortel van uw bewaarplaats en klik op paths.json en dan geef dit dossier pictogram uit.

    paths.json

  11. Voor de standaardtoewijzing wordt de naam van de gegevensopslagruimte gebruikt. Werk de standaardafbeelding zoals vereist voor uw project met /content/<site-name>/:/ bij en klik verbindt veranderingen….

    • Geef uw eigen <site-name> op. U hebt het in een latere stap nodig.
    • De toewijzingen vertellen Edge Delivery Services hoe ze de inhoud in uw AEM opslagplaats moeten toewijzen aan de URL van de site.

    Bijwerkend paths.json

  12. Voeg toe begaat bericht zoals gewenst en klik dan veranderingen begaan, die hen direct aan de main tak begaan.

    het Aanwijzen veranderingen

TIP
Voor meer informatie over wegafbeeldingen, te zien gelieve het document Toewijzing van de Weg voor Edge Delivery Services.

Een nieuwe AEM-site maken en bewerken create-aem-site

Nu u een project GitHub hebt, moet u een nieuwe AEM tot stand brengen plaats die het project kan gebruiken.

NOTE
Als u uw site wilt bewerken met de Universal Editor, moet u een op chroom gebaseerde browser gebruiken.
  1. Download het recentste WYSIWYG auteursrecht met het malplaatje van de Edge Delivery Services plaats van GitHub in https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases.

  2. Teken binnen aan uw het auteursinstantie van AEM as a Cloud Service en navigeer aan de console van Plaatsen en tik of klik creeer -> Plaats van malplaatje.

    creeer een nieuwe plaats van de console

  3. Op selecteer een plaatsmalplaatje van creeer plaatstovenaar, klik de Invoer knoop om een nieuw malplaatje in te voeren.

    het Invoeren malplaatjes

  4. Upload het WYSIWYG auteursrecht met het malplaatje van de Edge Delivery Services plaats dat u van GitHub downloadde.

    • De sjabloon mag slechts eenmaal worden geüpload. Na het uploaden kan het opnieuw worden gebruikt om extra sites te maken.
  5. Zodra het malplaatje wordt ingevoerd, verschijnt het in de tovenaar. Tik of klik om het te selecteren en dan te tikken of daarna te klikken.

    Uitgezochte malplaatje

  6. Verstrek de volgende gebieden en de kraan of klik creëren.

    • titel van de Plaats - voeg een beschrijvende titel voor de plaats toe.
    • titel van de Plaats - gebruik <site-name> dat u in de vorige stap bepaalde.
    • GitHub URL - gebruik URL van het project GitHub u in de vorige stap creeerde.

    de details van de Plaats

  7. AEM bevestigt het maken van de site met een dialoogvenster. Tik of klik O.K. om te sluiten.

    bevestiging van de creatie van de Plaats

  8. Op de plaatsenconsole, navigeer aan index.html van de pas gecreëerde plaats en tik of klik geef in de toolbar uit.

    Uitgevend de nieuwe plaats

  9. De Universal Editor wordt op een nieuw tabblad geopend. U kunt moeten tikken of binnen Teken met Adobe klikken om uw pagina voor authentiek te verklaren uit te geven.

    Universele Redacteur

U kunt uw site nu bewerken met de Universal Editor. Zie de Universele documentatie van de Redacteurvoor meer informatie.

Uw nieuwe site publiceren publishing

Als u klaar bent met het bewerken van uw nieuwe site met de Universal Editor, kunt u uw inhoud publiceren.

  1. Voor de plaatsenconsole, selecteer alle pagina's u voor uw nieuwe plaats creeerde en tikt of klikt Snel publiceert in de toolbar.

    Selecterend paginas om te publiceren

  2. Tik of klik Publish in de bevestigingsdialoog om het proces te beginnen.

    de dialoog van Publish

  3. Open een nieuw tabblad in dezelfde browser en navigeer naar de URL van de nieuwe site.

    • https://main--<repository-name>--<owner>.hlx.page
  4. Bekijk de gepubliceerde inhoud.

    Gepubliceerde inhoud

Volgende stappen next-steps

Nu u een werkend WYSIWYG creatie met het project van Edge Delivery Services hebt, kunt u beginnen creërend en uw eigen blokken.

Gelieve te zien de gids Creërend Blokken Instrumented voor gebruik met de Universele Redacteurvoor meer informatie.

TIP
Voor een analyse van begin tot eind van het creëren van een nieuw project van Edge Delivery Services dat voor WYSIWYG creatie met AEM as a Cloud Service als inhoudsbron wordt toegelaten, gelieve te bekijken dit AEM webinar GEMs.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab