Acerca de Disposições

Uma disposição define a forma como o conteúdo é organizado numa página do site. Diferentes disposições podem conter um número diverso de slots nomeados. Um slot é uma área que abrange a largura da página e pode conter um ou vários tipos de conteúdo.

Cada tema tem várias disposições de páginas. Consulte Acerca de Temas.

Quando acrescenta uma página a um site, seleciona uma disposição a utilizar para essa página. Cada disposição tem áreas na página — conhecidas como slots — para onde pode arrastar e largar conteúdo. O conteúdo colocado nestes slots fica inteiramente ao seu critério. O tipo de conteúdo pode ser variado, desde títulos, texto e divisores a elementos de multimédia, galerias e redes sociais.

Uma disposição contém estruturas de código HTML válidas, bem como markup especial que o renderizador do Oracle Content Management compreende. Uma disposição deve começar por uma instrução DOCTYPE de modo a configurar o browser para apresentar a página num modo compatível com as normas; por exemplo: <!DOCTYPE html>. Esta instrução é requerida por determinados componentes para obter melhores resultados.

Este código de exemplo mostra uma disposição mínima:

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 símbolos são expandidos quando uma página é renderizada no browser.

  • [!--$SCS_THEME_NAME--]

    Expande-se para o nome do tema escolhido atualmente para o site. A utilização deste token permite que o tema seja copiado, porque os URLs que utilizam este token irão referenciar o tema atual.

  • [!--$SCS_DESIGN_NAME--]

    Expande-se para o nome do design escolhido atualmente para o site. Isto permite que a disposição seja utilizada por vários designs no tema.

  • [!--$SCS_RENDER_INFO--]

    Expande-se para um identificador script que contém as informações de renderização da hierarquia da página e do componente para a página. Deve ser colocado na secção <head> da disposição.

  • [!--$SCS_SITE_HEADER--]

    Expande-se para o valor do cabeçalho do site que é especificado no campo Cabeçalho nas propriedades de Otimização do Mecanismo de Pesquisa (SEO). A markup global do site que pretende colocar em todas as páginas pode ser introduzida aqui. Consulte Definir Propriedades do Mecanismo de Pesquisa.

  • [!--$SCS_PAGE_HEADER--]

    Isto expande para o valor do cabeçalho da página que é encontrado no campo Cabeçalho da Página, nas propriedades das Definições da Página, no Criador de Sites. A markup específica da página que pretende colocar para esta página pode ser introduzida aqui.

  • [!--$SCS_SITE_FOOTER--]

    Expande-se para o valor do rodapé do site encontrado no campo Rodapé nas propriedades de Otimização do Mecanismo de Pesquisa (SEO). A markup global do site que pretende colocar em todas as páginas pode ser introduzida aqui. Consulte Definir Propriedades do Mecanismo de Pesquisa.

Nota:

Os tokens também podem utilizar o prefixo <!--$ e o sufixo --> como delimitadores, em vez de [!--$ e --].

Quando um site está online, os tokens seguintes na ligação são substituídos por valores reais que estão ao corrente do contexto em que estão a ser utilizados. Isto permite que ligação funcione quando um site está a ser editado e no site publicado quando este está online.

  • /_sitescloud/ é substituído por /_sitesclouddelivery/

  • /_themes/ é substituído por /_themesdelivery/

Os slots são elementos DIV na disposição que têm o valor "scs-slot" no atributo da classe. Um slot é uma área onde os utilizadores podem acrescentar componentes para preencher o conteúdo do site. É possível designar vários elementos DIV como slots atribuindo o atributo da classe "scs-slot". Cada slot deve ter um atributo id exclusivo.

Nota:

Os slots não podem ser encadeados, mas pode sugerir que são ao utilizar CSS para os sobrepor. Se pretender fazê-lo, utilize um grupo de componentes ou uma disposição de secção. Consulte Criar uma Disposição de Secção.

Os slots que adicionalmente têm um valor de atributo da classe de "scs-responsive" irão renovar o respetivo conteúdo conforme a delimitação do browser altera a resolução. Isto permite que os slots sejam renderizados de modo responsivo para uma renderização de ambiente de trabalho grande ou um dispositivo móvel pequeno.

O identificador <script> final (linha 19 no exemplo) carrega o código de renderização do Oracle Content Management. Este código é responsável por desenhar os componentes na página e também permite que o código customizado aceda à API de Apresentação. Sem este identificador <script>, as páginas baseadas na disposição não podem ser alteradas pelo Criador de Sites.