Container en lay-outmodus configureren configuring-layout-container-and-layout-mode

Leer hoe u de container van de lay-out en de lay-outmodus configureert.

Overzicht overview

Responsieve Lay-outis een mechanisme om ontvankelijk Webontwerpte realiseren. Hierdoor kan de gebruiker webpagina's maken met een indeling en afmetingen die afhankelijk zijn van de apparaten die de gebruikers gebruiken.

AEM realiseert een responsieve indeling voor uw pagina's met behulp van een combinatie van mechanismen:

Met deze responsieve rastermechanismen kunt u:

Lay-outmodus voor uw site activeren activate-layout-mode-for-your-site

Deze procedures worden gebruikt om de wijze van de Lay-out op uw plaats toe te laten.

De onderbrekingspunten configureren configure-the-breakpoints

Onderbrekingspunten:

Ze kunnen worden gedefinieerd met CRXDE Lite of XML.

Onderbrekingspunten configureren met CRXDE Lite configuring-breakpoints-using-crxde-lite

Onderbrekingspunten configureren met XML configuring-breakpoints-using-xml

Onderbrekingspunten bevinden zich in de <jcr:content> -sectie van .context.html onder de toepasselijke sjabloonmap (of inhoudsmap).

Een voorbeelddefinitie:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Een provider van responsieve informatie toevoegen add-a-responsive-information-provider

Kopieer de volgende cq:infoProviders nodestructuur naar de bovenliggende pagina-component:

/libs/foundation/components/page/cq:infoProviders/responsive

Component resizing voor de pagina inschakelen enable-component-resizing-for-the-page

Deze procedures worden vereist zodat kunt u componenten op de wijze van de Lay-out resize.

De container van de Lay-out instellen als HoofdParsys set-layout-container-as-main-parsys

Om hoofdparsys van uw pagina te plaatsen om een lay-outcontainer te zijn, bepaal parsys als:

wcm/foundation/components/responsivegrid

In één van beide:

De volgende twee voorbeelden illustreren de definitie:

Inclusief de responsieve CSS include-the-responsive-css

CSS voor onderbrekingspunten die MINDER gebruiken css-for-breakpoints-using-less

AEM gebruikt LESS om delen van noodzakelijke CSS te produceren, deze moeten voor uw projecten worden omvat.

U zult ook a cliëntbibliotheekmoeten creëren om extra configuratie en functievraag te verstrekken. Het volgende LESS extract is een voorbeeld van het minimum dat u aan uw project moet toevoegen:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

De definitie van het basisraster is te vinden onder:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Overwegingen bij opmaken styling-considerations

Componenten die in een responsieve container worden vastgehouden, worden vergroot of verkleind (samen met hun respectievelijke HTML DOM-elementen) op basis van de responsieve rastergrootte. Daarom wordt in deze omstandigheden aanbevolen definities van DOM-elementen met een vaste breedte (bevat) te vermijden (of bij te werken).

Bijvoorbeeld:

Compatibiliteit van afbeeldingen vergroten/verkleinen en aanpassen resizing-and-adaptive-image-compliance

Als u de grootte van een component in het raster wijzigt, worden de volgende listeners geactiveerd, indien van toepassing:

Als u de inhoud van een adaptieve afbeelding in een responsief raster op de juiste wijze wilt vergroten of verkleinen en bijwerken, moet u een afterEdit set to REFRESH_PAGE listener toevoegen aan het EditConfig -bestand van elke component in de component.

Bijvoorbeeld:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

Het mechanisme voor adaptieve afbeeldingen is beschikbaar via een script dat de selectie van de juiste afbeelding voor de huidige grootte van het venster bepaalt. De gebeurtenis wordt geactiveerd nadat de DOM gereed is of wanneer een specifieke gebeurtenis wordt ontvangen. De pagina moet momenteel worden vernieuwd om het resultaat van de actie van de gebruiker correct weer te geven.

De Containercomponent voor lay-out inschakelen voor pagina enable-the-layout-container-component-for-page

Deze taken staan auteurs toe om instanties van de component van de Container van de Lay-out op de pagina te slepen.

De Containercomponent voor lay-out inschakelen voor paginabewerking enable-the-layout-container-component-for-page-editing

Auteurs kunnen meer responsieve rasters toevoegen aan de inhoudspagina's als u de component Layout Container voor uw pagina wilt inschakelen. U kunt dit doen door:

Het raster van de container van de layout configureren configure-the-grid-of-the-layout-container

U kunt het aantal beschikbare kolommen voor elke specifieke instantie van lay-outcontainer vormen:

Geneste responsieve rasters nested-responsive-grids

Het kan voorkomen dat u responsieve rasters moet nesten om de behoeften van uw project te ondersteunen. Houd er echter rekening mee dat de aanbevolen werkwijze van Adobe erin bestaat de structuur zo vlak mogelijk te houden.

Zorg ervoor dat wanneer u het gebruik van geneste responsieve rasters niet kunt vermijden:

Dit omvat alle structurele containers van het paginasjabloon.

Het kolomnummer van de binnencontainer mag nooit groter zijn dan dat van de buitencontainer. In het volgende voorbeeld wordt aan deze voorwaarde voldaan. Terwijl het kolomnummer van de buitencontainer 8 is voor het standaardscherm (bureaublad), is het kolomnummer van de binnencontainer 4.

container
  @layout = responsiveGrid
  cq:responsive
    default
      @offset = 0
      @width = 8
  container
  @layout = responsiveGrid
    cq:responsive
      default
        @offset = 0
        @width = 4
    text
      @text =" Text Column 1"

<div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--8 aem-GridColumn--offset--default--0">
  <div id="container-c9955c233c" class="cmp-container">
    <div class="aem-Grid aem-Grid--8 aem-Grid--default--8 ">
      <div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <div id="container-8414e95866" class="cmp-container">
          <div class="aem-Grid aem-Grid--4 aem-Grid--default--4 ">
            <div class="text aem-GridColumn aem-GridColumn--default--4">
              <div data-cmp-data-layer="..." id="text-1234567890" class="cmp-text">
                <p>Text Column 1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>