Метадані сторінки
Сторінка 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> відображаються на останній сторінці.
Вихідні файли Markdown
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