Metadados da página
Uma página DevSite é uma unidade única de conteúdo em um site. Uma página pode ter um título, um corpo, elementos de cabeçalho e atributos de metadados que controlam os recursos do site. Quando um usuário acessa o URL de uma página, o site renderiza uma página da Web completa com base nas propriedades da página de conteúdo, adicionando elementos dinâmicos, como cabeçalho, rodapé e barra lateral. Os comportamentos padrão são otimizados para páginas de documentação técnica, mas uma página também pode ser configurada para outros usos, como páginas de marketing e de destino.
Estrutura de uma página
Uma página DevSite é uma página da Web cuja aparência geral e recursos são gerenciados pelo site. Uma página no Google Developers é exibida com várias áreas comuns. Nem todos os sites oferecem suporte a todos os recursos. Passe o mouse sobre os rótulos do diagrama.
site header
Logotipo do site, widget de login, caixa de pesquisa e navegação superior. Comum em todo o site.
project bar
O título do projeto ou produto e widgets específicos do projeto (como o link "Feedback"). Essa área é definida pelos metadados do projeto.
sidebar
Navegação hierárquica em todo o livro. Essa área é definida pelos metadados do livro.
body
O título e o conteúdo da página.
page footer ("last updated")
widgets específicos da página (como o aviso "Última atualização"). Também pode conter um aviso de licença CC, que é um atributo de metadados do projeto.
site footer
Os links de rodapé do site, o widget de seleção de idioma. Comum em todo o site.
Arquivos de origem HTML
<html devsite>
<head>
<title>Page title</title>
<meta name="project_path" value="/path/to/_project.yaml" />
<meta name="book_path" value="/path/to/_book.yaml" />
</head>
<body>
<p>Body content goes here, implemented as HTML.</p>
</body>
</html>
O atributo devsite do elemento <html> informa ao DevSite que isso precisa ser renderizado como uma página DevSite, e não literal como um recurso HTML. Caso sua página esteja aparecendo sem formatação ou sem cabeçalho ou rodapé, verifique se <html devsite> aparece na parte superior do arquivo.
Os elementos <html>, <head> e <body> são obrigatórios e precisam ter tags de abertura e fechamento.
Uma página comum também precisa ter um elemento <title> dentro do <head>. Consulte Título da página.
As tags <meta> específicas controlam os recursos da página. Elas estão descritas nesta referência. Uma página típica tem uma metatag "project_path", que se refere a um arquivo de metadados _project.yaml, e uma metatag "book_path", que se refere a um arquivo de metadados _book.yaml. Consulte Projetos e livros. As tags <meta> reconhecidas pelo DevSite geralmente não aparecem na página final.
Outros elementos na <head> e todos os elementos na <body> são renderizados na página final.
Arquivos de origem Markdown
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
Uma página típica precisa ter um título (por exemplo, # Page title). Consulte Título da página.
As metatags específicas controlam recursos da página. Elas estão descritas nesta referência. Uma página típica tem uma metatag Project:, que se refere a um arquivo de metadados _project.yaml, e uma metatag Book:, que se refere a um arquivo de metadados _book.yaml. Consulte Projetos e livros. As metatags reconhecidas pelo DevSite geralmente não aparecem na página final.
Projetos e livros
Um projeto é descrito por um arquivo de metadados chamado _project.yaml. Um livro é descrito por um arquivo de metadados chamado _book.yaml. Esses arquivos são publicados no site junto com os arquivos de recursos e de páginas e podem ser traduzidos para vários idiomas. Consulte Metadados de projeto e Metadados de livro para informações sobre a estrutura e os atributos desses arquivos.
Para associar uma página a um projeto, forneça o atributo project_path. O valor dele é o caminho do conteúdo para o arquivo _project.yaml.
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
Markdown
Project: /path/to/_project.yaml
Se uma página não tiver um atributo project_path, ela será renderizada sem a região da barra de projeto e os recursos dela. A página não será considerada parte de um projeto.
Para associar uma página a um livro, forneça o atributo book_path. O valor dele é o caminho do conteúdo para o arquivo _book.yaml.
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
Markdown
Book: /path/to/_book.yaml
Título da página
<head>
<title>Page title</title>
...
</head>
Ou use um elemento <h1> com a classe page-title no <body> da página.
HTML
<h1 class="page-title">Page title</h1>
Markdown
# Page title
As páginas iniciais do projeto não precisam de títulos,
HTML
<meta name="no_page_title" value="true" />
Markdown
no_page_title: true
Em casos especiais em que o <h1> automático não é desejado para um layout especial, mas uma página ainda precisa de um título de janela, é possível manter o título, mas ocultá-lo com o atributo "hide_page_heading":
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
Markdown
hide_page_heading: true
# Page title
Descrição do cabeçalho
Muitos sites do DevSite têm uma descrição no cabeçalho. Isso é definido no arquivo de metadados _project.yaml e é exibido automaticamente nas páginas de destino do DevSite. Em outras palavras, as páginas criadas com os modelos _index.yaml vão renderizar automaticamente uma descrição no cabeçalho, que é definido no arquivo _project.yaml.
Essa descrição pode ser substituída pela página definindo um description na raiz do arquivo _index.yaml ou suprimida definindo hide_description: true no objeto header do objeto landing_page.
Layout com largura total
Se você precisar de mais controle, peça ao DevSite para renunciar ao layout da área abaixo do cabeçalho do site, da barra do projeto e acima do rodapé do site. Para isso, defina o atributo de metadados "full_width" como "true".
HTML
<meta name="full_width" value="true" />
Markdown
full_width: true
Data da última atualização
Por padrão, exceto nas páginas full-width, a região do rodapé da página inclui uma "última atualização" automática aviso. Na maioria dos casos, isso dá aos usuários um indicador claro sobre a atualização do conteúdo da página.
Em alguns casos, essas informações podem ser confusas ou consideradas confidenciais pela equipe do produto. Para desativar o aviso de última atualização em uma página, defina o atributo hide_last_updated como true:
HTML
<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="hide_last_updated" value="true" />
Markdown
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
hide_last_updated: true
É possível substituir a "última atualização" calculada automaticamente definindo a metatag refresh_date como uma data no formato ISO 8601:
HTML
<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="refresh_date" value="2017-03-27" />
Markdown
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
refresh_date: 2017-03-27
Descrição da página
A descrição de uma página é um resumo textual do conteúdo da página. Para definir a descrição de uma página, forneça um elemento <meta name="description" content="DESCRIPTION" />. O texto da descrição fica em um atributo chamado content, não value. que corresponde ao atributo padrão da Web.
HTML
<meta name="description" content="It was the best of times, it was the blurst of times..." />
Markdown
description: It was the best of times, it was the blurst of times...
Definir a descrição da página faz com que a tag <meta> seja incluída na página final
Caminho da imagem
image_path é o caminho para a imagem que representa a página nas mídias sociais e recursos do DevSite, como recommendations e dynamic content. Quando definida, essa imagem será usada como a imagem do OpenGraph da página, substituindo as configurações de social media do projeto e de marca tenant site's.
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
Markdown
image_path: /site-assets/developers_64dp.png
Palavras-chave
O campo keywords é uma lista de strings delimitadas por vírgulas que descrevem a página e é usado em recursos de pesquisa e descoberta, como a pesquisa no site e o Dynamic Content.
O campo keywords é compatível com palavras-chave simples sem associação dimensional (por exemplo, gettingstarted) e palavras-chave estruturadas que usam namespaces dimensionais para representar a relação entre documentos e entidades do mundo real, como linguagens de programação, produtos e eventos (por exemplo, product:ComputeEngine ou language:Python3). É possível adicionar os dois tipos de keywords a qualquer campo de palavras-chave.
Se você organizar uma palavra-chave que não está em conformidade com os requisitos de formatação, será exibido um aviso com a versão formatada corretamente da palavra-chave no resultado da ferramenta usada (geralmente a ferramenta de linha de comando DevSite ou o editor de conteúdo DevSite).
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Markdown
keywords: spacetime, timetravel, product:Delorean