Formattazione di guide ed esercitazioni
Guide ed esercitazioni possono essere inviate sul sito Markdown, con una formattazione aggiuntiva per frontmatter e codici brevi.
Posizione della documentazione
I contenuti su amp.dev provengono da due archivi, amp.dev e AMPHTML. Tutta la documentazione di riferimento per i componenti proviene dagli elementi integrati o dalle estensioni di AMPHTML.
Ci sono altri documenti che possono essere importati in amp.dev da AMPHTML. Tali documenti sono elencati in questo file. Non aggiornare tali documenti nell'archivio amp.dev: le modifiche applicate saranno sovrascritte nei successivi build!
Frontmatter
C'è un frontmatter in cima a tutte le guide ed esercitazioni.
Esempio:
$title: Inclusione di JavaScript personalizzati in pagine AMP $order: 7 formats: - sitiweb author: CrystalOnScript contributors: - fstanis description: Per esperienze web che richiedono numerose personalizzazioni, AMP ha creato amp-script, un componente che permette l'uso di qualunque JavaScript sulle pagine AMP, senza conseguenze sulle prestazioni globali delle pagine stesse.
$title | Titolo del documento che apparirà nell'indice. Scrivere in maiuscolo la prima lettera della prima parola e il resto in minuscolo. Fanno eccezione "AMP" e altri nomi propri. Usare la e commerciale & invece della parola e . |
$order | Definisce la posizione dell'indice in cui visualizzare il documento. Potrebbe essere necessario modificare il campo $ order in altri documenti per visualizzarlo nella posizione corretta. |
formats | Elenca le esperienze AMP per cui il documento è rilevante. Se il documento è relativo a siti web e storie AMP, ma non ad annunci o e-mail AMP, il frontmatter dovrebbe riportare quanto segue: "yaml formats: - siti web - storie " |
author | L'autore sei tu! Usa il tuo nome utente GitHub. |
contributi di | Elencare chiunque abbia contribuito al documento. Questo campo è facoltativo |
description | Scrivere una breve descrizione della guida o esercitazione. Questo permette l'ottimizzazione con i motori di ricerca, rendendo il lavoro rintracciabile a chi ne ha bisogno! |
tutorial | Aggiungere tutorial: true al frontmatter del sito web per aggiungere l'icona dell'esercitazione accanto ad esso. Le esercitazioni sono elencate in fondo alla loro sezione nell'indice. |
Codici brevi
Un elenco dei codici brevi e alcune informazioni sul loro uso sono disponibili alla pagina documentation.md su GitHub.
Immagini
amp.dev è realizzato con AMP! Perciò le nostre immagini devono rispettare i criteri di amp-img
. Il processo di building fa uso della seguente sintassi per convertire le immagini nel corretto formato amp-img
.
Filtro delle sezioni
Alcuni documenti potrebbero essere rilevanti per più formati AMP, ma alcuni formati potrebbero richiedere ulteriori spiegazioni o informazioni non richieste da altri. Queste sezioni possono essere filtrate racchiudendole nel seguente codice breve.
[filter formats="websites"] This is only visible for [websites](?format=websites). [/filter] [filter formats="websites"] This is only visible for [websites](?format=websites). [/filter] [filter formats="websites, email"] This is visible for [websites](?format=websites) & [email](?format=email). [/filter] [filter formats="stories"] This is visible for [stories](?format=stories). [/filter]
Suggerimenti
Si possono aggiungere suggerimenti e richiami, racchiudendo il testo nel seguente codice breve:
[tip type="default"] Default tip [/tip] [tip type="important"] Important [/tip] [tip type="note"] Note [/tip] [tip type="read-on"] Read-on [/tip]
Frammenti di codice
I frammenti di codice possono essere inseriti all'interno di blocchi di tre apici inversi, indicando il linguaggio alla fine del primo blocco di apici.
```html // code sample wzxhzdk:1 wzxhzdk:2 Avvertenza: i campioni inline sono incorporati direttamente nella pagina. Ciò potrebbe causare conflitti se i componenti sono già utilizzati nella pagina (ad es. `amp-consent`). ### Anteprima riquadro in primo piano (top-frame) Utilizzare l'anteprima top-frame se occorre specificare elementi di intestazione o definire stili globali in `Hello AMP
``` [/example]
```html``` [/example] Hello World
This is the cover page of this story.
First Page
This is the first page of this story.
per rendere assoluto l'URL dell'endpoint incorporato all'interno di un'e-mail AMP. ```html ``` [/example]
e
: -
Written by @CrystalOnScript