Um layout define como o conteúdo é organizado em uma página do site. Diferentes layouts podem conter um número diferente de slots nomeados. Um slot é uma região que abrange a largura da página e pode conter um ou mais tipos de conteúdo.
Cada tema tem vários layouts de página. Consulte Sobre Temas.
Quando adiciona uma página a um site, você seleciona um layout a ser usado para essa página. Cada layout tem áreas na página — conhecidas como slots — nas quais você pode arrastar e soltar conteúdo. Você é quem decide qual conteúdo é colocado nesses slots. Pode ser qualquer coisa desde títulos, texto e divisores a multimédia, galerias e redes sociais.
Um layout contém construções HTML válidas, bem como marcação especial entendida pelo renderizador do Oracle Content Management. Um layout deve começar com uma instrução DOCTYPE para configurar o browser para renderizar a página em um modo compatível com os padrões; por exemplo: <!DOCTYPE html>
Essa instrução é exigida por determinados componentes para alcançar melhores resultados.
Este código de amostra apresenta um layout mínimo:
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>
Vários tokens são expandidos quando uma página é renderizada no browser.
[!--$SCS_THEME_NAME--]
Isso se expande para o nome do tema atualmente escolhido para o site. Usando esse token, é permitido copiar o tema, porque os URLs que utilizam esse token farão referência ao tema atual.
[!--$SCS_DESIGN_NAME--]
Isso se expande para o nome do design atualmente escolhido para o site. Isso permite que o layout seja usado por diversos designs dentro do tema.
[!--$SCS_RENDER_INFO--]
Isso se expande para uma tag de script que contém a hierarquia de páginas e informações de renderização de componentes da página. Isso deve ser colocado na seção <head>
do layout.
[!--$SCS_SITE_HEADER--]
Isso se expande para o valor de cabeçalho do site que é especificado no campo Cabeçalho das propriedades do SEO (Search Engine Optimization). A marcação geral do site que você deseja colocar em todas as páginas pode ser digitada aqui. Consulte Defina as Propriedades do Mecanismo de Pesquisa.
[!--$SCS_PAGE_HEADER--]
Isso é expandido para o valor do cabeçalho da página que é encontrado no campo Cabeçalho da Página, nas propriedades Definições da Página, no Site Builder. A marcação específica da página que você deseja colocar nessa página pode ser digitada aqui.
[!--$SCS_SITE_FOOTER--]
Isso se expande para o valor de rodapé do site que é encontrado no campo Rodapé das propriedades do SEO (Search Engine Optimization). A marcação geral do site que você deseja colocar em todas as páginas pode ser digitada aqui. Consulte Defina as Propriedades do Mecanismo de Pesquisa.
Nota:
Os tokens também podem usar o prefixo<!--$
e o sufixo -->
como delimitadores, no lugar de [!--$
e --]
.Quando um site está on-line, os seguintes tokens do link são substituídos por valores reais que estão cientes do contexto no qual eles estavam sendo utilizados. Isso permitirá que o link funcione quando um site estiver sendo editado e no site publicado quando ele estiver on-line.
/_sitescloud/
é substituído por /_sitesclouddelivery/
/_themes/
é substituído por /_themesdelivery/
Slots são elementos DIV no layout que têm o valor "scs-slot"
no atributo de classe. Um slot é onde os usuários podem adicionar componentes para preencher o conteúdo do site. Diversos elementos DIV podem ser designados como slots, designando o atributo de classe "scs-slot"
. Cada slot deve ter um atributo id
exclusivo.
Nota:
Não é possível aninhar slots, mas você pode dar a sugestão de que eles sejam usando CSS para substituí-los. Para fazer isso, use um grupo de componentes ou um layout de seção. Consulte Criar um Layout de Seção.Os slots que tiverem adicionalmente um valor de atributo de classe "scs-responsive"
atualizarão seus conteúdos conforme a janela de visualização do browser altera a resolução. Isso permite que os slots sejam renderizados responsivamente em um monitor de desktop grande ou em um dispositivo móvel pequeno.
A tag <script>
final (linha 19 no exemplo) carrega o código de renderização do Oracle Content Management. Esse código é responsável por desenhar os componentes na página e também permite que código personalizado acesse a API de Renderização. Sem essa tag <script>
, as páginas baseadas no layout não podem ser alteradas pelo Site Builder.