Lay-outs

Met een lay-out definieert u hoe inhoud op een sitepagina wordt geschikt. Het aantal benoemde slots kan per lay-out verschillen. Een slot is een regio over de gehele breedte van de pagina die een of meer typen inhoud kan bevatten.

Elk thema heeft verschillende paginalay-outs. Zie voor meer informatie: Thema's.

Wanneer u een pagina toevoegt aan een site, selecteert u een lay-out voor deze pagina. Elke lay-out bevat gebieden op de pagina, slots genaamd, waarnaar u inhoud kunt slepen. U bepaalt zelf welke inhoud in deze slots wordt geplaatst. Het kan van alles zijn, van titels, tekst en dividers tot multimedia, galerieën en sociale media.

Een lay-out bevat geldige HTML-constructies en speciale markup die kan worden gelezen door de Oracle Content Management renderer. Een lay-out moet beginnen met een DOCTYPE-statement om de browser te configureren voor weergave van de pagina in een met standaarden compliante modus; bijvoorbeeld: <!DOCTYPE html> Dit statement is voor sommige componenten noodzakelijk om de beste resultaten te verkrijgen.

Dit codevoorbeeld bevat slechts een minimale lay-out:

1  <!DOCTYPE html>
3  <head>
4          <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
6          <script src="/_themes/[!--$SCS_THEME_NAME--]/assets/js/topnav.js"></script>
7          <link rel="stylesheet" type="text/css"
8                 href="/_themes/[!--$SCS_THEME_NAME--]/assets/css/main.css">
9          <link rel="stylesheet" type="text/css"
10                href="/_themes/[!--$SCS_THEME_NAME--]/designs/[!--$SCS_DESIGN_NAME--]/design.css">
11
12         <!--$SCS_RENDER_INFO-->
13         <!--$SCS_SITE_HEADER-->
13         <!--$SCS_PAGE_HEADER-->
14  </head>
15  <body>
16         <div id="topNavigation"></div>
17         <div id="mainContentSlot" class="scs-slot scs-responsive"></div>
18
19         <script data-main="/_sitescloud/renderer/renderer.js"
20                src="/_sitescloud/renderer/require.js"></script>
21         <!--$SCS_SITE_FOOTER-->
22  </body>
23  </html>

Verschillende tokens worden uitgevouwen wanneer een pagina wordt weergegeven in de browser.

  • [!--$SCS_THEME_NAME--]

    Dit wordt uitgevouwen tot de naam van het huidige thema dat voor de site is gekozen. Met dit token kan het thema worden gekopieerd, omdat URL's die gebruikmaken van dit token naar het huidige thema verwijzen.

  • [!--$SCS_DESIGN_NAME--]

    Dit wordt uitgevouwen tot de naam van het huidige ontwerp dat voor de site is gekozen. Heridoor kan de lay-out worden gebruikt door meerdere ontwerpen binnen het thema.

  • [!--$SCS_RENDER_INFO--]

    Dit wordt uitgevouwen tot een scripttag die de paginahiërarchie en componentweergave-informatie voor de pagina bevat. Deze moet worden geplaatst in de sectie <head> van de lay-out.

  • [!--$SCS_SITE_HEADER--]

    Dit wordt uitgevouwen tot de sitekoptekstwaarde die is opgegeven in het veld 'Koptekst' in de SEO-eigenschappen (Search Engine Optimization). Hier kunt u site-brede markup invoeren die op alle pagina's moet worden geplaatst. Zie voor meer informatie: Eigenschappen voor zoekmachines instellen.

  • [!--$SCS_PAGE_HEADER--]

    Dit resulteert in de paginakoptekstwaarde die te vinden is in het veld 'Koptekst' in de eigenschappen van 'Pagina-instellingen' in de sitebuilder. Hier kunt u paginaspecifieke markup invoeren die voor deze pagina moet worden geplaatst.

  • [!--$SCS_SITE_FOOTER--]

    Dit wordt uitgevouwen tot de sitevoettekstwaarde die is opgegeven in het veld 'Voettekst' in de SEO-eigenschappen (Search Engine Optimization). Hier kunt u site-brede markup invoeren die op alle pagina's moet worden geplaatst. Zie voor meer informatie: Eigenschappen voor zoekmachines instellen.

Opmerking:

In de tokens kunt u ook het prefix <!--$ en het suffix --> als scheidingstekens gebruiken in plaats van [!--$ en --].

Wanneer een site online is, worden de volgende tokens in de koppeling vervangen door contextgevoelige echte waarden. Zo werkt de koppeling zowel wanneer een site wordt bewerkt als wanneer deze gepubliceerd en online is.

  • /_sitescloud/ wordt vervangen door /_sitesclouddelivery/

  • /_themes/ wordt vervangen door /_themesdelivery/

Slots zijn DIV-elementen in de lay-out die de waarde "scs-slot" hebben in het klassenattribuut. Een slot biedt gebruikers de mogelijkheid componenten toe te voegen om de site te vullen met inhoud. Meerdere DIV- elementen kunnen worden aangewezen als slots door er het klassenattribuut "scs-slot" aan toe te wijzen. Elke slot moet een uniek id-attribuut hebben.

Opmerking:

Slots kunnen niet worden genest, maar u kunt ze wel genest laten lijken door een CSS-overlay te gebruiken. Hiertoe gebruikt u een componentgroep of sectielay-out. Zie voor meer informatie: Sectielay-outs maken.

Van slots die ook de klassenattribuutwaarde "scs-responsive" bevatten, wordt de inhoud vernieuwd wanneer de herleiding van de browserviewport wordt gewijzigd. Zo kunnen slots responsief worden weergegeven op een groot scherm van een desktop of een klein scherm van een mobiel apparaat.

Met de laatste <script>-tag (regel 19 in het voorbeeld) wordt de code voor weergave in Oracle Content Management geladen. Deze code is verantwoordelijk voor het tekenen van de componenten op de pagina en biedt u de mogelijkheid aangepaste code te gebruiken voor toegang tot de weergave-API. Zonder deze <script>-tag kunnen pagina's die op de lay-out zijn gebaseerd, niet worden gewijzigd met behulp van de sitebuilder.