Om layouter

En layout definierar hur innehåll ordnas på en webbplatssida. Olika layouter kan innehåll olika många namngivna rutor. En ruta är ett område som omfattar sidans bredd och som kan innehålla en eller flera typer av innehåll.

Alla teman har flera olika sidlayouter. Se Om teman.

När du lägger till en plats på en sida väljer du en layout som ska användas för sidan. Varje layout har områden på sidan – kallade rutor – dit du kan dra och släppa innehåll. Det är helt upp till dig vilket innehåll du placerar i dessa rutor. Det kan vara allt från rubriker, text och avdelare till multimedia, gallerier och sociala media.

En layout innehåller giltiga HTML-konstruktioner samt särskild uppmärkning som tolkas av renderaren i Oracle Content Management. En layout måste börja med en DOCTYPE-sats för att webbläsaren ska kunna konfigureras så att den återger sidan i ett standardkompatibelt läge. Exempel: <!DOCTYPE html> Den här satsen krävs av vissa komponenter för att bästa möjliga resultat ska uppnås.

I den här exempelkoden visas en minimal layout:

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>

Olika token expanderas när en sida återges i webbläsaren.

  • [!--$SCS_THEME_NAME--]

    Detta expanderas till namnet på det tema som för närvarande är valt för webbplatsen. Genom att detta token används blir det möjligt att kopiera temat eftersom URL:er som använder detta token refererar till det aktuella temat.

  • [!--$SCS_DESIGN_NAME--]

    Detta expanderas till namnet på den design som för närvarande är vald för webbplatsen. På så sätt kan layouten användas av flera olika designer inom temat.

  • [!--$SCS_RENDER_INFO--]

    Detta expanderas till en skripttagg som innehåller information om sidhierarki och komponentåtergivning för sidan. Det ska placeras i sektionen <head> för layouten.

  • [!--$SCS_SITE_HEADER--]

    Det här expanderas till det värde för webbplatsens sidhuvud som anges i fältet Sidhuvud i egenskaperna för sökmotoroptimering. Webbplatsomfattande uppmärkning som du vill ska placeras på alla sidor kan anges här. Se Ange sökmotoregenskaper.

  • [!--$SCS_PAGE_HEADER--]

    Det här expanderas till värdet för sidhuvud som finns i fältet Sidhuvud under egenskaperna för Sidinställningar i webbplatsverktyget. Här kan du ange sidspecifik uppmärkning som du vill placera för sidan.

  • [!--$SCS_SITE_FOOTER--]

    Det här expanderas till det värde för webbplatsens sidfot som anges i fältet Sidfot i egenskaperna för sökmotoroptimering. Webbplatsomfattande uppmärkning som du vill ska placeras på alla sidor kan anges här. Se Ange sökmotoregenskaper.

Obs!:

Token kan även använda prefixet <!--$ och suffixet --> som avgränsare i stället för [!--$ och --].

När en webbplats är online ersätts följande token i länken med verkliga värden som är medvetna om den kontext där de används. Det här gör att länken kan fungera när en webbplats redigeras och på den publicerade webbplatsen när den är online.

  • /_sitescloud/ ersätts med /_sitesclouddelivery/

  • /_themes/ ersätts med /_themesdelivery/

Rutor är DIV-element i layouten som har värdet "scs-slot" i klassattributet. En ruta är där användare kan lägga till komponenter för att fylla i webbplatsinnehållet. Flera DIV-element kan betecknas som rutor, genom tilldelning av klassattributet "scs-slot". Varje ruta måste ha ett unikt id-attribut.

Obs!:

Rutor kan inte kapslas, men du kan antyda att de är kapslade genom att använda CSS för överlägg. Om du vill göra detta ska du använda en komponentgrupp eller sektionslayout. Se Skapa en sektionslayout.

Rutor som dessutom har klassattributvärdet "scs-responsive" förnyar sitt innehåll när webbläsarens visningsområde ändrar upplösning. Det här gör att rutor kan återges effektivt för en stor bordsdatorskärm eller en liten mobil enhet.

Den slutliga taggen <script> (rad 19 i exemplet) laddar återgivningskoden för Oracle Content Management. Den här koden ansvarar för att rita komponenterna på sidan, och gör även att anpassad kod kan få åtkomst till återgivnings-API:t. Utan den här taggen, <script>, kan sidor som baseras på layouten inte ändras i webbplatsverktyget.