AMP

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.

Immagine dell'app di avvio dell'esercitazione per script amp di base

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]
Questo è il suo aspetto: [example preview="top-frame" playground="true"] wzxhzdk:3
Apri questo frammento in playground
### Storie AMP Per l'anteprima delle storie AMP, usare le opzioni `preview="top-frame"` e `orientation="portrait"`.
```html

Hello World

This is the cover page of this story.

First Page

This is the first page of this story.

``` [/example]
Questo è il suo aspetto: [example preview="top-frame" orientation="portrait" playground="true"] wzxhzdk:4
Apri questo frammento in playground
### URL assoluti per e-mail AMP Notare l'utilizzo di per rendere assoluto l'URL dell'endpoint incorporato all'interno di un'e-mail AMP.
```html
``` [/example]
Questo è il suo aspetto: [example preview="top-frame" playground="true"] wzxhzdk:5
Apri questo frammento in playground
### Salto di modelli mustache Ecco un esempio di codice `top-frame` che fa uso di un endpoint remoto. I modelli Mustache possono essere saltati nel codice usando le opzioni e :
```html ``` [/example]
Questo è il suo aspetto: [example preview="top-frame" playground="true" imports="amp-list:0.1" template="amp-mustache:0.2"] wzxhzdk:6
Apri questo frammento in playground
## Collegamenti Per collegarsi ad altre pagine, è possibile usare la sintassi del collegamento markdown standard: wzxhzdk:7 Il riferimento utilizzato per il collegamento a un'altra pagina su amp.dev, sarà un percorso relativo al file di destinazione. ### Ancoraggi I collegamenti a sezioni specifiche di un documento sono realizzati tramite ancoraggi: wzxhzdk:8 Per effettuare collegamenti a una sezione, occorre creare in essa la destinazione di ancoraggio tramite l'opzione `