Om layouts

Et layout definerer, hvordan indholdet arrangeres på en siteside. Forskellige layouts kan indeholde et forskelligt antal navngivne pladser. En plads er et område i hele sidens bredde, som kan indeholde en eller flere typer indhold.

Alle temaer har flere sidelayouts. Se Om temaer.

Når du føjer en side til et site, vælger du et layout, som skal bruges til siden. Alle layouts har områder på siden, der kaldes pladser, som du kan trække og placere indhold på. Hvilket indhold, der skal placeres på disse pladser, er helt op til dig. Det kan være alt lige fra titler, tekst og opdelere til multimedier, gallerier og sociale medier.

Et layout indeholder gyldige HTML-konstruktioner og special-markup, der kan fortolkes af Oracle Content Management-gengivelsen. Et layout skal begynde med en DOCTYPE-sætning for at konfigurere browseren til at gengive siden i en standardkompatibel tilstand, for eksempel: <!DOCTYPE html>. Denne sætning er påkrævet i visse komponenter for at opnå de bedste resultater.

Denne eksempelkode viser et minimalt 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>

Forskellige tokens udvides, når en side gengives i browseren.

  • [!--$SCS_THEME_NAME--]

    Det udvider navnet på det tema, der p.t. er valgt for sitet. Med dette token kan temaet kopieres, da URL'er, som bruger dette token, vil referere til det aktuelle tema.

  • [!--$SCS_DESIGN_NAME--]

    Det udvider navnet på det design, der p.t. er valgt for sitet. Det gør det muligt for layoutet at blive brugt af flere design i temaet.

  • [!--$SCS_RENDER_INFO--]

    Dette udvides til et script-tag, som indeholder oplysninger om sidehierarkiet og komponentgengivelsen af siden. Det skal placeres i sektionen <head> af layoutet.

  • [!--$SCS_SITE_HEADER--]

    Det udvides til sites sidehovedværdi, som er angivet i feltet Sidehoved i egenskaberne for søgemaskineoptimering. Markup, der omfatter hele sitet, og som du vil placere på alle sider, kan indtastes her. Se Angive egenskaber for søgemaskine.

  • [!--$SCS_PAGE_HEADER--]

    Dette udvides til den sideoverskriftsværdi, der findes i feltet Sideoverskrift i egenskaberne for Sideindstillinger i Site Builder. Sidespecifik markup, som du vil placere på denne side, kan indtastes her.

  • [!--$SCS_SITE_FOOTER--]

    Det udvides til sitets sidefodsværdi, som er angivet i feltet Sidefod i egenskaberne for søgemaskineoptimering. Markup, der omfatter hele sitet, og som du vil placere på alle sider, kan indtastes her. Se Angive egenskaber for søgemaskine.

Bemærk:

Tokens kan også bruge præfikset <!--$ og suffikset --> som separatorer i stedet for [!--$ og --].

Når et site er online, erstattes følgende tokens i linket med rigtige værdier, der registrerer den kontekst, som de bruges i. Det gør det muligt for linket at fungere, når et site redigeres, og på det publicerede site, når det er online.

  • /_sitescloud/ erstattes af /_sitesclouddelivery/

  • /_themes/ erstattes af /_themesdelivery/

Pladser er DIV-tags i layoutet, som har værdien "scs-slot" i klasseattributten. En plads er det sted, hvor brugerne kan tilføje komponenter for at udfylde siteindholdet. Du kan angive flere DIV-elementer ved at tildele klasseattributten "scs-slot". Hver plads skal have en entydig id-attribut.

Bemærk:

Pladser kan ikke være indlejrede, men du kan give indtryk af, at de er, ved at bruge CSS til at overlejre dem. Det kan du gøre ved at bruge en komponentgruppe eller et sektionslayout. Se Oprette et sektionslayout.

Pladser, der også har klasseattributværdien "scs-responsive", opfrisker deres indhold, når browserens viewport skifter opløsning. Det gør det muligt at gengive pladser, så de passer til en stor computerskærm eller en lille mobilenhed.

Det endelige <script>-tag (linje 19 i eksemplet) indlæser Oracle Content Management-gengivelseskoden. Denne kode har ansvaret for at tegne komponenterne på siden, og den giver også tilpasset kode adgang til gengivelses-API'en. Uden dette <script>-tag kan sider, der er baseret på layoutet, ikke ændres af Site Builder.