Criar um Modelo de Site do Zero ou Usando um Modelo de Design de Website

A arquitetura aberta do Oracle Content Management significa poder usar um trabalho pronto em outras estruturas de codificação, como Base ou Bootstrap. Com algumas alterações, você pode transformar um modelo Bootstrap em tema e torná-lo parte de um modelo do Oracle Content Management.

Processo Básico

Esta é uma visão geral das etapas descritas com detalhes nas seções a seguir:

Pré-requisitos

Deixe o aplicativo para desktop Oracle Content Management configurado e em execução para sincronizar pastas e arquivos com seu computador local.
Faça download das pastas, dos arquivos e do conteúdo do tema do modelo Bootstrap para seu computador local e deixe-os prontos para uso.

Criar um Site

Crie um site com base em um modelo inicial do Oracle Content Management:

Na navegação lateral, clique em Sites.

Uma lista de sites existentes é exibida.
Clique em Criar.
Na caixa de diálogo Criar Site, selecione Modelo Iniciante JET ou Modelo Iniciante para usar como base do site.
Na caixa de diálogo, digite um nome para o site. Esse nome é usado no URL do site. Você pode usar letras, números, sublinhados (_) e hifens (-). Se você inserir um espaço, ele será automaticamente substituído por um hífen.

Não use os seguintes nomes para modelos, temas, componentes, sites ou páginas de sites: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Embora você possa usar os seguintes nomes para as páginas do site, não os use para modelos, temas, componentes ou sites: documents, sites.
Nota:

O caminho de um URL do site do Oracle Content Management distingue maiúsculas de minúsculas. A questão de maiúsculas/minúsculas na consulta ou em strings de fragmentos é gerenciada pelos desenvolvedores em código personalizado.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Como opção, informe uma descrição do site.
Quando estiver pronto, clique em Criar.

Uma barra de andamento mostra o nome do novo site e o status de criação. Quando o site é criado, o nome aparece na lista. Seu status inicial é off-line.

Para encontrar rapidamente o site recém-criado na lista, classifique a lista por Última Atualização. O site recém-criado aparecerá no topo da lista.

Sincronizar a Pasta do Tema

Quando você cria um site partindo de um modelo inicial, uma cópia do tema desse modelo é criada e recebe o nome do site seguido pelo nome do tema. Por exemplo, o tema para My_New_Site é My_New_SiteTheme.

Use o aplicativo de desktop para sincronizar a pasta e os arquivos do tema do site com seu computador local. Consulte Conceitos básicos de sincronização em Colaborando em Documentos com o Oracle Content Management.

Você deverá ver agora a hierarquia e os arquivos da pasta do tema modelo em seu desktop local. Veja um exemplo:

    theme_name
        assets
            css
                main.css
            js
                topnav.js
        designs
            default
                design.css
                design.json
                facebook.png
                googleplus.png
                linkedin.png
                twitter.png
                youtube.pgn
        layouts
            index.html
        responsepages
            404.html
        _folder.json
        _folder_icon.png
        components.json
        viewport.json

Configurar o Tema Básico

Copie esses arquivos Bootstrap nas pastas do tema sincronizado em seu desktop local para substituir os arquivos existentes.
- Arquivos html vão para a pasta nome_do_tema/layouts
- Arquivos css vão para a pasta nome_do_tema/assets/css
- Arquivos js vão para a pasta nome_do_tema/assets/js
- Arquivos image vão para a pasta nome_do_tema/assets/images, que podem ser agrupados em subpastas com imagens para plano de fundo, rodapé, pessoas etc.
Modifique os arquivos html na pasta layout para atualizar caminhos relativos e adicionar elementos necessários. No caso de um tema Bootstrap típico, haverá muitos caminhos relativos para a pasta /assets; por isso, modifique-os para que apontem para a pasta do tema.

Corrija os caminhos das pastas css, js e images a serem usadas:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Nota:
Após a conclusão dessa etapa, a parte _scs_theme_root será ajustada automaticamente ao ambiente em que o tema está sendo usado.
Há três requisitos para cada layout do Oracle Content Management:
1. Inclua as seguintes tags na tag <head> do arquivo html:
  - 
  - 
  - 
2. Inclua o script de renderização no fim dos arquivos de layout, precisamente dentro da tag <body>. Ambos os caminhos são ajustados automaticamente no Site Builder e nos ambientes de runtime.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Inclua as seguintes tags após a inclusão do arquivo renderer.js:
  - 
  -

Verifique se os arquivos modificados do tema estão sincronizados com o site no Oracle Content Management.

Atualizar as Páginas do Site

Ao abrir o site no Site Builder, você inicialmente verá as páginas que estão no site padrão. É possível excluir as páginas que você não deseja e trocar o layout nas páginas que deseja manter por um dos novos layouts.

Na navegação lateral, clique em Sites.

