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:

Deze zelfstudie 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 gemakkelijkste manier om na AEM beste praktijken te beginnen is uw bewaarplaats tot stand te brengen gebruikend de bewaarplaats van GitHub Boilerplate als malplaatje.

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

Klik op de knop Use this template en selecteert u Create a new repositoryen selecteer waar u deze opslagplaats wilt maken.

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

De enige resterende stap in GitHub is het installeren van AEM Code Sync GitHub App op uw repository door deze link te bezoeken: https://github.com/apps/aem-code-sync/installations/new

In de Repository access instellingen van de AEM Code Sync-app, zorg ervoor dat u Only select Repositories (niet All Repositories). Selecteer vervolgens de nieuwe opslagplaats en klik op Save.

Opmerking: 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>.hlx.page/ In het bovenstaande voorbeeld is dat https://main--my-website--lighthouse100.hlx.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 map bijvoorbeeld inhoud.

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 uit de inhoud van het voorbeeld en maak uzelf bekend met de inhoudsstructuur. nav en footer niet vaak worden gewijzigd in een project en een speciale structuur hebben. 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 download afzonderlijke bestanden. Vergeet echter niet de gedownloade .docx bestanden weer in de native Google Docs wanneer u ze uploadt naar uw 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 te wijzigen in fstab.yaml in uw reactie GitHub aan de omslag 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 omdat er nog geen voorvertoning van de inhoud is weergegeven. Raadpleeg de volgende sectie voor meer informatie over het ontwerpen en voorvertonen van uw inhoud. Als u over hebt gekopieerd index, nav en footer dit zijn allemaal afzonderlijke documenten met een 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 uitgevoerd, is de nieuwe inhoudsbron niet leeg, maar is er geen inhoud gepromoveerd naar de preview of live fases, wat betekent dat uw website 404 dagen bedient.

Om inhoud voor te vertonen, moet een auteur de Sidekick Chrome-extensie installeren. Zoek de Chrome-extensie hier.

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

Als u de Chrome-extensie wilt instellen, gaat u naar de eerder gedeelde map Google Drive 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. Klik op de knop preview of publish De knoppen activeren de bijbehorende bewerking.

Open de index en breng enkele wijzigingen aan. Activeer de Sidekick door op de vastgezette extensie te klikken en vervolgens op de knop Preview Deze knop activeert de voorvertoningsbewerking en opent 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 de AEM (CLI) te installeren en uw repo plaatselijk te klonen door het volgende te gebruiken.

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

Daarna wijzigt u de projectmap en start u de lokale ontwikkelomgeving als volgt.

cd <repo>
aem up

Dit wordt geopend http://localhost:3000/ en u bent klaar om veranderingen aan te brengen.
Een goede plaats om te beginnen is in blocks map waarin het grootste deel van de stijlen en code zich voor een project bevindt. Wijzig gewoon een .css of .js en u zou de veranderingen in uw browser onmiddellijk moeten zien.

Zodra u klaar 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>.hlx.page/) en productie (https://<branch>--<repo>--<owner>.hlx.live/) sites.

Dat is het, je hebt het gemaakt! Gefeliciteerd, uw eerste site is actief. Als u hulp nodig hebt in de zelfstudie deelnemen aan ons Disorder-kanaal of contact met ons op te nemen.