Indice

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.

&lsqb;filter formats="websites"]
This is only visible for [websites](?format=websites).
&lsqb;/filter]

&lsqb;filter formats="websites"]
This is only visible for [websites](?format=websites).
&lsqb;/filter]

&lsqb;filter formats="websites, email"]
This is visible for [websites](?format=websites) & [email](?format=email).
&lsqb;/filter]

&lsqb;filter formats="stories"]
This is visible for [stories](?format=stories).
&lsqb;/filter]

Suggerimenti

Si possono aggiungere suggerimenti e richiami, racchiudendo il testo nel seguente codice breve:

&lsqb;tip type="default"]
Default tip
[/tip]

&lsqb;tip type="important"]
Important
[/tip]

&lsqb;tip type="note"]
Note
[/tip]

&lsqb;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

```css
// code sample

  // code sample
```</pre></div>

Se il codice contiene doppie parentesi graffe, come spesso accade usando modelli [`amp-mustache`](../../../../documentation/components/reference/amp-mustache.md?format=websites), occorre racchiudere nelle parentesi la porzione di codice:

<div class="ap-m-code-snippet"><pre>```html<br><br>  // codice con doppie parentesi graffe <br><br>```</pre></div>

### Frammenti di codice in elenchi

Python-Markdown ha alcune limitazioni. Utilizzare la sintassi seguente quando si includono i frammenti di codice in elenchi:

<div class="ap-m-code-snippet"><pre>&lsqb;sourcecode:html]
      <html>
        <p>Indented content.</p>
      </html>
    &lsqb;/sourcecode]</pre></div>

## Anteprima di esempi di codice

Gli esempi di codice possono contenere un'anteprima e/o un collegamento a una versione [AMP Playground](https://playground.amp.dev/).

<div class="ap-m-code-snippet">
  <pre>&lsqb;example preview="default: none|inline|top-frame"
          playground="default: true|false"
          imports="<custom-element-1>,<custom-element-2>,..."
          template="<custom-template>"]
  ```html
    // code sample

[/example]

l'anteprima verrà automaticamente trasformata nel formato attualmente selezionato all'apertura del playground 🤯!

Usare l'attributo preview per definire la generazione dell'anteprima:

none: Non saranno generate anteprime
inline: L'anteprima di esempio appare sopra al codice sorgente. Un'anteprima inline è possibile solo per esempi di siti web normali il cui codice non contiene elementi head. Usare questa opzione per piccoli esempi che non richiedono alcuno stile o elementi head (gli elementi importati non devono essere considerati poiché sono indicati tramite l'attributo imports).
top-frame: l'anteprima di esempio appare al di sopra del codice in un iframe. L'orientamento può essere scelto tra le modalità portrait e landscape. L'orientamento può essere predefinito usando l'attributo aggiuntivo:
orientation: default: landscape|portrait

Se occorrono elementi personalizzati, indicarli nell'atributo imports tramite un elenco di elementi separati da virgola, in cui il none del componente è seguito dai due punti e dalla versione. Se il codice fa uso di amp-mustache indicare la dipendenza nell'attributo template.

Per contenuti e-mail con collegamenti a risorse, usare nel sorgente il segnaposto .

Esempio Inline

Ecco un semplice esempio di codice incorporato inline. Il CSS può essere definito tramite stili inline:



  
     Hello World
  
    ```html
    Hello World
    ```
  [/example]

Questo è il suo aspetto:

[example preview="inline" playground="true"]

<div style="background: red; width: 200px; height: 200px;">Hello World</div>

Apri questo frammento in playground

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 <style amp-custom> .

non aggiungere alcun codice boilerplate AMP all'intestazione poiché verrà aggiunto automaticamente, in base al formato AMP. Aggiungere all'intestazione solo elementi richiesti dall'esempio!

  [example preview="top-frame"
         playground="true"]
    ```html
    <head>
      <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
      <style amp-custom>
        body {
          background: red;
        }
      </style>
    </head>
    <body>
      <h1>Hello AMP</h1>
      <amp-youtube width="480"
        height="270"
        layout="responsive"
        data-videoid="lBTCB7yLs8Y">
      </amp-youtube>
    </body>
    ```
  [/example]

Questo è il suo aspetto:

<head>
  <script
    async
    custom-element="amp-youtube"
    src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"
  ></script>
  <style amp-custom>
    body {
      background: red;
    }
  </style>
</head>
<body>
  <h1>Hello AMP</h1>
  <amp-youtube
    width="480"
    height="270"
    layout="responsive"
    data-videoid="lBTCB7yLs8Y"
  >
  </amp-youtube>
</body>

Apri questo frammento in playground

Storie AMP

Per l'anteprima delle storie AMP, usare le opzioni preview="top-frame" e orientation="portrait".

  [example preview="top-frame"
         orientation="portrait"
         playground="true"]
    ```html
    <head>
      <script async custom-element="amp-story"
          src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
      <style amp-custom>
        body {
          font-family: 'Roboto', sans-serif;
        }
        amp-story-page {
          background: white;
        }
      </style>
    </head>
    <body>
      <amp-story standalone>
        <amp-story-page id="cover">
          <amp-story-grid-layer template="vertical">
            <h1>Hello World</h1>
            <p>This is the cover page of this story.</p>
          </amp-story-grid-layer>
        </amp-story-page>
        <amp-story-page id="page-1">
          <amp-story-grid-layer template="vertical">
            <h1>First Page</h1>
            <p>This is the first page of this story.</p>
          </amp-story-grid-layer>
        </amp-story-page>
      </amp-story>
    </body>
    ```
  [/example]

Questo è il suo aspetto:

<head>
  <script
    async
    custom-element="amp-story"
    src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
  ></script>
  <style amp-custom>
    body {
      font-family: 'Roboto', sans-serif;
    }
    amp-story-page {
      background: white;
    }
  </style>
</head>
<body>
  <amp-story standalone>
    <amp-story-page id="cover">
      <