Metadaten für Seiten

Eine DevSite-Seite ist eine einzelne Inhaltseinheit auf einer Website. Eine Seite kann aus einem Titel, einem Textkörper, Header-Elementen und Metadatenattributen bestehen, die die Funktionen der Website steuern. Wenn ein Nutzer die URL einer Seite aufruft, wird auf der Website basierend auf den Eigenschaften der Inhaltsseite eine vollständige Webseite dargestellt, wobei dynamische Elemente wie Kopf- und Fußzeile sowie Seitenleiste hinzugefügt werden. Das Standardverhalten ist für Seiten in der technischen Dokumentation optimiert. Eine Seite kann aber auch für andere Zwecke konfiguriert werden, z. B. für Marketing und Landingpages.

Aufbau einer Seite

Website-Header
Projektleiste
Seitenleiste
body
Zuletzt aktualisiert

Eine DevSite-Seite ist eine Webseite, deren allgemeines Erscheinungsbild und die Funktionen von der Website verwaltet werden. Auf der Google Developers-Website wird eine Seite mit mehreren Gemeinschaftsräumen angezeigt. Nicht alle Websites unterstützen alle Funktionen. Bewegen Sie die Maus über das Diagramm für Labels.

site header

Das Logo der Website, das Anmelde-Widget, das Suchfeld und die Navigationsleiste oben Ist auf der gesamten Website gleich.

project bar

Der Projekt- oder Produkttitel und projektspezifische Widgets (z. B. der Link „Feedback“). Dieser Bereich wird durch Projektmetadaten definiert.

sidebar

Buchweite hierarchische Navigation. Dieser Bereich wird durch die Buchmetadaten definiert.

body

Seitentitel und Inhalt der Seite

page footer ("last updated")

Seitenspezifische Widgets, z. B. der Hinweis „Zuletzt aktualisiert“ Kann auch einen CC-Lizenzhinweis enthalten, bei dem es sich um ein Projektmetadatenattribut handelt.

site footer

Die Links in der Website-Fußzeile und das Widget zur Sprachauswahl. Ist auf der gesamten Website gleich.

HTML-Quelldateien

<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>

Das Attribut devsite des <html>-Elements teilt DevSite mit, dass diese Seite als DevSite-Seite und nicht wortwörtlich als HTML-Asset gerendert werden soll. Wenn Ihre Seite ohne Formatierung oder Kopf- oder Fußzeile angezeigt wird, prüfen Sie, ob <html devsite> oben in der Datei angezeigt wird.

Die Elemente <html>, <head> und <body> sind erforderlich und müssen öffnende und schließende Tags haben.

Eine typische Seite muss außerdem ein <title>-Element innerhalb der <head> haben. Siehe Seitentitel.

Spezielle <meta>-Tags steuern die Seitenfunktionen. Diese werden in dieser Referenz beschrieben. Eine typische Seite hat ein "project_path"-Meta-Tag, das auf eine _project.yaml-Metadatendatei verweist, und ein "book_path"-Meta-Tag, das auf eine _book.yaml-Metadatendatei verweist. Siehe Projekte und Bücher. <meta>-Tags, die von DevSite erkannt werden, erscheinen normalerweise nicht auf der finalen Seite.

Die anderen Elemente in der <head> und alle Elemente in <body> werden auf der letzten Seite gerendert.

Markdown-Quelldateien


Project: /path/to/_project.yaml
Book: /path/to/_book.yaml

# Page title

Body content, specified in Markdown, goes here.

