Метаданные страницы
Страница DevSite — это отдельная единица контента на сайте. Страница может иметь заголовок, тело, элементы заголовка и атрибуты метаданных, которые управляют функциями сайта. Когда пользователь посещает URL-адрес страницы, сайт отображает полную веб-страницу на основе свойств страницы контента, добавляя динамические элементы, такие как верхний, нижний колонтитул и боковую панель. Поведение по умолчанию оптимизировано для страниц технической документации, но страницу также можно настроить для других целей, например для маркетинговых и целевых страниц.
Структура страницы
Страница DevSite — это веб-страница, общий вид и функции которой управляются сайтом. Страница Google Developers отображается с несколькими общими областями. (Не все сайты поддерживают все функции.) Наведите указатель мыши на диаграмму, чтобы увидеть метки.
site header
Логотип сайта, виджет входа в систему, окно поиска и верхняя навигация. Общий для всего сайта.
project bar
Название проекта или продукта, а также виджеты, специфичные для проекта (например, ссылка «Отзыв»). Эта область определяется метаданными проекта .
sidebar
Иерархическая навигация по всей книге. Эта область определяется метаданными книги .
body
Заголовок страницы и содержание страницы.
page footer ("last updated")
Виджеты, специфичные для страницы (например, уведомление «Последнее обновление»). Может также содержать уведомление о лицензии CC, которое является атрибутом метаданных проекта.
site footer
Ссылки в подвале сайта, виджет выбора языка. Общий для всего сайта.
Исходные файлы 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>
Атрибут devsite элемента <html> сообщает DevSite, что он должен отображаться как страница DevSite, а не дословно как ресурс HTML. Если ваша страница отображается без форматирования, верхнего или нижнего колонтитула, убедитесь, что <html devsite> отображается в верхней части вашего файла.
Элементы <html> , <head> и <body> являются обязательными и должны иметь открывающий и закрывающий теги.
Типичная страница также должна иметь элемент <title> внутри <head> . См. заголовок страницы .
Определенные теги <meta> управляют функциями страницы. Они описаны в этой ссылке. Типичная страница имеет метатег "project_path" , который ссылается на файл метаданных _project.yaml , и метатег "book_path" , который ссылается на файл метаданных _book.yaml . См. Проекты и книги . Теги <meta> , распознаваемые DevSite, обычно не отображаются на конечной странице.
Другие элементы <head> и все элементы <body> отображаются на последней странице.
Исходные файлы разметки
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
Типичная страница должна иметь заголовок (например, # Page title ). См. заголовок страницы .
Определенные метатеги управляют функциями страницы. Они описаны в этой ссылке. Типичная страница имеет Project: который ссылается на файл метаданных _project.yaml , и метатег Book: который ссылается на файл метаданных _book.yaml . См. Проекты и книги. Мета-теги, распознаваемые DevSite, обычно не отображаются на конечной странице.
Проекты и книги
Проект описывается файлом метаданных проекта с именем _project.yaml . Книга описывается файлом метаданных книги с именем _book.yaml . Эти файлы публикуются на сайте вместе с файлами страниц и ресурсов и могут быть переведены на несколько языков. См. «Метаданные проекта» и «Метаданные книги» для получения информации о структуре и атрибутах этих файлов.
Чтобы связать страницу с проектом, укажите атрибут project_path . Его значением является путь к содержимому файла _project.yaml .
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
Уценка
Project: /path/to/_project.yaml
Если страница не имеет атрибута project_path , она будет отображаться без области панели проекта и ее функций. Страница не будет считаться частью проекта.
Чтобы связать страницу с книгой, укажите атрибут book_path . Его значение — это путь к содержимому файла _book.yaml .
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
Уценка
Book: /path/to/_book.yaml
Название страницы
<head>
<title>Page title</title>
...
</head>
Или используйте элемент <h1> с классом page-title в <body> страницы.
HTML
<h1 class="page-title">Page title</h1>
Уценка
# Page title
Домашние страницы проекта не нуждаются в заголовках.
HTML
<meta name="no_page_title" value="true" />
Уценка
no_page_title: true
В особых случаях, когда автоматический <h1> нежелателен для специального макета, но странице по-прежнему требуется заголовок окна, вы можете сохранить заголовок, но скрыть заголовок с помощью атрибута "hide_page_heading" :
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
Уценка
hide_page_heading: true
# Page title
Описание заголовка
Многие сайты DevSite имеют описание в шапке. Это задается в файле метаданных _project.yaml и автоматически отображается на целевых страницах DevSite. Другими словами, страницы, созданные с использованием шаблона _index.yaml , автоматически отображают описание в заголовке, заданном в файле _project.yaml .
Это описание можно переопределить для страницы, установив description в корне файла _index.yaml , или подавить, установив hide_description: true в объекте header объекта landing_page .
Макет на полную ширину
Если требуется больший контроль над макетом, вы можете указать DevSite отказаться от контроля над макетом области под заголовком сайта и панелью проекта, а также над нижним колонтитулом сайта. Для этого установите для атрибута метаданных "full_width" значение "true" .
HTML
<meta name="full_width" value="true" />
Уценка
full_width: true
Дата последнего обновления
По умолчанию, за исключением страниц full-width , область нижнего колонтитула страницы включает автоматическое уведомление о последнем обновлении. В большинстве случаев это дает пользователям прямой сигнал о свежести контента на странице.
В некоторых случаях эта информация может вводить в заблуждение или может считаться конфиденциальной командой разработчиков продукта. Чтобы отключить уведомление о последнем обновлении на странице, установите для hide_last_updated значение 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" />
Уценка
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
hide_last_updated: true
Вы можете переопределить автоматически рассчитанную дату «последнего обновления», установив в метатегеrefresh_date дату в формате 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" />
Уценка
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
refresh_date: 2017-03-27
Описание страницы
Описание страницы представляет собой текстовую сводку содержимого страницы. Чтобы задать описание страницы, укажите элемент <meta name="description" content="DESCRIPTION" /> . Обратите внимание, что текст описания содержится в атрибуте с именем content , а не value ; это соответствует атрибуту веб-стандарта.
HTML
<meta name="description" content="It was the best of times, it was the blurst of times..." />
Уценка
description: It was the best of times, it was the blurst of times...
Установка описания страницы приводит к включению тега <meta> на конечную страницу.
Путь к изображению
image_path — это путь к изображению, которое представляет эту страницу в социальных сетях и функциях DevSite, таких как recommendations и dynamic content . Если этот параметр установлен, это изображение будет использоваться в качестве изображения OpenGraph страницы, переопределяя настройки social media проекта и настройки фирменного оформления tenant site's .
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
Уценка
image_path: /site-assets/developers_64dp.png
Ключевые слова
Поле keywords представляет собой список строк, разделенных запятыми, которые описывают страницу и используются в функциях поиска и обнаружения, таких как поиск по сайту и Dynamic Content .
Поле keywords поддерживает плоские ключевые слова без размерной связи (например, gettingstarted ) и структурированные ключевые слова, которые используют многомерные пространства имен для представления отношений между документами и объектами реального мира, такими как языки программирования, продукты и события (например, product:ComputeEngine или language:Python3 ). Вы можете добавить оба типа keywords в любое поле ключевых слов.
Если вы создадите ключевое слово, которое не соответствует требованиям к форматированию, вы увидите предупреждение с правильно отформатированной версией вашего ключевого слова в выходных данных используемого вами инструмента (обычно это инструмент командной строки DevSite или DevSite Content Publisher).
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Уценка
keywords: spacetime, timetravel, product:Delorean