Tutorial: Adicionar layout de página personalizado ao seu site

Ao criar novas páginas da Web usando o espaço de trabalho Páginas, é possível escolher entre os layouts de página fornecidos. Em alguns casos, talvez você queira criar um layout de página personalizado para exibir informações em um determinado formato ou fornecer uma interface de usuário especializada.

Neste tutorial, você saberá como criar um layout de página personalizado usando Liquid.

Nosso cenário de exemplo é criar um modelo de duas colunas simples que usa o menu principal do site como navegação do lado esquerdo, com o conteúdo da página à direita.

Veja as seguintes etapas e recursos que serão criados para fornecer um layout de página personalizado:

• Criaremos um modelo da Web básico comum com código personalizado para estabelecer o layout básico da página.
• Criaremos um segundo modelo da Web com código adicional para demonstrar os recursos modulares dos modelos da Web.
• Também criaremos um registro de modelo de página que faça referência ao modelo da Web que configurará como o layout da página será renderizado no site.
• Por fim, criaremos uma página da Web usando o layout de página personalizado.

Pré-requisitos

• Uma assinatura ou uma avaliação do Power Pages. Baixe uma avaliação do Power Pages aqui.
• Um site do Power Pages criado. Crie um site do Power Pages
• Conhecimento básico de HTML e Liquid.

Etapa 1: Criar um Modelo da Web e escrever o código do modelo do Líquido

Primeiro, criaremos o modelo da Web e escreveremos o código do modelo do Liquid. Provavelmente reutilizaremos alguns elementos comuns deste modelo em modelos futuros. Assim, criaremos um modelo base comum que se estenderá com nosso modelo específico. Nosso modelo base fornecerá links de trilha, nosso título/cabeçalho de página e definirá nosso layout de duas colunas.

1. Vá para Power Pages.

2. No estúdio de design, escolha ... e, depois, selecione Gerenciamento do Portal. Você deverá usar o aplicativo Gerenciamento do Portal para criar um registro de modelo da Web e inserir o código personalizado.

   

3. No aplicativo Gerenciamento do Portal, role para a seção Conteúdo e selecione Modelos da Web.

4. Na tela Modelos da Web Ativos, selecione Novo.

5. Nomeie o modelo da Web como Layout de duas colunas.

   

6. Cole o seguinte código no campo Fonte.

   Layout de duas colunas (modelo da Web)

   <div class=container>
     <div class=page-heading>
       <ul class=breadcrumb>
         {% for crumb in page.breadcrumbs -%}
           <li>
             <a href={{ crumb.url }}>{{ crumb.title }}</a>
           </li>
         {% endfor -%}
         <li class=active>{{ page.title }}</li>
       </ul>
       <div class=page-header>
         <h1>{{ page.title }}</h1>
       </div>
     </div>
     <div class=row>
       <div class=col-sm-4 col-lg-3>
         {% block sidebar %}{% endblock %}
       </div>
       <div class=col-sm-8 col-lg-9>
         {% block content %}{% endblock %}
       </div>
     </div>
   </div>
   

7. Selecione Salvar.

Etapa 2: Criar um novo Modelo da Web que estenda nosso modelo de layout base

Vamos criar um modelo da Web que lerá o registro de navegação da página da Web associada (veja abaixo). Também estenderemos o modelo base que criamos na etapa anterior. Os modelos da Web podem ser usados como componentes reutilizáveis ao criar sites avançados.

1. No aplicativo Gerenciamento do Portal, role para a seção Conteúdo e selecione Modelos da Web.

2. Na tela Modelos da Web Ativos, selecione Novo.

3. Nomeio o modelo da Web como Navegação à esquerda dos links da Web.

   

   Navegação à direita dos links da Web (Modelo da Web)

   Observe como o código usa a palavra-chave extends do Liquid para incorporar o modelo de layout base.

   {% extends 'Two Column Layout' %}
   
   {% block sidebar %}
     {% assign weblinkset_id = page.adx_navigation.id %}
     {% if weblinkset_id %}
       {% assign nav = weblinks[page.adx_navigation.id] %}
       {% if nav %}
         <div class=list-group>
           {% for link in nav.weblinks %}
             <a class=list-group-item href={{ link.url }}>
               {{ link.name }}
             </a>
           {% endfor %}
         </div>
       {% endif %}
     {% endif %}
   {% endblock %}
   
   {% block content %}
     <div id="mainContent" class = "wrapper-body" role="main">
       {% include 'Page Copy' %}
     </div>
   {% endblock %}
   

Etapa 3: Criar um novo modelo de página baseado no modelo da Web

Nessa etapa, criaremos um novo modelo baseado no modelo da Web que criamos na etapa anterior. O modelo de página é necessário para que nosso layout de página personalizado seja uma opção que possa ser selecionada ao criar uma nova página da Web.

1. No aplicativo Gerenciamento do Portal, role para a seção Site e selecione Modelos da Página.

2. Na tela Modelos de Página Ativos, selecione Novo.

3. Preencha os campos.

   Campo	Valor
   Name	Digite um nome.
   Site da Web	Selecione o site ao qual o tema será aplicado. Coloque o cursor no campo e pressione Enter no teclado para exibir uma lista de opções disponíveis.
   Type	Escolha Modelo da Web
   Modelo da Web	Selecione Navegação Esquerda de Links da Web (ou o nome que você deu ao seu modelo da Web).
   Usar o Cabeçalho e Rodapé do Site	Marcado.
   É padrão	Não marcado.
   Nome da Tabela	Nenhum selecionado.
   Description	Uma descrição do seu modelo de página

   

4. Selecione Salvar.

Etapa 4: Criar uma página da Web para exibir o conteúdo

1. No estúdio de design, selecione Sincronizar. Isso trará atualizações feitas no aplicativo Gerenciamento do Portal para o estúdio de design.

2. No espaço de trabalho Páginas, selecione + Página.

3. Na caixa de diálogo Adicionar uma página:

   1. Insira um Nome de página
   2. Em Layouts personalizados, selecione seu layout de página personalizado.
   3. Selecione Adicionar.

   

4. Adicione mais conteúdo às seções editáveis da página.

Configuração de página adicional

Neste exemplo, precisaremos vincular o registro de navegação à página de conteúdo para que nosso código personalizado renderize o menu na navegação à esquerda.

1. No estúdio de design, escolha ... e, depois, selecione Gerenciamento do Portal. Você usará o aplicativo Gerenciamento do Portal para adicionar configurações adicionais à sua página.

2. No aplicativo Gerenciamento do Portal, role para a seção Conteúdo e selecione Páginas da Web.

3. Localize e abra a página que você criou anteriormente no espaço de trabalho Páginas. Isso abrirá a página da Web raiz. Precisaremos fazer nossas alterações na página de conteúdo localizado relacionada.

4. Role para baixo e na seção Conteúdo Localizado, selecione a página da Web de conteúdo localizado.

   

   Nota

   Se houver vários idiomas provisionados, você deverá atualizar cada página localizada.

5. Vá para a seção Diversos e selecione o conjunto de links da Web que deseja exibir no campo Navegação.

   

6. Salve suas alterações e volte para o estúdio de design.

7. Selecione Visualizar e Área de Trabalho para exibir sua página personalizada com a navegação lateral implementada.

   

Confira também

• Criar um layout de página personalizado
• Visão geral do Liquid