Utvecklarhandbok för att komma igång med WYSIWYG-redigering med Edge Delivery Services edge-dev-getting-started
Den här guiden hjälper dig att komma igång med en ny Adobe Experience Manager-webbplats med hjälp av Edge Delivery Services och den universella redigeraren för WYSIWYG-innehåll.
Förutsättningar prerequisites
Innan du börjar den här guiden bör du känna till grunderna i och ha tillgång till Edge Delivery Services som:
- Du har slutfört självstudiekursen Edge Delivery Service.
- Du har åtkomst till en AEM Cloud Service-sandlåda.
- Du har aktiverat den universella redigeraren i samma sandlådemiljö.
Grundbegrepp vid utveckling för Edge Delivery Services core-concepts
Edge Delivery Services bygger på konceptet med block. AEM innehåller ett omfattande bibliotek med fördefinierade block, som kan byggas ut efter dina projektbehov. Kod för Edge Delivery Services-projekt hanteras i GitHub.
Block blocks
Block är den mest grundläggande delen av en sida som levereras av Edge Delivery Services. Ett -block kapslar in format och kod som driver en logisk komponent på en innehållssida.
AEM tillhandahåller standardblock som en del av produkten i projektmallen. Exempel på sådana block är rubrik, text, bilder, länkar, listor osv.
Edge Delivery Services och GitHub github-edge
Edge Delivery utnyttjar GitHub så att du kan hantera och driftsätta kod direkt från din GitHub-databas.
Dina författare kan skapa innehåll med antingen dokumentbaserad redigering eller innehåll i AEM med den universella redigeraren. Utvecklare kan anpassa webbplatsens funktionalitet med hjälp av CSS och JavaScript i GitHub oavsett hur författarna skapar sitt innehåll.
Webbplatser skapas automatiskt för var och en av dina grenar, från förhandsgranskning av innehåll till produktion. Alla resurser du lägger in i GitHub-databasen är tillgängliga på din webbplats utan någon byggprocess.
Komma igång med WYSIWYG Authoring och Edge Delivery Services getting-started
När du har uppfyllt villkoren och gjort till ett val att använda Universell redigerare kan du komma igång med ditt eget projekt.
Skapa ditt GitHub-projekt create-github-project
Först måste du skapa ett nytt projekt på GitHub, baserat på mallen Adobe.
-
Navigera till
https://github.com/adobe-rnd/aem-boilerplate-xwalk
och klicka på Använd den här mallen och välj Skapa en ny databas.- Du måste vara inloggad på GitHub för att kunna se det här alternativet.
-
Som standard tilldelas databasen till dig. Ändra detta om det behövs, ange ett databasnamn och en beskrivning och klicka på Skapa databas.
-
Navigera till
https://github.com/apps/aem-code-sync
och klicka på Konfigurera på en ny flik i samma webbläsare. -
Klicka på Konfigurera för den organisation där du skapade din nya databas i föregående steg.
-
På sidan AEM för GitHub-kodsynkronisering under Databasåtkomst väljer du Markera endast databaser, markera databasen som du skapade i föregående steg och klicka sedan på Spara.
-
När AEM Code Sync har installerats får du en bekräftelse. Gå tillbaka till webbläsarfliken i din nya databas.
-
Klicka på filen
fstab.yaml
för att öppna den och redigera den sedan genom att klicka på ikonen Redigera den här filen . -
Redigera filen
fstab.yaml
för att uppdatera monteringspunkten för projektet. Ersätt standardwebbadressen för Google Docs med webbadressen för AEM as a Cloud Service-redigeringsinstansen och klicka sedan på Verkställ ändringar….https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
- Om du ändrar monteringspunkten får Edge Delivery Servicens information om var innehållet på platsen finns.
-
Lägg till ett implementeringsmeddelande efter behov och klicka sedan på Verkställ ändringar och implementera dem direkt i
main
-grenen. -
Gå tillbaka till roten för databasen, klicka på
paths.json
och sedan på ikonen Redigera den här filen . -
Standardmappningen använder databasens namn. Uppdatera den standardmappning som krävs för ditt projekt med
/content/<site-name>/:/
och klicka på Verkställ ändringar….- Ange din egen
<site-name>
. Du kommer att behöva det i ett senare steg. - Mappningarna anger för Edge Delivery Servicens hur innehållet i din AEM ska mappas till webbplatsens URL.
- Ange din egen
-
Lägg till ett implementeringsmeddelande efter behov och klicka sedan på Verkställ ändringar och implementera dem direkt i
main
-grenen.
Skapa och redigera en ny AEM create-aem-site
Nu när du har ett GitHub-projekt måste du skapa en ny AEM som projektet kan använda.
-
Hämta den senaste WYSIWYG-redigeringen med webbplatsmallen för Edge Delivery Services från GitHub på
https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases
. -
Logga in på din AEM as a Cloud Service-redigeringsinstans och navigera till webbplatskonsolen och tryck eller klicka på Skapa -> Plats från mall.
-
På fliken Välj en platsmall i guiden Skapa plats klickar du på knappen Importera för att importera en ny mall.
-
Överför WYSIWYG-redigeringen med webbplatsmallen för Edge Delivery Services som du hämtade från GitHub.
- Mallen får bara överföras en gång. När den har överförts kan den återanvändas för att skapa ytterligare webbplatser.
-
När mallen har importerats visas den i guiden. Tryck eller klicka för att markera den och tryck eller klicka sedan på Nästa.
-
Ange följande fält och tryck eller klicka på Skapa.
- Platstitel - Lägg till en beskrivande titel för webbplatsen.
- Platstitel - Använd
<site-name>
som du definierade i föregående steg. - GitHub-URL - Använd URL:en för GitHub-projektet som du skapade i föregående steg.
-
AEM bekräftar att webbplatsen har skapats med en dialogruta. Tryck eller klicka på OK för att stänga.
-
På webbplatskonsolen går du till
index.html
för den nyligen skapade webbplatsen och trycker eller klickar på Redigera i verktygsfältet. -
Den universella redigeraren öppnas på en ny flik. Du kan behöva trycka eller klicka på Logga in med Adobe för att autentisera för att redigera sidan.
Nu kan du redigera webbplatsen med Universal Editor. Mer information finns i dokumentationen för den universella redigeraren.
Publicera din nya webbplats publishing
När du är klar med redigeringen av den nya webbplatsen med Universal Editor kan du publicera innehållet.
-
På webbplatskonsolen markerar du alla sidor som du har skapat för den nya webbplatsen och trycker eller klickar på Snabbpublicering i verktygsfältet.
-
Tryck eller klicka på Publish i bekräftelsedialogrutan för att starta processen.
-
Öppna en ny flik i samma webbläsare och navigera till URL:en för den nya platsen.
https://main--<repository-name>--<owner>.hlx.page
-
Se innehållet publiceras.
Nästa steg next-steps
Nu när du har en fungerande WYSIWYG-redigering med projekt för Edge Delivery Services kan du börja skapa och formatera dina egna block.
Mer information finns i guiden Skapa block som är instrumenterade för användning med den universella redigeraren.