Metadatos de página
Una página de DevSite es una unidad de contenido única en un sitio. Una página puede tener un título, un cuerpo, elementos de encabezado y atributos de metadatos que controlan las funciones del sitio. Cuando un usuario visita la URL de una página, el sitio renderiza una página web completa en función de las propiedades de la página de contenido y agrega elementos dinámicos, como el encabezado, el pie de página y la barra lateral. Los comportamientos predeterminados se optimizan para las páginas de documentación técnica, pero una página también se puede configurar para otros usos, como páginas de destino y marketing.
Estructura de una página
Una página de DevSite es una página web cuya apariencia general y funciones están administradas por el sitio. Se muestra una página de Google Developers con varias áreas comunes. (No todos los sitios admiten todas las funciones). Coloca el cursor sobre el diagrama de las etiquetas.
site header
El logotipo del sitio, el widget de acceso, el cuadro de búsqueda y la navegación superior. Común en todo el sitio.
project bar
El título del proyecto o producto, y los widgets específicos del proyecto (como el vínculo “Comentarios”). Esta área se define mediante los metadatos del proyecto.
sidebar
Navegación jerárquica por todo el libro. Esta área se define por los metadatos de libros.
body
El título de la página y su contenido
page footer ("last updated")
Widgets específicos de la página (como el aviso “Última actualización”). También puede contener un aviso de licencia de CC, que es un atributo de metadatos del proyecto.
site footer
Vínculos al pie de página del sitio, el widget de selección de idioma Común en todo el sitio.
Archivos fuente 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>
El atributo devsite del elemento <html> le indica a DevSite que se debe renderizar como una página de DevSite y no como un recurso HTML al pie de la letra. Si tu página aparece sin formato, sin un encabezado o un pie de página, comprueba que <html devsite> aparezca cerca de la parte superior del archivo.
Los elementos <html>, <head> y <body> son obligatorios y deben tener etiquetas de apertura y cierre.
Una página típica también debe tener un elemento <title>, dentro de <head>. Consulta Título de la página.
Las etiquetas <meta> específicas controlan las funciones de la página. que se describen en esta referencia. Una página típica tiene una metaetiqueta "project_path", que hace referencia a un archivo de metadatos _project.yaml, y una metaetiqueta "book_path", que hace referencia a un archivo de metadatos _book.yaml. Consulta Proyectos y libros. Las etiquetas <meta> que reconoce DevSite no suelen aparecer en la página final.
Los demás elementos de <head> y todos los elementos de <body> se renderizan en la página final.
Archivos fuente de Markdown
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
Una página típica debe tener un título (p.ej., # Page title). Consulta el Título de la página.
Las metaetiquetas específicas controlan las funciones de la página. que se describen en esta referencia. Una página típica tiene una metaetiqueta Project:, que hace referencia a un archivo de metadatos _project.yaml, y una metaetiqueta Book:, que hace referencia a un archivo de metadatos _book.yaml. Consulta proyectos y libros. Las metaetiquetas que reconoce DevSite no suelen aparecer en la página final.
Proyectos y libros
Un proyecto se describe mediante un archivo de metadatos del proyecto llamado _project.yaml. Un archivo de metadatos de libro llamado _book.yaml describe un libro. Estos archivos se publican en el sitio junto con archivos de páginas y recursos, y se pueden traducir a varios idiomas. Consulta Metadatos de proyectos y Metadatos de libros para obtener información sobre la estructura y los atributos de estos archivos.
Para asociar una página a un proyecto, proporciona el atributo project_path. Su valor es la ruta de acceso de contenido al archivo _project.yaml.
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
Markdown
Project: /path/to/_project.yaml
Si una página no tiene un atributo project_path, se renderizará sin la región barra del proyecto y sus funciones. La página no se considerará parte de un proyecto.
Para asociar una página a un libro, proporciona el atributo book_path. Su valor es la ruta de acceso de contenido al archivo _book.yaml.
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
Markdown
Book: /path/to/_book.yaml
Título de página
<head>
<title>Page title</title>
...
</head>
También puedes usar un elemento <h1> con la clase page-title en el <body> de la página.
HTML
<h1 class="page-title">Page title</h1>
Markdown
# Page title
Las páginas principales de los proyectos no necesitan títulos,
HTML
<meta name="no_page_title" value="true" />
Markdown
no_page_title: true
En casos especiales en los que no se desee el <h1> automático para un diseño especial, pero una página aún necesite un título de ventana, puedes conservar el título, pero ocultar el encabezado con el atributo "hide_page_heading":
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
Markdown
hide_page_heading: true
# Page title
Descripción del encabezado
Muchos sitios de DevSite tienen una descripción en el encabezado. Esto se establece en el archivo de metadatos _project.yaml y se muestra automáticamente en las páginas de destino de DevSite. En otras palabras, las páginas que se crean con plantillas _index.yaml renderizarán automáticamente una descripción en el encabezado, que se establece en el archivo _project.yaml.
Esta descripción se puede anular para la página configurando un description en la raíz del archivo _index.yaml, o se puede suprimir si configuras hide_description: true dentro del objeto header del objeto landing_page.
Diseño de ancho total
Si necesitas más control sobre el diseño, puedes indicar a DevSite que renuncie al diseño del área debajo del encabezado del sitio y de la barra de proyectos, y sobre el pie de página del sitio. Para hacerlo, establece el atributo de metadatos "full_width" en "true".
HTML
<meta name="full_width" value="true" />
Markdown
full_width: true
Fecha de la última actualización
De forma predeterminada, excepto en las páginas full-width, la región del pie de página incluye una “última actualización” automática aviso. En la mayoría de los casos, esto les brinda a los usuarios una señal clara sobre la actualidad del contenido de la página.
En algunos casos, esta información puede ser confusa o ser considerada confidencial por el equipo del producto. Para inhabilitar el aviso actualizado más reciente en una página, establece el atributo hide_last_updated en 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
Puedes anular la "última actualización" calculada automáticamente de fecha estableciendo la metaetiqueta refresh_date en una fecha en 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
Descripción de la página
La descripción de una página es un resumen textual del contenido de la página. Para establecer una descripción de una página, proporciona un elemento <meta name="description" content="DESCRIPTION" />. Ten en cuenta que el texto de la descripción va en un atributo llamado content, no en value. coincide con el atributo web
estándar.
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...
Si estableces la descripción de la página, la etiqueta <meta> se incluirá en la página final
Ruta de acceso a la imagen
image_path es la ruta a la imagen que representa esta página en redes sociales y funciones de DevSite, como recommendations y dynamic content. Cuando se establezca, esta imagen se utilizará como la imagen de OpenGraph de la página, lo que anulará la configuración de social media del proyecto y la configuración de desarrollo de la marca tenant site's.
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
Markdown
image_path: /site-assets/developers_64dp.png
Palabras clave
El campo keywords es una lista delimitada por comas de cadenas que describen la página y se utilizan en funciones de búsqueda y descubrimiento, como Site Search y Dynamic Content.
El campo keywords admite palabras clave planas sin asociación dimensional (por ejemplo, gettingstarted) y palabras clave estructuradas que usan espacios de nombres dimensionales para representar la relación entre documentos y entidades del mundo real, como lenguajes de programación, productos y eventos (por ejemplo, product:ComputeEngine o language:Python3). Puedes agregar ambos tipos de keywords a cualquier campo de palabras clave.
Si almacenas en etapa intermedia una palabra clave que no cumple con los requisitos de formato, verás una advertencia con la versión con el formato correcto de tu palabra clave en el resultado de la herramienta que hayas usado (por lo general, la herramienta de línea de comandos de DevSite o el publicador de contenido de DevSite).
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Markdown
keywords: spacetime, timetravel, product:Delorean