Informationen zu Layouts

Ein Layout definiert, wie Inhalt auf einer Siteseite angeordnet wird. Unterschiedliche Layouts können eine unterschiedliche Anzahl von benannten Slots enthalten. Ein Slot ist ein Bereich, der über die Breite der Seite geht und ein oder mehrere Inhaltstypen enthalten kann.

Jedes Theme verfügt über verschiedene Seitenlayouts. Siehe Informationen zu Themes.

Wenn Sie eine Seite zu einer Site hinzufügen, wählen Sie ein Layout für diese Seite. Jedes Layout verfügt über Bereiche auf der Seite (sogenannte Slots), in die Sie Inhalt per Drag-and-Drop verschieben können. Sie alleine entscheiden, welchen Inhalt Sie in diese Slots setzen möchten. Das kann von Titeln, Text und Trennlinien bis zu Multimedia, Galerien und Social Media reichen.

Ein Layout enthält gültige HTML-Konstrukte sowie spezielles Markup, das der Oracle Content Management-Renderer interpretieren kann. Ein Layout muss mit einer DOCTYPE-Anweisung beginnen, um den Browser für das Rendering der Seite in einem standardkonformen Modus zu konfigurieren. Beispiel: <!DOCTYPE html>. Diese Anweisung ist für bestimmte Komponenten erforderlich, um die besten Ergebnisse zu erzielen.

Dieser Beispielcode zeigt ein minimales 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>

Mehrere Token werden beim Rendern einer Seite im Browser eingeblendet.

  • [!--$SCS_THEME_NAME--]

    Dieses Token wird als Name des derzeit für die Site ausgewählten Themes eingeblendet. Über dieses Token kann das Theme kopiert werden, da URLs, die dieses Token verwenden, das aktuelle Theme referenzieren.

  • [!--$SCS_DESIGN_NAME--]

    Dieses Token wird als Name des derzeit für die Site ausgewählten Designs eingeblendet. So kann das Layout von mehreren Designs im Theme verwendet werden.

  • [!--$SCS_RENDER_INFO--]

    Dieses Token wird als Skripttag eingeblendet, das die Seitenhierarchie und die Komponentenrenderinginformationen für die Seite enthält. Dieses Tag muss im <head>-Abschnitt des Layouts abgelegt werden.

  • [!--$SCS_SITE_HEADER--]

    Dieses Token wird als Siteheaderwert eingeblendet, der im Headerfeld in den SEO-Eigenschaften angegeben wird. Hier können Sie siteweites Markup eingeben, das auf allen Seiten abgelegt werden soll. Siehe Suchmaschineneigenschaften festlegen.

  • [!--$SCS_PAGE_HEADER--]

    Dieses Token wird als Seitenheaderwert eingeblendet, den Sie in Sitebuilder in den Eigenschaften unter "Seiteneinstellungen" im Feld "Seitenheader" finden. Hier können Sie seitenspezifisches Markup eingeben, das auf dieser Seite abgelegt werden soll.

  • [!--$SCS_SITE_FOOTER--]

    Dieses Token wird als Site-Footer-Wert eingeblendet, der im Footer-Feld in den SEO-Eigenschaften angegeben wird. Hier können Sie siteweites Markup eingeben, das auf allen Seiten abgelegt werden soll. Siehe Suchmaschineneigenschaften festlegen.

Hinweis:

Die Token können auch das Präfix <!--$ und das Suffix --> als Trennzeichen anstelle von [!--$ und --] verwenden.

Wenn eine Site online ist, werden die folgenden Token im Link durch echte Werte je nach dem Kontext, in dem sie verwendet werden, ersetzt. So kann der Link funktionieren, wenn eine Site bearbeitet wird, sowie in der veröffentlichten Onlinesite.

  • /_sitescloud/ wird durch /_sitesclouddelivery/ ersetzt

  • /_themes/ wird durch /_themesdelivery/ ersetzt

Slots sind DIV-Elemente im Layout mit dem Wert "scs-slot" im Klassenattribut. In einem Slot können Benutzer Komponenten hinzufügen, um den Siteinhalt bereitzustellen. Sie können mehrere DIV-Elemente als Slots kennzeichnen, indem Sie das Klassenattribut "scs-slot" zuweisen. Jeder Slot muss ein eindeutiges id-Attribut aufweisen.

Hinweis:

Slots können nicht verschachtelt werden, Sie können sie aber mit CSS überlagern. Verwenden Sie dazu eine Komponentengruppe oder ein Abschnittslayout. Siehe Abschnittslayout erstellen.

Slots mit dem zusätzlichen Klassenattributwert "scs-responsive" aktualisieren den Inhalt, wenn die Auflösung des Browser-Viewports geändert wird. So können Slots responsiv für eine große Desktopanzeige oder ein kleines Mobilgerät gerendert werden.

Das letzte <script>-Tag (Zeile 19 im Beispiel) lädt den Oracle Content Management-Renderingcode. Dieser Code zeichnet die Komponenten auf der Seite und ermöglicht, dass benutzerdefinierter Code auf die Render-API zugreift. Ohne dieses <script>-Tag können auf dem Layout basierende Seiten nicht von Sitebuilder geändert werden.