La mise en page définit l'organisation du contenu sur une page de site. Les diverses mises en page peuvent contenir un nombre différent d'emplacements nommés. Un emplacement est une zone qui couvre la largeur de la page et comprend des types de contenu.
Chaque thème contient différentes mises en page. Reportez-vous à A propos des thèmes.
Lorsque vous ajoutez une page à un site, vous sélectionnez une mise en page à utiliser pour cette page. Chaque mise en page comprend des zones, appelées emplacements, vers lesquelles vous pouvez faire glisser du contenu. C'est vous qui choisissez entièrement le contenu à insérer dans ces emplacements. Il peut s'agir de titres, de texte, de séparateurs, d'éléments multimédias, de galeries, de réseaux sociaux, etc.
Une présentation contient des structures HTML valides et un balisage spécial que le programme d'affichage d'Oracle Content Management comprend. Une mise en page doit commencer par une instruction DOCTYPE pour configurer le navigateur de sorte qu'il affiche la page dans un mode conforme à la norme. Par exemple : <!DOCTYPE html>. Certains composants exigent cette instruction pour délivrer de meilleurs résultats.
Cet exemple de code présente une mise en page minimale :
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>
Différents jetons sont développés lorsqu'une page est affichée dans le navigateur.
[!--$SCS_THEME_NAME--]
Ce jeton développe le nom du thème choisi pour le site. Il permet de copier le thème, car les URL qu'il utilise font référence au thème en cours.
[!--$SCS_DESIGN_NAME--]
Ce jeton développe le nom de la conception choisie pour le site. Il permet d'utiliser la mise en page dans plusieurs conceptions au sein du thème.
[!--$SCS_RENDER_INFO--]
Ce jeton développe une balise de script qui contient les informations sur la hiérarchie de la page et l'affichage des composants sur la page. Il doit être placé dans la section <head> de la mise en page.
[!--$SCS_SITE_HEADER--]
Ce jeton développe la valeur d'en-tête de site indiquée dans le champ d'en-tête des propriétés d'optimisation pour les moteurs de recherche (SEO). Vous pouvez y saisir le balisage au niveau du site que vous souhaitez placer sur toutes les pages. Reportez-vous à Définition des propriétés de moteur de recherche.
[!--$SCS_PAGE_HEADER--]
Ce jeton développe la valeur d'en-tête de page trouvée dans le champ En-tête de page des propriétés des paramètres de page dans le générateur de site. Vous pouvez y saisir le balisage propre à la page que vous souhaitez placer pour cette page.
[!--$SCS_SITE_FOOTER--]
Ce jeton développe la valeur de pied de page de site indiquée dans le champ de pied de page des propriétés d'optimisation pour les moteurs de recherche (SEO). Vous pouvez y saisir le balisage au niveau du site que vous souhaitez placer sur toutes les pages. Reportez-vous à Définition des propriétés de moteur de recherche.
Remarque :
Les jetons peuvent également employer le préfixe<!--$ et le suffixe --> en tant que délimiteurs, au lieu de [!--$ et --].Lorsqu'un site est en ligne, les jetons suivants dans le lien sont remplacés par des valeurs réelles tenant compte du contexte dans lequel elles sont utilisées. Ainsi, le lien fonctionne à la fois lorsqu'un site est en cours de modification et lorsqu'il est publié en ligne.
/_sitescloud/ est remplacé par /_sitesclouddelivery/
/_themes/ est remplacé par /_themesdelivery/
Les emplacements sont des éléments DIV de la présentation qui affichent la valeur "scs-slot" dans l'attribut de classe. Un emplacement est une zone dans laquelle les utilisateurs peuvent ajouter des composants afin de remplir le contenu du site. Vous pouvez désigner plusieurs éléments DIV en tant qu'emplacements en leur affectant l'attribut de classe "scs-slot". Chaque emplacement doit avoir un attribut id unique.
Remarque :
Les emplacements ne peuvent pas être imbriqués, mais vous pouvez faire comme si c'était le cas, en utilisant le fichier CSS pour les recouvrir. Pour ce faire, utilisez un groupe de composants ou une présentation de section. Reportez-vous au manuel Création d'une présentation de section.Les emplacements qui possèdent en outre une valeur d'attribut de classe "scs-responsive" actualisent leur contenu lorsque la résolution de la lucarne de navigateur est modifiée. Ainsi, les emplacements sont affichés de façon réactive sur un grand appareil de bureau ou un petit appareil mobile.
La balise <script> finale (ligne 19 de cet exemple) charge le code d'affichage d'Oracle Content Management. Ce code dessine les composants sur la page et permet au code personnalisé d'accéder à l'API d'affichage. Sans cette balise <script>, les pages reposant sur la mise en page ne peuvent pas être modifiées par le générateur de site.