Het toelaten van de Voorste Pijpleiding enable-front-end-pipeline
Leer hoe u de front-end pijpleiding voor bestaande plaatsen kunt toelaten om plaatsthema's te gebruiken om uw plaats sneller aan te passen.
Overzicht overview
De front-end pijpleiding is een mechanisme dat enkel de front-end code van uw websites kan snel opstellen die op wordt gebaseerd plaatsthema'sen plaatssjablonen.
Deze pijpleiding behandelt slechts front-end code, die het plaatsingsproces sneller dan volledig-stapel plaatsingen maakt. Met deze functie kunnen ontwikkelaars aan de voorzijde uw site eenvoudig aanpassen zonder dat ze kennis van AEM nodig hebben.
De plaatsen die op plaatsmalplaatjes worden gebaseerd kunnen de front-end pijpleiding door gebrek gebruiken. Dit document beschrijft hoe u uw bestaande plaatsen kunt aanpassen om uit de front-end pijpleiding voordeel te halen.
AEM kan uw site zo configureren dat deze thema's laadt die worden geïmplementeerd met de Front End Pipeline, zelfs als uw site niet is gemaakt met sitesjablonen en -thema's, door deze in lagen boven op bestaande clientbibliotheken te plaatsen.
Technische details technical-details
Wanneer u de front-end pijplijn voor een plaats activeert, brengt AEM de volgende veranderingen in uw plaatsstructuur aan.
- Alle pagina's van de site bevatten één extra CSS- en JS-bestand, dat kan worden gewijzigd door updates te implementeren via een speciale Cloud Manager front-end pipe.
- De toegevoegde CSS- en JS-bestanden zijn aanvankelijk leeg. U kunt echter een map met "themabronnen" downloaden om de mappenstructuur in te stellen die nodig is om CSS- en JS-code-updates via de pijplijn te implementeren.
- Alleen ontwikkelaars kunnen de wijziging ongedaan maken door de knooppunten
SiteConfig
enHtmlPageItemsConfig
die met deze bewerking onder/conf/<site-name>/sling:configs
worden gemaakt, te verwijderen.
Vereisten requirements
AEM kan uw bestaande site automatisch aanpassen om de front-end pijplijn te gebruiken. Om dit werkschema te kunnen doen, moet uw plaats v2 of nieuwer van de Component van de Pagina van de Componenten van de Kerngebruiken.
Het toelaten van Voorste Pijl-Eind enabling
Zie Gebruik van de Lijst van gewenste personen van Cloud Manager IP met de front-end pijpleiding.
Het toelaten van uw plaats wordt gedaan van de console van Plaatsen gebruikend het spoor van de Plaats.
-
Logboek in AEM en navigeer aan uw plaats via Globale Navigatie > Plaatsen.
-
Selecteer uw site in de console. Selecteer de hoofdmap van de site en geen onderliggende pagina's.
-
Met uw geselecteerde plaats, open de spoorselecteurbij de linkerzijde en kies Plaats.
-
In het spoor van de Plaats, klik de knoop laat Voorste Pijpleiding van het Eind toe.
-
AEM vraagt u te bevestigen met een overzicht van de aangebrachte wijzigingen. Bevestig en uw site is aangepast.
Nu, is uw plaats klaar om de front-end pijpleiding te gebruiken. Meer over de front-end pijpleiding en het beheren van uw plaatsthema leren zie:
- Het Siterail gebruiken om uw Sitethema te beheren
- Snelle Reis van de Aanmaak van de Plaats- Deze documentatierit geeft u en overzicht van begin tot eind van het proces om snel een plaats op te stellen gebruikend de front-end pijpleiding en het Snelle hulpmiddel van de Aanmaak van de Plaats.
- CI/CD Pijpleidingen- Dit document beschrijft de front-end pijpleiding in de context van de volledig-stapel en Webrijpijpleidingen.
Pijpleiding aan de voorzijde en aangepaste domeinen custom-domains
De voorste-Eind Pijpleiding kan met worden gebruikt de eigenschap van de douanedomeinen van Cloud Manager,maar gelieve zich van de volgende vereisten bewust te zijn wanneer het gebruiken van de twee eigenschappen samen.
Statische front-end bestanden static-files
Statische front-end activa die via de Voorste-Eind Pijpleiding worden opgesteld zullen, door gebrek, van het vooraf bepaalde statische domein van Adobe worden gediend.
Als u een aangepast domein nodig hebt voor front-end elementen, kunt u een aangepast domein installeren op de publicatielijst en de Dispatcher zodanig configureren dat specifieke paden (zoals /static/
) naar de statische hostinglocatie van Adobe worden geleid. Deze methode vereist het bijwerken van uw regels van Dispatcherbehoorlijk en geheim voorgeheugenverzoeken om statische activa door:sturen.
Nadat u het aangepaste domein en de dispatcher hebt geconfigureerd, kunt u AEM configureren voor de front-end elementen van het statische domein.
Configuratie configuration
Zoals beschreven in de Technische Detailssectie, die de Voorste-Eind eigenschap van de Pijl voor een plaats activeren leidt tot a SiteConfig
en HtmlPageItemsConfig
hieronder knopen /conf/<site-name>/sling:configs
.
Als u de functie Aangepaste Cloud Manager-domeinen voor uw site samen met de Front End Pipeline wilt gebruiken voor statuselementen, moeten aanvullende eigenschappen aan deze knooppunten worden toegevoegd.
-
Stel de eigenschap
customFrontendPrefix
inSiteConfig
voor de site in.- Navigeer naar
/conf/<site-name>/sling:configs/com.adobe.aem.wcm.site.manager.config.SiteConfig
. - Voeg de eigenschap
customFrontendPrefix = "https://your-custom-domain.com/static/"
toe of werk deze bij.
- Navigeer naar
-
Hiermee wordt de
prefixPath
waarde van deHtmlPageItemsConfig
bijgewerkt met het aangepaste domein.-
Navigeer naar
/conf/<site-name>/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
. -
Controleer of de
prefixPath
verwijst naar uw aangepaste domein, zoalsprefixPath = "https://your-custom-domain.com/static/<hash>/..."
.
- Deze waarde kan desgewenst ook handmatig worden overschreven.
-
-
Controleer de instellingen.
- Na plaatsing, controleer dat de pagina's correct naar thematiedetecten van het douanedomein verwijzen.
- Open de ontwikkelaarsgereedschappen van uw browser en controleer de bestandspaden
theme.css
entheme.js
om te controleren of deze vanaf het juiste domein zijn geladen.
Pagina's voor de site verwijzen vervolgens naar themaartefacten van die bijgewerkte URL. De verzender leidt dan verzoeken om die middelen aan het statische domein.
Beste praktijken voor Voorste-Eind Ontwikkelaars best-practices
Als u front-end activa plaatselijk moet ontwikkelen en testen alvorens via de Voor-Eind Pijpleiding op te stellen, overweeg de volgende benaderingen:
- Gebruik de Wijze van de Volmacht van de Bouwer van het Thema van de Plaats 🔗 om thema artefacten voor het testen plaatselijk met voeten te treden.
- Plaats uw themabestanden handmatig vanaf een lokale ontwikkelingsserver en werk de
prefixPath
inHtmlPageItemsConfig
bij, zodat deze overeenkomt met het lokale serveradres. - Zorg ervoor dat het in cache plaatsen van browsers tijdens het testen is uitgeschakeld om live updates te zien.
Voor meer details op lokale front-end ontwikkeling, verwijs naar de documentatie van de Bouwer van het Thema van de Plaats.