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 WYSIWYG inhoud 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:
- U hebt de zelfstudie van de Dienst van Edge Delivery voltooid.
- U hebt toegang tot een zandbak van AEM Cloud Service.
- U hebt de Universele Redacteur op het zelfde zandbakmilieu toegelaten.
Kies de rechtereditor editor-choice
AEM biedt twee verschillende inhoudeditors en de keuze van wie u wilt gebruiken hangt af van uw situatie.
- Universele Redacteur - dit zou de standaardkeus voor nieuwe plaatsen moeten zijn.
- AEM de Redacteur van de Pagina - dit zou voor een bestaande migratie van AEM Sites aan Edge Delivery Services moeten worden gekozen.
Deze gids concentreert zich op AEM projecten op Edge Delivery Services gebruikend de Universele Redacteur. Zie het document Gebruikend Edge Delivery Services met AEMvoor meer details bij het kiezen van de juiste redacteur en de migratie van bestaande AEM plaatsen aan Edge Delivery Services.
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.
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.
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.
-
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.
-
Standaard wordt de opslagplaats aan u toegewezen. Verander dit zonodig evenals verstrek een een bewaarplaatsnaam en een beschrijving en klik creeer bewaarplaats.
-
In een nieuw lusje in zelfde browser, navigeer aan
https://github.com/apps/aem-code-syncen klik vormen.
-
Klik vormen voor org waar u uw nieuwe bewaarplaats in de vorige stap creeerde.
-
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.
-
Nadat AEM Codesynchronisatie is geïnstalleerd, ontvangt u een bevestigingsscherm. Ga terug naar het browsertabblad van de nieuwe opslagplaats.
-
Klik het
fstab.yamldossier om het te openen en dan dit dossier pictogram uitgeven om het uit te geven.
-
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.
-
Voeg toe begaat bericht zoals gewenst en klik dan veranderingen begaan, die hen direct aan de
maintak begaan.
-
Terugkeer naar de wortel van uw bewaarplaats en klik op
paths.jsonen dan geef dit dossier pictogram uit.
-
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.
- Geef uw eigen
-
Voeg toe begaat bericht zoals gewenst en klik dan veranderingen begaan, die hen direct aan de
maintak begaan.
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.
-
Download recentste WYSIWYG creatie met het malplaatje van de Edge Delivery Services plaats van GitHub in
https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases. -
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.
-
Op selecteer een plaatsmalplaatje van creeer plaatstovenaar, klik de Invoer knoop om een nieuw malplaatje in te voeren.
-
Upload het schrijven WYSIWYG 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.
-
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.
-
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.
-
AEM bevestigt het maken van de site met een dialoogvenster. Tik of klik O.K. om te sluiten.
-
Op de plaatsenconsole, navigeer aan
index.htmlvan de pas gecreëerde plaats en tik of klik geef in de toolbar uit.
-
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.
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.
-
Voor de plaatsenconsole, selecteer alle pagina's u voor uw nieuwe plaats creeerde en tikt of klikt Snel publiceert in de toolbar.
-
Tik of klik Publish in de bevestigingsdialoog om het proces te beginnen.
-
Open een nieuw tabblad in dezelfde browser en navigeer naar de URL van de nieuwe site.
https://main--<repository-name>--<owner>.hlx.page
-
Bekijk de 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.