Uma lista de sites existentes é exibida.
Selecione o site e escolha Abrir no menu acionado com o botão direito do mouse ou clique no na barra de ações.
Digite um nome para a atualização e uma descrição opcional; em seguida, clique em Criar.

Para o nome de atualização, você pode usar letras, números, sublinhados (_) e hífens (-). Se você inserir um espaço, ele será automaticamente substituído por um hífen.

Caso já existam atualizações no site, selecione uma na lista e clique em .
O Site Builder é aberto no modo de visualização. Para fazer alterações ou usar as opções de navegação na barra lateral, verifique se o controle de edição está definido como Editar.
Para editar uma página específica, escolha a página usando a árvore do site na barra lateral ou a própria navegação do site.
Para remover uma página indesejada, selecione-a e clique em .
Para adicionar uma nova página, clique em Adicionar Página. Você pode reposicionar a página na árvore do site arrastando-a e soltando-a.
Para alterar o layout associado a uma página, escolha a página na árvore do site e clique em para exibir as definições da página.

Vá para o campo Layout da Página e selecione um layout diferente no menu. O número e o tipo de layouts de páginas depende do tema associado ao seu site.
Clique em Salvar para salvar as alterações na atualização vigente. Você pode continuar trabalhando na atualização vigente ou criar novas atualizações, se necessário.

Atualizar Navegação

Quando você visualiza a navegação no site, ela não corresponde à hierarquia atual por causa da navegação codificada no layout do tema Bootstrap.

Atualize a navegação para substituir o código de codificação no tema Bootstrap pelo código gerado dinamicamente da hierarquia do site.

Edite suas cópias locais sincronizadas dos arquivos do tema.

Remova o código de navegação codificada dos layouts. Veja um exemplo da navegação codificada que teria de ser removida de um tema Bootstrap típico. Esta é uma seção de cabeçalho típica, com o logotipo, as partes de 'Alternar Navegação' do menu 'Hambúrguer' quando a página é muito estreita (a parte responsiva) e a navegação de página codificada das outras páginas.

<header id="header" class="header navbar-fixed-top">  
        <div class="container">       
            <h1 class="logo">
                <a href="index.html"><span class="text">Velocity</span></a>
            </h1><!--//logo-->
            <nav class="main-nav navbar-right" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button><!--//nav-toggle-->
                </div><!--//navbar-header-->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active nav-item"><a href="index.html">Home</a></li>
                        <li class="nav-item"><a href="features.html">Features</a></li>
                        <li class="nav-item"><a href="pricing.html">Pricing</a></li>
                        <li class="nav-item dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="download.html">Download Apps</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog-single.html">Blog Single</a></li>
                                <li><a href="blog-category.html">Blog Category</a></li>
                                <li><a href="blog-archive.html">Blog Archive</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>                    
                            </ul>                            
                        </li><!--//dropdown-->                         
                        <li class="nav-item"><a href="login.html">Log in</a></li>
                        <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li>
                    </ul><!--//nav-->
                </div><!--//navabr-collapse-->
            </nav><!--//main-nav-->                     
        </div><!--//container-->
    </header><!--//header-->

Escreva o código JavaScript para percorrer as informações da estrutura do site e gerar o código de navegação; em seguida, inclua o código JavaScript nos layouts, por exemplo:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Modifique a saída exata do arquivo topnav.js para corresponder à marcação esperada em seu CSS específico.

Atualizar os Layouts do Site

Nesse ponto, o site está funcionando, mas não tem áreas editáveis (slots) nos layouts.

Localize ou adicione um elemento DIV em um layout e designe-o como slot.

Slots são elementos DIV no layout que têm o valor "scs-slot" no atributo de classe. Cada slot deve ter um atributo id exclusivo. Por exemplo:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Para fazer com que o slot se ajuste automaticamente ao tamanho da janela de visualização do browser, inclua o atributo de classe "scs-responsive".
Repita esta etapa conforme necessário para criar slots adicionais no layout atual ou em outros.

Publicar o Site

Depois de concluir e salvar todas as alterações em um site, Publique-o.

A publicação do site assume todas as alterações feitas na presente atualização e mescla-as na base, tornando o que estava na atualização no novo site base.

Criar o Novo Modelo

Agora você tem um site funcional com um tema associado, e assim possa transformar em um modelo e compartilhá-lo com outras pessoas para que elas possam criar sites com base nele.

Na navegação lateral do Oracle Content Management, clique em Desenvolvedor.
Clique em Exibir Todos os Modelos.
Clique em Criar e escolha Com base no site existente.
Selecione o novo site que você criou usando o modelo inicial e o modelo Bootstrap.
Digite um nome para o novo modelo e clique em Criar.
Para empacotar o modelo para uso com outras instâncias do Oracle Content Management, selecione o modelo e escolha a opção de menu Exportar para criar um arquivo .zip que possa ser baixado por download.