Aan de slag - Zelfstudie voor ontwikkelaars

Deze zelfstudie helpt u om aan de slag te gaan met een nieuw Adobe Experience Manager-project (AEM). Over tien tot twintig minuten hebt u uw eigen site gemaakt en kunt u uw eigen inhoud, opmaak en nieuwe blokken maken, voorvertonen en publiceren.

Vereisten:

Dit leerprogramma gebruikt macOS, Chrome, en de Code van Visual Studio als ontwikkelomgeving en de screenshots en de instructies wijzen op die opstelling. U kunt een verschillend werkend systeem, browser, en coderedacteur gebruiken, maar UI u ziet en de stappen u moet nemen kan dienovereenkomstig variëren.

Ga aan de slag met de sjabloon van de boilerplate-opslagplaats

De snelste en eenvoudigste manier om aan de slag te gaan met het volgen van de beste praktijken van AEM is om uw opslagplaats te creëren die de gegevensopslagplaats Boilerplate GitHub als malplaatje gebruikt.

https://github.com/adobe/aem-boilerplate

Klik op de knop Use this template en selecteer Create a new repository en selecteer de gebruikersorganisatie die eigenaar is van de repository

We raden u aan de gegevensopslagruimte in te stellen op public .

De enige resterende stap in GitHub is de App van GitHub van de Synchronisatie van de Code van AEM te installeren GitHubop uw bewaarplaats door deze verbinding te bezoeken: https://github.com/apps/aem-code-sync/installations/new

Selecteer Only select Repositories (niet All Repositories ) in de Repository access -instellingen van de AEM Code Sync App. Selecteer vervolgens de nieuwe opslagplaats en klik op Save .

Nota: Als u de Onderneming van Github met IP het filtreren gebruikt, kunt u volgende IP aan de lijst van gewenste personen toevoegen: 3.227.118.73

Gefeliciteerd! Er wordt een nieuwe website uitgevoerd op https://<branch>--<repo>--<owner>.aem.page/ In het bovenstaande voorbeeld https://main—mijn site—aemtutorial.em.page/

Uw eigen inhoudsbron koppelen met Google Drive

In uw vork van de Opslagplaats Boilerplate GitHub, wijst de plaats aan een bestaande inhoudsbron in de Aandrijving van Google. Zie deze omslagvoor wat voorbeeldinhoud.

Deze inhoud is alleen-lezen, maar kan worden gekopieerd naar uw Google Drive-map om als startpunt te dienen.

Als u uw eigen inhoud wilt ontwerpen, maakt u een map in uw eigen Google Drive en deelt u de map met de Adobe Experience Manager-gebruiker (helix@adobe.com).

Een goede manier om te beginnen met het ontwerpen van uw eigen inhoud is het kopiëren index , nav en footer van de voorbeeldinhoud en het vertrouwd maken met de inhoudsstructuur. nav en footer worden niet vaak gewijzigd in een project en hebben een speciale structuur. De meeste bestanden in een project zien er meer uit als index .

Open de bestanden en kopieer/plak de volledige inhoud naar de bijbehorende bestanden in uw eigen Google Drive. U kunt de bestanden ook downloaden via Download All of afzonderlijke bestanden downloaden. Vergeet echter niet de gedownloade .docx bestanden weer om te zetten naar de native Google Docs wanneer u ze uploadt naar de map in uw Google Drive.

Nu u uw inhoud hebt, moet u die inhoud met uw reactie verbinden GitHub. U doet dit door de verwijzing in fstab.yaml in uw reactie GitHub aan de omslag te veranderen u enkel deelde.
Kopieer/plak de map-URL van uw Google Drive naar fstab.yaml .

Houd er rekening mee dat nadat u deze wijziging hebt aangebracht, u 404 not found fouten zult zien omdat uw inhoud nog niet is voorvertoond. Raadpleeg de volgende sectie voor meer informatie over het ontwerpen en voorvertonen van uw inhoud. Als u de muis boven index hebt gekopieerd, zijn nav en footer alle drie afzonderlijke documenten met hun eigen voorvertoning- en publicatiecycli. Zorg er dus voor dat u ze allemaal voorvertoont (en publiceert).

Leg uw wijzigingen vast en u hebt uw eigen inhoudsbron aan uw website gekoppeld.

Inhoud voorvertonen en publiceren

Nadat u de laatste stap hebt voltooid, is uw nieuwe inhoudsbron niet leeg, maar is er geen inhoud gepromoveerd naar de preview - of live -fasen. Dit betekent dat uw website 404-jarige servers dient.

Een auteur moet de Sidekick Chrome-extensie installeren om een voorvertoning van de inhoud weer te geven. Vind de uitbreiding van Chrome in de Opslag van het Web van Chrome.

Nadat u de extensie aan Chrome hebt toegevoegd, vergeet dan niet de extensie vast te zetten, zodat u deze gemakkelijker kunt vinden.

Als u de Chrome-extensie wilt instellen, gaat u naar de eerder gedeelde Google Drive-map en klikt u op het extensiepictogram op de browserwerkbalk. Selecteer vervolgens Add this project .

Zodra de extensie is geïnstalleerd en uw project is toegevoegd, kunt u een voorvertoning van uw inhoud weergeven en deze publiceren vanaf uw Google Drive.

Selecteer alle drie documenten en activeer de AEM Sidekick door op de vastgezette extensie te klikken. Er wordt een nieuwe werkbalk weergegeven. Als u op de knoppen preview of publish klikt, wordt de bijbehorende bewerking geactiveerd.

Open het index -document en breng enkele wijzigingen aan. Activeer de Sidekick door op de vastgezette extensie te klikken en klik vervolgens op de knop Preview die de voorvertoningsbewerking activeert en open een nieuw tabblad met de voorvertoning van de inhoud.

Beginnen met het ontwikkelen van stijlen en functionaliteit

Om met ontwikkeling te beginnen, is het het gemakkelijkst om de Interface van de Lijn van het Bevel van AEM (CLI) te installeren en uw repo plaatselijk door het volgende te klonen.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

Daarna wijzigt u de projectmap en start u de lokale ontwikkelomgeving met het volgende.

cd <repo>
aem up

Dit wordt geopend http://localhost:3000/ en u kunt wijzigingen aanbrengen.
Een goede beginplaats is de map blocks , waarin het grootste deel van de stijlen en code voor een project staat. Breng eenvoudig een verandering in a .css of .js aan en u zou de veranderingen in uw browser onmiddellijk moeten zien.

Zodra u bereid bent om uw veranderingen te duwen, gebruik eenvoudig Git om, uw code toe te voegen toe te wijzen en te duwen aan uw voorproef (https://<branch>--<repo>--<owner>.aem.page/) en productie (https://<branch>--<repo>--<owner>.aem.live/) plaatsen.

dat is het, maakte u het! Gefeliciteerd, uw eerste site is actief. Als u hulp in het leerprogramma nodig hebt, gelieve zich bij ons kanaal van het Overzichtof krijgt in contact met ons.