Metadati di pagina
Una pagina DevSite è una singola unità di contenuti su un sito. Una pagina può avere titolo, corpo, elementi di intestazione e attributi di metadati che controllano le funzionalità del sito. Quando un utente visita l'URL di una pagina, il sito visualizza una pagina web completa in base alle proprietà della pagina dei contenuti, aggiungendo elementi dinamici come l'intestazione, il piè di pagina e la barra laterale. I comportamenti predefiniti sono ottimizzati per le pagine di documentazione tecnica, ma una pagina può anche essere configurata per altri utilizzi, ad esempio il marketing e le pagine di destinazione.
Struttura di una pagina
Una pagina di DevSite è una pagina web la cui funzionalità e aspetto generali sono gestiti dal sito. Su Google Developers viene visualizzata una pagina con diverse aree comuni. Non tutti i siti supportano tutte le funzioni. Passa il mouse sopra il diagramma per visualizzare le etichette.
site header
Il logo del sito, il widget di accesso, la casella di ricerca e la barra di navigazione superiore. Comune a tutto il sito.
project bar
Il titolo del progetto o del prodotto e i widget specifici del progetto (come il link "Feedback"). Quest'area è definita dai metadati del progetto.
sidebar
Navigazione gerarchica a livello di libro. Quest'area è definita dai metadati dei libri.
body
Il titolo e i contenuti della pagina.
page footer ("last updated")
Widget specifici della pagina (come l'avviso "Ultimo aggiornamento"). Può anche contenere una notifica sulla licenza CC, che è un attributo dei metadati di progetto.
site footer
Il piè di pagina del sito contiene un link al widget di selezione della lingua. Comune a tutto il sito.
File sorgente 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>
L'attributo devsite dell'elemento <html> indica a DevSite che questa pagina deve essere visualizzata come una pagina DevSite e non come asset HTML. Se la pagina viene visualizzata senza formattazione né intestazione o piè di pagina, verifica che <html devsite> sia visualizzato nella parte superiore del file.
Gli elementi <html>, <head> e <body> sono obbligatori e devono avere tag di apertura e chiusura.
Una pagina tipica deve avere anche un elemento <title> all'interno di <head>. Vedi Titolo della pagina.
Funzionalità della pagina di controllo di tag <meta> specifici. descritti in questo riferimento. Una pagina tipica contiene un meta tag "project_path", che fa riferimento a un file di metadati _project.yaml, e un meta tag "book_path", che fa riferimento a un file di metadati _book.yaml. Vedi Progetti e libri. I tag <meta> riconosciuti da DevSite solitamente non vengono visualizzati nella pagina finale.
Gli altri elementi in <head> e tutti gli elementi in <body> vengono visualizzati nella pagina finale.
File di origine di Markdown
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
Una pagina tipica deve avere un titolo (ad es. # Page title). Vedi Titolo della pagina.
Meta tag specifici controllano le funzionalità della pagina. descritti in questo riferimento. Una pagina tipica contiene un meta tag Project:, che fa riferimento a un file di metadati _project.yaml, e un meta tag Book:, che fa riferimento a un file di metadati _book.yaml. Vedi progetti e libri. I meta tag riconosciuti da DevSite solitamente non compaiono nella pagina finale.
Progetti e libri
Un progetto viene descritto da un file di metadati di progetto denominato _project.yaml. Un libro viene descritto mediante un file di metadati di un libro denominato _book.yaml. Questi file vengono pubblicati sul sito insieme ai file di pagine e asset e possono essere tradotti in più lingue. Vedi Metadati del progetto e Metadati dei libri per informazioni sulla struttura e sugli attributi di questi file.
Per associare una pagina a un progetto, fornisci l'attributo project_path. Il suo valore è il percorso dei contenuti al file _project.yaml.
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
Markdown
Project: /path/to/_project.yaml
Se una pagina non ha un attributo project_path, verrà visualizzata senza l'area della barra del progetto e le sue funzionalità. La pagina non verrà considerata parte di un progetto.
Per associare una pagina a un libro, fornisci l'attributo book_path. Il suo valore è il percorso dei contenuti al file _book.yaml.
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
Markdown
Book: /path/to/_book.yaml
Titolo pagina
<head>
<title>Page title</title>
...
</head>
In alternativa, utilizza un elemento <h1> con la classe page-title nella sezione <body> della pagina.
HTML
<h1 class="page-title">Page title</h1>
Markdown
# Page title
Le home page dei progetti non richiedono titoli,
HTML
<meta name="no_page_title" value="true" />
Markdown
no_page_title: true
Nei casi speciali in cui l'elemento <h1> automatico non sia desiderato per un layout speciale, ma una pagina necessita comunque di un titolo di finestra, puoi mantenere il titolo ma nascondere l'intestazione con l'attributo "hide_page_heading":
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
Markdown
hide_page_heading: true
# Page title
Descrizione intestazione
Molti siti di DevSite hanno una descrizione nell'intestazione. Questo valore è impostato nel file di metadati _project.yaml e viene visualizzato automaticamente sulle pagine di destinazione di DevSite. In altre parole, per le pagine create utilizzando i modelli _index.yaml verrà visualizzata automaticamente una descrizione nell'intestazione, impostata nel file _project.yaml.
È possibile eseguire l'override di questa descrizione per la pagina impostando un description nella directory principale del file _index.yaml oppure soppressa impostando hide_description: true all'interno dell'oggetto header dell'oggetto landing_page.
Layout a larghezza intera
Se è necessario un maggiore controllo sul layout, puoi chiedere a DevSite di rinunciare al controllo per l'area sotto l'intestazione del sito e la barra del progetto e sopra il piè di pagina del sito. Per farlo, imposta l'attributo dei metadati "full_width" su "true".
HTML
<meta name="full_width" value="true" />
Markdown
full_width: true
Data Ultimo aggiornamento
Per impostazione predefinita, tranne che nelle pagine full-width, la regione del piè di pagina include la dicitura "ultimo aggiornamento" automatico notifica. Nella maggior parte dei casi, ciò offre agli utenti un'indicazione chiara dell'aggiornamento dei contenuti della pagina.
In alcuni casi, queste informazioni potrebbero creare confusione o essere considerate riservate dal team del prodotto. Per disattivare l'ultimo avviso aggiornato in una pagina, imposta l'attributo hide_last_updated su 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
Puoi ignorare il criterio "ultimo aggiornamento" calcolato automaticamente data impostando il meta tag refresh_date su una data in 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
Descrizione della pagina
La descrizione di una pagina è un riepilogo testuale dei contenuti della pagina. Per impostare una descrizione per una pagina, fornisci un elemento <meta name="description" content="DESCRIPTION" />. Tieni presente che il testo della descrizione deve essere specificato in un attributo denominato content, non in value; corrisponde all'attributo standard web.
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...
L'impostazione della descrizione della pagina fa sì che il tag <meta> venga incluso nella pagina finale
Percorso immagine
image_path è il percorso dell'immagine che rappresenta questa pagina nei social media e nelle funzionalità di DevSite come recommendations e dynamic content. Se impostata, questa immagine verrà utilizzata come immagine Open Graph della pagina, sostituendo le impostazioni di social media del progetto e le impostazioni di branding di tenant site's.
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
Markdown
image_path: /site-assets/developers_64dp.png
Parole chiave
Il campo keywords è un elenco di stringhe delimitato da virgole che descrivono la pagina e vengono utilizzate nelle funzionalità di ricerca e scoperta come la ricerca su sito e Dynamic Content.
Il campo keywords supporta parole chiave fisse senza associazione dimensionale (ad esempio gettingstarted) e parole chiave strutturate che utilizzano spazi dei nomi dimensionali per rappresentare la relazione tra documenti ed entità reali come linguaggi di programmazione, prodotti ed eventi (ad esempio product:ComputeEngine o language:Python3). Puoi aggiungere entrambi i tipi di keywords a qualsiasi campo delle parole chiave.
Se inserisci una parola chiave non conforme ai requisiti di formattazione, verrà visualizzato un avviso con la versione della parola chiave correttamente formattata nell'output dello strumento che hai utilizzato (di solito lo strumento a riga di comando di DevSite o il publisher di contenuti di DevSite).
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Markdown
keywords: spacetime, timetravel, product:Delorean