Un layout definisce le modalità di disposizione del contenuto in una pagina del sito. Layout differenti possono contenere un numero diverso di slot denominati. Uno slot è un'area che occupa la larghezza della pagina e può contenere uno o più tipi di contenuto.
Ogni tema dispone di diversi layout di pagina. Vedere Informazioni sui temi.
Quando si aggiunge una pagina a un sito, si seleziona un layout da usare per tale pagina. Ciascun layout contiene alcune aree sulla pagina, note come slot, in cui è possibile trascinare il contenuto selezionato. Il contenuto da inserire in questi slot dipende completamente dall'utente. Può essere un titolo, un testo e divisori per file multimediali, modelli e social media.
Un layout contiene costrutti HTML validi nonché markup speciale riconosciuto dal renderer di Oracle Content Management. Un layout deve iniziare con un'istruzione DOCTYPE in modo da configurare il browser per la visualizzazione della pagina in una modalità conforme agli standard, ad esempio: <!DOCTYPE html>. Questa istruzione è richiesta da certi componenti per ottenere i migliori risultati possibili.
Il codice di esempio riportato di seguito mostra un layout minimo.
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>
Quando una pagina viene visualizzata nel browser, vengono espansi vari token.
[!--$SCS_THEME_NAME--]
Questo token viene espanso per visualizzare il nome del tema scelto al momento per il sito. Utilizzandolo è possibile copiare il tema, perché gli URL che lo utilizzano faranno riferimento al tema corrente.
[!--$SCS_DESIGN_NAME--]
Questo token viene espanso per visualizzare il nome della progettazione scelta al momento per il sito. Consente l'utilizzo del layout da parte di più progettazioni all'interno del tema.
[!--$SCS_RENDER_INFO--]
Questo token viene espanso per visualizzare una tag di script che contiene le informazioni sulla gerarchia della pagina e sul rendering dei componenti per la pagina. Deve essere posizionato nella sezione <head> del layout.
[!--$SCS_SITE_HEADER--]
Questo token viene espanso per visualizzare il valore dell'intestazione del sito specificato nel campo Intestazione nelle proprietà SEO (Ottimizzazione del motore di ricerca, Search Engine Optimization). Il markup a livello di sito che si desidera inserire in tutte le pagine può essere immesso qui. Vedere Impostare le proprietà del motore di ricerca.
[!--$SCS_PAGE_HEADER--]
Questo token viene espanso per visualizzare il valore dell'intestazione che si trova nel campo Intestazione pagina nelle proprietà Impostazioni pagina in SiteBuilder. Il markup specifico di pagina che si desidera inserire per questa pagina può essere immesso qui.
[!--$SCS_SITE_FOOTER--]
Questo token viene espanso per visualizzare il valore del piè di pagina del sito specificato nel campo Piè di pagina nelle proprietà SEO (Search Engine Optimization). Il markup a livello di sito che si desidera inserire in tutte le pagine può essere immesso qui. Vedere Impostare le proprietà del motore di ricerca.
Nota:
Nei token è inoltre possibile utilizzare il prefisso<!--$ e il suffisso --> come delimitatori al posto di [!--$ e --].Quando un sito è in linea, i token seguenti vengono sostituiti con i valori reali dipendenti dal contesto in cui vengono utilizzati. Ciò consente al collegamento di funzionare quando un sito viene modificato e nel sito pubblicato quando è in linea.
/_sitescloud/ viene sostituito con /_sitesclouddelivery/
/_themes/ viene sostituito con /_themesdelivery/
Gli slot sono elementi DIV del layout con il valore "scs-slot" nell'attributo di classe. Uno slot è un'area in cui gli utenti possono aggiungere componenti per completare il contenuto del sito. Assegnando l'attributo di classe "scs-slot" è possibile progettare come slot più elementi DIV. Ogni slot deve disporre di un attributo id univoco.
Nota:
Gli slot non possono essere nidificati, ma è possibile suggerire che lo siano utilizzando fogli CSS per sovrapporli. Se si desidera eseguire questa operazione, utilizzare un gruppo di componenti o un layout sezione. Vedere Creare un layout sezione.Per gli slot che dispongono inoltre del valore attributo di classe "scs-responsive" il contenuto verrà aggiornato alla modifica della risoluzione del viewport del browser. In questo modo gli slot possono essere visualizzati su uno schermo desktop di grandi dimensioni o un dispositivo portatile di piccole dimensioni.
La tag <script> finale (riga 19 nell'esempio) carica il codice di rendering di Oracle Content Management. Si tratta del codice che consente di tracciare i componenti nella pagina e che rende accessibile l'interfaccia API di rendering al codice personalizzato. Senza la tag <script>, le pagine basate sul layout non possono essere modificate da SiteBuilder.