Sobre Layouts

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.