AMP-ondersteuning voor de kerncomponenten

Laatste update: 2023-05-20
  • Gemaakt voor:
  • Developer
    Admin

Vanaf release 2.11.0 van de kerncomponenten, AMP - Versnelde mobiele pagina's - volledig worden ondersteund.

In dit document wordt een overzicht gegeven van de manier waarop AMP wordt ondersteund en van de manier waarop u dit voor uw sites kunt inschakelen. Voor volledige technische details zie echter de documentatie voor GitHub-ontwikkelaars.

Wat is AMP?

Accelerated Mobile Pages of AMP is een opensource-framework dat oorspronkelijk door Google is ontworpen om pagina's te optimaliseren voor mobiel surfen. AMP-pagina's worden doorgaans veel sneller geladen dan standaardwebpagina's en bieden betere mobiele ervaringen.

AMP in de kerncomponenten

Ondersteuning voor AMP in de Core Components is volledig configureerbaar. AMP-versies van pagina's kunnen alleen worden aangeboden, naast de standaard HTML-versies, of helemaal niet.

De kerncomponenten gebruiken amp als een verkiesbare selecteur om een pagina van AMP terug te geven. Bijvoorbeeld example.html zou de normale pagina weergeven en example.amp.html zou de AMP-versie zijn.

Individuele projecten kunnen beslissen of zij AMP al dan niet zullen benutten. Omdat AMP- en standaard HTML-pagina's parallel kunnen worden geleverd, kan een project ervoor kiezen om AMP alleen op bepaalde pagina's van het project te gebruiken.

Aan de slag met AMP-ondersteuning in uw project

Hoewel AMP-ondersteuning veel flexibiliteit biedt, zijn er slechts enkele eenvoudige stappen nodig om snel aan de slag te gaan:

  1. Installeer indien nodig de extensie voor AMP-ondersteuning.
    • Voor AEM as a Cloud Service projecten, is de uitbreiding automatisch beschikbaar met de Componenten van de Kern en geen installatie is noodzakelijk.
    • Voor on-premise en projecten van AMS, moet de uitbreiding uitdrukkelijk worden geïnstalleerd wanneer het installeren van de Componenten van de Kern.
  2. Zodra de uitbreiding AMP wordt geïnstalleerd, moet de componentenauteur de componentensupertypes aan die in de uitbreiding eenvoudig richten.
  3. Ondersteuning voor AMP inschakelen op sjabloonniveau of op afzonderlijke pagina's.
  4. Inline CSS implementeren zoals vereist.

AMP inschakelen voor pagina's

Als u AMP voor een pagina wilt inschakelen, AMP-modus moet in Paginabeleid.

Opties voor AMP-paginabeleid

  • Geen AMP - De pagina wordt alleen geleverd als standaard-HTML.
  • Gepareerde AMP - De pagina wordt geleverd als AMP en als HTML.
  • Alleen AMP - De pagina wordt alleen geleverd als AMP.

De AMP-instellingen voor een pagina kunnen ook worden overschreven in het dialoogvenster Pagina-eigenschappen voor een afzonderlijke pagina.

Eigenschappen van AMP-pagina

  • Overnemen van paginasjabloon - Dit is de standaardwaarde, die het plaatsen om van het beleid van het paginasjabloon toestaat te worden genomen.
  • Geen AMP - De pagina wordt alleen geleverd als standaard-HTML.
  • Gepareerde AMP - De pagina wordt geleverd als AMP en als HTML.
  • Alleen AMP - De pagina wordt alleen geleverd als AMP.

CSS-vereisten

Bij het gebruik van AMP met de kerncomponenten is het belangrijkste verschil dat AMP alles vereist CSS die moet worden omlijnd in de <head> en geoptimaliseerd.

Hiertoe wordt een aangepaste pagina-component gebruikt, die alleen de AMP-specifieke CSS laadt voor componenten die op de pagina aanwezig zijn.

OPMERKING

Vanwege ontwerpbeperkingen van AMP biedt Adobe geen ondersteuning voor het gebruik van het responsieve raster met de AMP-versie van uw pagina.

Voor nadere eisen en technische details raadpleegt u de documentatie voor GitHub-ontwikkelaars.

Op deze pagina