Układy — informacje podstawowe

Układ wyznacza sposób rozmieszczenia zawartości na stronie serwisu. Różne układy mogą zawierać różną liczbę nazwanych gniazd. Gniazdo jest obszarem rozciągającym się na szerokość strony, mogącym zawierać jeden lub więcej typów zawartości.

Każdy motyw zawiera kilka układów strony. Zob. Motywy — informacje podstawowe.

Dodając stronę do serwisu, wybiera się jej układ. Każdy układ wyznacza obszary na stronie — określane terminem "gniazdo" — do których można przeciągać zawartość. To, jaka zawartość znajdzie się w tych gniazdach, zależy wyłącznie od nas. Może to być wszystko: od tytułów, tekstów i separatorów do multimediów, galerii i mediów społecznościowych.

Układ zawiera poprawne konstrukcje w języku HTML oraz specjalny kod znacznikowy rozumiany przez moduł renderujący Oracle Content Management. Układ musi się zaczynać instrukcją DOCTYPE mającą na celu skonfigurowanie przeglądarki do renderowania w trybie zgodnym z obowiązującymi standardam; na przykład: <!DOCTYPE html> (ta instrukcja jest wymagana przez niektóre składniki, aby zostały uzyskane możliwie najlepsze wyniki).

Poniżej jest przedstawiony przykładowy kod minimalnego układu:

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>

Różne tokeny są rozwijane, gdy strona jest renderowana w przeglądarce.

  • [!--$SCS_THEME_NAME--]

    Ten token rozwija się do nazwy motywu obecnie wybranego dla serwisu. Używając tego tokenu, umożliwia się kopiowanie motywu, ponieważ korzystające z tego tokenu adresy URL będą się odwoływać do bieżącego motywu.

  • [!--$SCS_DESIGN_NAME--]

    Ten token rozwija się do nazwy konstrukcji obecnie wybranej dla serwisu. Używając tego tokenu, umożliwia się używanie układu przez wiele konstrukcji zawartych w motywie.

  • [!--$SCS_RENDER_INFO--]

    Ten token rozwija się do znacznika "script", w którym jest przechowywana informacje dotyczące hierarchicznej struktury strony oraz renderowania składników. Token ten powinien zostać umieszczony w sekcji <head> układu.

  • [!--$SCS_SITE_HEADER--]

    Token ten rozwija się do wartości nagłówka serwisu, określonej w polu "Header" we właściwościach SEO (Search Engine Optimization). Można tu wprowadzić kod znacznikowy, który ma być umieszczany na wszystkich stronach serwisu. Zob. Ustawienie właściwości dotyczących wyszukiwarek.

  • [!--$SCS_PAGE_HEADER--]

    Ten token rozwija się do wartości nagłówka (nagłówka strony) znalezionej w polu "Nagłówek strony" we właściwościach "Ustawienia strony" w konstruktorze serwisów. Można tu wprowadzić kod znacznikowy właściwy dla strony.

  • [!--$SCS_SITE_FOOTER--]

    Token ten rozwija się do wartości stopki serwisu, występującej w polu "Footer" we właściwościach SEO (Search Engine Optimization). Można tu wprowadzić kod znacznikowy, który ma być umieszczany na wszystkich stronach serwisu. Zob. Ustawienie właściwości dotyczących wyszukiwarek.

Uwaga:

Dla tokenów tych można także używać (jako ograniczników) prefiksu <!--$ i sufiksu -->, zamiast [!--$ i --].

Gdy serwis dzialą w trybie online, przedstawione poniżej tokeny (występujące w łączu) są zastępowane wartościami rzeczywistymi, zgodnymi z kontekstem, w którym są używane. Dzięki temu łącze może funkcjonować zarówno wtedy, gdy serwis jest edytowany, jak i w opublikowanym serwisie online.

  • /_sitescloud/ jest zastępowany przez /_sitesclouddelivery/

  • /_themes/ jest zastępowany przez /_themesdelivery/

Gniazda są to występujące w układzie elementy DIV, mające w atrybucie "class" wartość "scs-slot". Gniazdo jest to miejsce, w którym użytkownicy mogą dodawać składniki w celu wypełnienia zawartości serwisu. Na gniazda można wyznaczać wiele elementów DIV, przypisując im w atrybucie "class" wartość "scs-slot". Każde gniazdo musi mieć unikatowy atrybut id.

Uwaga:

Gniazd nie można zagnieżdżać, lecz można to sugerować, używając kodu CSS powodującego ich nakladanie się. Chcąc użyć takiego sposobu, trzeba użyć układu "grupa składników" lub układu "sekcja". Zob. Tworzenie układu sekcji.

Gniazda, dla których w atrybucie "class" została używa wartość "scs-responsive", będą odświeżały swoją zawartość, gdy ulegnie zmianie rozdzielczość portu widoku przeglądarki. Dzięki temu gniazda mogą być renderowane odpowiednio zarówno na dużych monitorach, jak i w małych urządzeniach mobilnych.

Końcowy znacznik <script> (w przykładzie linia nr 19) ładuje kod renderowania Oracle Content Management. Kod ten jest odpowiedzialny za rysowanie składników na stronie, a ponadto umożliwia dostęp kodu niestandardowego do Render API. Bez tego znacznika <script>, strony oparte na tym układzie nie mogłyby być zmieniane przez konstruktor serwisów.