Eine typische Seite muss einen Titel haben (z.B. # Page title. Siehe Seitentitel.

Bestimmte Meta-Tags steuern die Seitenfunktionen. Diese werden in dieser Referenz beschrieben. Eine typische Seite hat ein Project:-Meta-Tag, das auf eine _project.yaml-Metadatendatei verweist, und ein Book:-Meta-Tag, das auf eine _book.yaml-Metadatendatei verweist. Siehe Projekte und Bücher. Von DevSite erkannte Meta-Tags erscheinen normalerweise nicht auf der letzten Seite.

Projekte und Bücher

Ein Projekt wird durch eine Projektmetadatendatei mit dem Namen _project.yaml beschrieben. Ein Buch wird durch eine Buchmetadatendatei namens _book.yaml beschrieben. Diese Dateien werden zusammen mit Seiten- und Asset-Dateien auf der Website veröffentlicht und können in mehrere Sprachen übersetzt werden. Informationen zur Struktur und zu den Attributen dieser Dateien finden Sie unter Projektmetadaten und Buchmetadaten.

Gib das Attribut project_path an, um eine Seite mit einem Projekt zu verknüpfen. Sein Wert ist der Inhaltspfad zur Datei _project.yaml.

HTML

<meta name="project_path" value="/path/to/_project.yaml" />

Markdown

Project: /path/to/_project.yaml

Wenn eine Seite kein project_path-Attribut hat, wird sie ohne die Region Projektleiste und ihre Funktionen gerendert. Die Seite gilt nicht als Teil eines Projekts.

Um eine Seite mit einem Buch zu verknüpfen, geben Sie das Attribut book_path an. Sein Wert ist der Inhaltspfad zur Datei _book.yaml.

HTML

<meta name="book_path" value="/path/to/_book.yaml" />

Markdown

Book: /path/to/_book.yaml

Seitentitel

<head>
  <title>Page title</title>
  ...
</head>

Oder verwende ein <h1>-Element mit der Klasse page-title im <body> der Seite.

HTML

<h1 class="page-title">Page title</h1>

Markdown

# Page title

Projektstartseiten benötigen keinen Titel,

HTML

<meta name="no_page_title" value="true" />

Markdown

no_page_title: true

In Fällen, in denen das automatische <h1> für ein bestimmtes Layout nicht erwünscht ist, für eine Seite aber dennoch ein Fenstertitel erforderlich ist, können Sie den Titel beibehalten, aber die Überschrift mit dem Attribut "hide_page_heading" ausblenden:

HTML

<title>Page title</title>
<meta name="hide_page_heading" value="true" />

Markdown

hide_page_heading: true
# Page title

Anzeigentitel

Viele DevSite-Websites haben eine Beschreibung im Header. Diese wird in der Metadatendatei _project.yaml festgelegt und automatisch auf DevSite-Landingpages angezeigt. Mit anderen Worten: Seiten, die mit _index.yaml-Vorlagen erstellt werden, rendern automatisch eine Beschreibung im Header, die in der Datei _project.yaml festgelegt ist.

Diese Beschreibung kann für die Seite überschrieben werden. Legen Sie dazu ein description im Stammverzeichnis der _index.yaml-Datei fest oder unterdrücken Sie es, indem Sie hide_description: true im Objekt header des Objekts landing_page festlegen.

Layout mit voller Breite

Wenn Sie mehr Kontrolle über das Layout benötigen, können Sie DevSite anweisen, die Kontrolle über das Layout für den Bereich unter der Kopfzeile und der Projektleiste der Website sowie über der Fußzeile der Website zu verzichten. Setzen Sie dazu das Metadatenattribut "full_width" auf "true".

HTML

<meta name="full_width" value="true" />

Markdown

full_width: true

Datum der letzten Aktualisierung

Mit Ausnahme von full-width-Seiten enthält der Bereich Fußzeile der Seite standardmäßig den Wert „Zuletzt aktualisiert“. . In den meisten Fällen erhalten Nutzer so einen eindeutigen Hinweis auf die Aktualität der Inhalte auf der Seite.

In einigen Fällen können diese Informationen verwirrend sein oder vom Produktteam als vertraulich angesehen werden. Um den zuletzt aktualisierten Hinweis auf einer Seite zu deaktivieren, setzen Sie das Attribut hide_last_updated auf 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

Sie können den automatisch berechneten Wert „Zuletzt aktualisiert“ überschreiben indem Sie das Meta-Tag „refresh_date“ auf ein Datum im Format ISO 8601 setzen:

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

Seitenbeschreibung

Die Beschreibung einer Seite ist eine Zusammenfassung des Seiteninhalts in Textform. Wenn du eine Beschreibung für eine Seite festlegen möchtest, musst du ein <meta name="description" content="DESCRIPTION" />-Element angeben. Beachten Sie, dass der Beschreibungstext in einem Attribut namens content und nicht in value enthalten ist. entspricht dies dem Webstandard-Attribut.

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...

Wenn du die Seitenbeschreibung festlegst, wird das <meta>-Tag auf der letzten Seite eingefügt

Image-Pfad

image_path ist der Pfad zum Bild, das diese Seite in Social-Media- und DevSite-Funktionen wie recommendations und dynamic content darstellt. Wenn dieses Bild festgelegt ist, wird es als OpenGraph-Bild der Seite verwendet. Dabei werden die social media-Einstellungen des Projekts und die Branding-Einstellungen tenant site's überschrieben.

HTML

<meta name="image_path" value="/site-assets/developers_64dp.png" />

Markdown

image_path: /site-assets/developers_64dp.png

Keywords

Das Feld keywords ist eine durch Kommas getrennte Liste von Strings, die die Seite beschreiben und in Such- und Empfehlungsfunktionen wie der Websitesuche und Dynamic Content verwendet werden.

Das Feld keywords unterstützt flache Keywords ohne Dimensionsverknüpfung (z. B. gettingstarted) und strukturierte Keywords, die Dimensions-Namespaces verwenden, um die Beziehung zwischen Dokumenten und realen Entitäten wie Programmiersprachen, Produkten und Ereignissen (z. B. product:ComputeEngine oder language:Python3) darzustellen. Sie können jedem Keyword-Feld beide keywords-Typen hinzufügen.

Wenn Sie ein Keyword bereitstellen, das nicht den Formatierungsanforderungen entspricht, wird in der Ausgabe des verwendeten Tools (normalerweise das Befehlszeilentool DevSite oder der DevSite Content Publisher) eine Warnung mit der korrekt formatierten Version des Keywords angezeigt.

HTML

<meta name="keywords" value="spacetime,timetravel,product:Delorean" />

Markdown

keywords: spacetime, timetravel, product:Delorean