Metadane strony
Strona DevSite to pojedyncza jednostka treści w witrynie. Strona może mieć tytuł, treść, elementy nagłówka i atrybuty metadanych, które kontrolują funkcje witryny. Gdy użytkownik odwiedza adres URL strony, renderuje ona całą stronę internetową zgodnie z jej właściwościami i dodaje elementy dynamiczne, takie jak nagłówek, stopka i pasek boczny. Domyślne zachowania są zoptymalizowane w przypadku stron z dokumentacją techniczną, ale stronę można też skonfigurować do innych zastosowań, na przykład do marketingu i stron docelowych.
Struktura strony
Strona DevSite to strona internetowa, której ogólny wygląd i funkcje są zarządzane przez witrynę. Strona w Google Developers zawiera kilka wspólnych obszarów. (Nie wszystkie witryny obsługują wszystkie funkcje). Najedź kursorem na diagram, aby wyświetlić etykiety.
site header
Logo witryny, widżet logowania, pole wyszukiwania i górny pasek nawigacyjny. Popularne w całej witrynie.
project bar
Tytuł projektu lub produktu oraz widżety związane z projektem (np. link „Prześlij opinię”). Ten obszar jest określany przez metadane projektu.
sidebar
Hierarchiczna nawigacja po całej książce. Ten obszar jest określany przez metadane książki.
body
Tytuł i zawartość strony internetowej.
page footer ("last updated")
widżety związane ze stronami (np. powiadomienie „Ostatnia aktualizacja”). Może też zawierać powiadomienie o licencji CC, które jest atrybutem metadanych projektu.
site footer
Linki w stopce witryny, widżet wyboru języka. Popularne w całej witrynie.
Pliki źródłowe 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>
Atrybut devsite elementu <html> informuje DevSite, że powinna ona być renderowana jako strona DevSite, a nie dosłownie jako zasób HTML. Jeśli strona jest wyświetlana bez formatowania lub bez nagłówka lub stopki, sprawdź, czy u góry pliku znajduje się <html devsite>.
Elementy <html>, <head> i <body> są wymagane i muszą mieć tagi otwierające i zamykające.
Typowa strona musi też zawierać element <title> wewnątrz tagu <head>. Patrz sekcja Tytuł strony.
Określone tagi <meta> określają funkcje strony. Zostały one opisane w tym dokumencie. Typowa strona ma metatag "project_path", który odnosi się do pliku metadanych _project.yaml, oraz metatag "book_path", który odnosi się do pliku metadanych _book.yaml. Zobacz Projekty i książki. Tagi <meta> rozpoznane przez DevSite zwykle nie pojawiają się na ostatniej stronie.
Pozostałe elementy w elemencie <head> i wszystkie elementy w elemencie <body> są renderowane na ostatniej stronie.
Pliki źródłowe w formacie Markdown
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
Typowa strona musi mieć tytuł (np. # Page title). Patrz sekcja Tytuł strony.
Określone metatagi kontrolują funkcje strony. Zostały one opisane w tym dokumencie. Typowa strona ma metatag Project:, który odnosi się do pliku metadanych _project.yaml, oraz metatag Book:, który odnosi się do pliku metadanych _book.yaml. Zobacz Projekty i książki. Metatagi rozpoznane przez DevSite zwykle nie pojawiają się na ostatecznej stronie.
Projekty i książki
Projekt jest opisany w pliku metadanych projektu o nazwie _project.yaml. Książka jest opisana w pliku metadanych o nazwie _book.yaml. Te pliki są publikowane w witrynie razem z plikami stron i zasobów i można je przetłumaczyć na wiele języków. Informacje o strukturze i atrybutach tych plików znajdziesz w artykułach Metadane projektu i Metadane książki.
Aby powiązać stronę z projektem, podaj atrybut project_path. Jego wartością jest ścieżka treści do pliku _project.yaml.
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
Markdown
Project: /path/to/_project.yaml
Jeśli strona nie ma atrybutu project_path, będzie wyświetlana bez regionu paska projektu i jego funkcji. Strona nie będzie uważana za część projektu.
Aby powiązać stronę z książką, podaj atrybut book_path. Jego wartością jest ścieżka treści do pliku _book.yaml.
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
Markdown
Book: /path/to/_book.yaml
Tytuł strony
<head>
<title>Page title</title>
...
</head>
Możesz też użyć elementu <h1> z klasą page-title w tagu <body> strony.
HTML
<h1 class="page-title">Page title</h1>
Markdown
# Page title
Strony główne projektu nie wymagają tytułów,
HTML
<meta name="no_page_title" value="true" />
Markdown
no_page_title: true
W szczególnych przypadkach, gdy automatyczny atrybut <h1> nie jest wymagany w przypadku specjalnego układu, ale strona nadal wymaga tytułu okna, możesz zachować tytuł, ale ukryć nagłówek, używając atrybutu "hide_page_heading":
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
Markdown
hide_page_heading: true
# Page title
Opis nagłówka
Wiele witryn DevSite ma opis w nagłówku. Jest on ustawiany w pliku metadanych _project.yaml i automatycznie wyświetlany na stronach docelowych w DevSite. Oznacza to, że w przypadku stron utworzonych z użyciem szablonów _index.yaml opis jest automatycznie renderowany w nagłówku ustawionym w pliku _project.yaml.
Ten opis można zastąpić, ustawiając description w katalogu głównym pliku _index.yaml. Możesz go też pominąć, ustawiając hide_description: true w obiekcie header obiektu landing_page.
Układ o pełnej szerokości
Jeśli potrzebujesz większej kontroli nad układem, możesz wskazać DevSite, aby zrzekał się kontroli nad układem w obszarze pod nagłówkiem witryny i paskiem projektu oraz powyżej stopki witryny. Aby to zrobić, ustaw wartość atrybutu metadanych "full_width" na "true".
HTML
<meta name="full_width" value="true" />
Markdown
full_width: true
Data ostatniej aktualizacji
Domyślnie, z wyjątkiem stron full-width, obszar stopki zawiera automatyczną „ostatnią aktualizację”. powiadomienia. W większości przypadków jest to w prosty sposób sygnalizować użytkownikom aktualność treści na stronie.
Czasami te informacje mogą wprowadzać w błąd lub mogą zostać uznane przez zespół ds. usługi za poufne. Aby wyłączyć powiadomienie o ostatniej aktualizacji na stronie, ustaw wartość atrybutu hide_last_updated na 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
Możesz zastąpić automatycznie obliczoną „ostatnią aktualizację” date, ustawiając w metatagurefresh_date datę w formacie 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
Opis strony
Opis strony to tekstowe podsumowanie jej zawartości. Aby ustawić opis strony, dodaj element <meta name="description" content="DESCRIPTION" />. Zwróć uwagę, że opis znajduje się w atrybucie o nazwie content, a nie value. pasuje do atrybutu standardowego internetowego.
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...
Ustawienie opisu strony powoduje umieszczenie tagu <meta> na ostatniej stronie.
Ścieżka obrazu
image_path to ścieżka do obrazu, który reprezentuje tę stronę w mediach społecznościowych i funkcjach DevSite, takich jak recommendations i dynamic content. Gdy ustawisz ten obraz, będzie on używany jako obraz OpenGraph strony, zastępując ustawienia social media projektu i ustawienia marki tenant site's.
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
Markdown
image_path: /site-assets/developers_64dp.png
Słowa kluczowe
Pole keywords to rozdzielana przecinkami lista ciągów, które opisują stronę i są używane w funkcjach wyszukiwania i odkrywania, takich jak wyszukiwanie w witrynie i Dynamic Content.
Pole keywords obsługuje proste słowa kluczowe bez powiązania wymiarowego (np. gettingstarted) oraz uporządkowane słowa kluczowe, które korzystają z wymiarowych przestrzeni nazw do reprezentowania relacji między dokumentami a rzeczywistymi elementami, takimi jak języki programowania, produkty i zdarzenia (np. product:ComputeEngine lub language:Python3). Oba typy znaczników keywords możesz dodać w dowolnym polu słów kluczowych.
Jeśli zabierzesz słowo kluczowe, które nie spełnia wymagań dotyczących formatowania, w danych wyjściowych używanego narzędzia (zwykle w narzędziu wiersza poleceń DevSite lub w narzędziu DevSite Content Publisher) pojawi się ostrzeżenie z prawidłowo sformatowaną wersją słowa kluczowego.
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Markdown
keywords: spacetime, timetravel, product:Delorean