Partilhar via

Esquemas de página personalizados no Power Pages

  • Artigo

Quando cria uma nova página Web com o estúdio de design, tem de selecionar um esquema de página. A área de trabalho Páginas fornece um conjunto de esquemas de página pré-configurados.

Selecionar o esquema de página.

Também pode criar os seus próprios esquemas de página personalizados utilizando HTML, Liquid, JavaScript e CSS.

Gorjeta

Criámos uma série de tutoriais e vídeos para que saiba como utilizar o Power Pages e como criar um esquema de página personalizado. Para mais informações, aceda a Tutorial: Adicionar um esquema de página personalizado.

Criar um esquema de página personalizado

Para criar uma página personalizada, precisa de seguir estes passos:

  • Crie um modelo Web que contenha o seu código personalizado.
  • Criar e configurar um modelo de página correspondente que aparecerá como um esquema de página personalizado ao criar novas páginas Web na área de trabalho Páginas.

Criar um modelo Web

O modelo Web irá conter o código para o seu esquema. O código do modelo Web pode ser uma combinação de Liquid, HTML, CSS e JavaScript.

Os modelos Web podem ser incluídos noutros conteúdos ou combinados com outros modelos para criar um sistema modular de modelos ao criar aplicações Web.

  1. Aceder a Power Pages.

  2. No estúdio de design, escolha ... e, em seguida, selecione Gestão do Portal. Terá de utilizar a aplicação Gestão do Portal para criar um registo de modelo Web e introduzir no código personalizado.

    A seleção das reticências direciona-o para um menu onde pode escolher a aplicação Gestão do Portal.

  3. Na aplicação Gestão do Portal, desloque-se para a secção Conteúdo e selecione Modelos Web.

  4. No ecrã Modelos Web Ativos, selecione Novo.

    A opção + Novo menu da página Modelos Web Ativos na aplicação Gestão do Portal.

  5. Preencha os campos.

    Campo valor
    Name Digite um nome.
    Site Selecione o site ao qual o tema será aplicado. Coloque o cursor no campo e prima Enter no teclado para apresentar uma lista de opções disponíveis.
    Source O conteúdo do código de origem do modelo Web, normalmente, o código é uma combinação de Liquid, HTML, CSS e JavaScript. Criará o código com base nos seus requisitos.
    Tipo de MIME (Desloque-se para baixo para ver este campo) Opcionalmente, o campo fornece um tipo MIME para o conteúdo do modelo. É assumido um tipo texto/html se não for fornecido nenhum. Este valor só será utilizado nos casos em que o modelo está associado a um modelo de página e controla a composição de todo o conteúdo para esse modelo.

    Campos possíveis de preencher para Novos Ficheiros Web.

  6. Selecione Guardar.

Criar um modelo de página

Os modelos Web podem ser utilizados com modelos de página para criar esquemas de página personalizados a serem utilizados durante a criação de novas páginas Web no estúdio de design.

  1. Na aplicação Gestão do Portal, desloque-se para a secção Site e selecione Modelos de Página.

  2. No ecrã Modelos de Página Ativos, selecione Novo.

    A opção + Novo menu da página Modelos de Página Ativos na aplicação Gestão do Portal.

  3. Preencha os campos.

    Campo valor
    Name Digite um nome.
    Site Selecione o site ao qual o tema será aplicado. Coloque o cursor no campo e prima Enter no teclado para apresentar uma lista de opções disponíveis.
    Type Escolha Modelo Web
    Modelo Web Selecione o modelo Web no qual o código personalizado está localizado. Coloque o cursor no campo e prima Enter no teclado para apresentar uma lista de opções disponíveis.
    Utilizar Cabeçalho e Rodapé de Site Se a definição estiver selecionada, o seu modelo Web irá controlar a composição de todo o conteúdo da página entre o cabeçalho e o rodapé do Web site global. Se esta opção não estiver selecionada, o seu modelo Web será responsável pela composição da resposta completa; no caso de estar a compor HTML, significa tudo desde o doctype até às etiquetas <html> de raiz e tudo o que estiver entre elas.
    É predefinição Não Selecionado.
    Nome da Tabela Nenhum selecionado.
    Description Uma descrição do seu modelo de página.

    Modelo de página baseado num modelo Web.

  4. Selecione Guardar.

Enquanto os casos de utilização mais comuns para modelos Web serão compor HTML, a composição da resposta completa (ao anular a seleção de Utilizar Cabeçalho e Rodapé de Web Site) permite compor qualquer formato baseado em texto que escolher. É aqui que o atributo Tipo de MIME do modelo Web se torna relevante. Se um modelo de página que não utiliza o cabeçalho e o rodapé do site é composto, o cabeçalho Content-Type de resposta HTTP será definido com o Tipo de MIME do Modelo Web associado (texto/html será utilizado se não for fornecido nenhum Tipo de MIME), fornecendo uma grande variedade de opções para composição de conteúdo não HTML utilizando Liquid. Um caso de utilização comum seria compor um feed RSS através da definição de um Tipo de MIME application/rss+xml.

Criar uma página Web utilizando um modelo personalizado

  1. No estúdio de design, na área de trabalho Páginas, selecione + Página.

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

    1. Introduza o Nome da página
    2. Em Esquemas personalizados, selecione o esquema de página personalizado.
    3. Selecione Adicionar.

    Selecionar o esquema personalizado quando cria uma nova página Web.

  3. Escolha Pré-visualizar para ver a sua página personalizada no site.

Consulte também