Share
In questo tutorial ti illustrerò tutti gli aspetti chiave dell'utilizzo del supporto AMP integrato di Ghost.
Nota: questo articolo presuppone che tu abbia già familiarità con la modalità di creazione di pagine AMP valide e, in quanto tale, si concentri sui dettagli specifici dell'utilizzo combinato di Ghost e AMP. Se non conosci l'AMP, controlla:
Suppongo anche che tu abbia conoscenza di come creare un tipico tema Ghost. Altrimenti, puoi imparare come leggendo:
In realtà, Ghost ha il supporto AMP automatico senza che tu debba alzare un dito. La versione AMP di qualsiasi post può essere visitata solo aggiungendo / Amp / al suo URL. La versione normale di qualsiasi post includerà automaticamente anche un collegamento nel sezione per far sapere a Google che questa versione di AMP è disponibile.
Grazie a questa funzionalità automatica, se visiti un post Ghost utilizzando Chrome con l'estensione AMP Validator installata, vedrai un'icona di collegamento blu che indica che è stata rilevata una versione AMP della pagina.
Fai clic sull'icona e verrai indirizzato alla versione AMP del post, a quel punto vedrai l'icona diventare verde per indicare il codice AMP valido.
Questo supporto AMP automatizzato è tuttavia solo per singoli post. Altri tipi di contenuti come la tua home page o le tue pagine di tag non avranno versioni AMP a meno che tu non sviluppi manualmente l'intero tema per essere interamente costruito con codice AMP compatibile.
Per impostazione predefinita, la presentazione dei post AMP su Ghost è controllata da un modello interno. Per vedere come questo modello è messo insieme e ottenere un riferimento per come AMP funziona con Ghost, puoi trovare questo modello predefinito all'interno della tua installazione Ghost su /core/server/apps/amp/lib/views/amp.hbs
Se preferisci utilizzare il tuo markup e lo stile per i tuoi post AMP, devi creare un modello denominato "amp.hbs"nella cartella radice del tuo tema.
Il tuo modello AMP non sarà in grado di estendersi sul normale modello "default.hbs", come faresti di solito quando crei modelli di temi Ghost. Piuttosto, dovrebbe essere creato come un documento HTML autonomo completo con il proprio html, capo e corpo elementi.
La ragione di ciò è che devi assicurarti di:
Accentsconagua
capo sezioneUn file "default.hbs" in un tipico tema Ghost non soddisfa i suddetti requisiti, quindi la necessità di avere un "amp.hbs" autonomo.
Ci sono un paio di cose da sapere con i CSS nei tuoi modelli AMP.
Innanzitutto, se stai caricando un font personalizzato da una delle fonti approvate, assicurati di farlo in un modo valido per AMP. Ad esempio, un carattere di Google potrebbe essere caricato tramite un URL come //fonts.googleapis.com nel tuo modello "default.hbs", ma per passare la convalida nel tuo modello "amp.hbs" dovresti cambiarlo https://fonts.googleapis.com
L'altra considerazione primaria è che devi avere tutto il tuo CSS personalizzato in linea tra tag nel sezione, con il tuo CSS non superiore a 50kb e senza violare le regole CSS di AMP.
Ci sono due modi per farlo:
Se il tuo sito "normale" ha davvero bisogno di alcuni CSS pesanti, potresti aver bisogno dell'opzione precedente, ma altrimenti potresti trovare più facile usare quest'ultimo.
Mantenere l'intero foglio di stile del tuo sito sotto i 50kb può sembrare scoraggiante, dato che alcuni framework CSS popolari sono più nella regione di 120kb - 150kb, ma se ti metti in conto con l'obiettivo da 50kb in mente è abbastanza fattibile. Ad esempio, il non terminato CSS del tema predefinito Ghost Casper è 45.5kb.
Se desideri utilizzare questo approccio, puoi creare un modello parziale denominato "css.hbs" e inserire tutto il codice CSS del tuo sito direttamente all'interno. Quindi nel tuo modello "default.hbs" puoi caricare questo CSS con:
E nel tuo modello "amp.hbs" usa invece:
Per sfruttare al massimo il tuo CSS, puoi anche ridimensionarlo prima di inserirlo in questo parziale. Sarai in grado di monitorare le dimensioni del file di questo parziale per avere un'idea abbastanza precisa se ti trovi entro il limite di 50kb.
Nella sezione head del tuo modello "amp.hbs" dovrai includere l'espressione Amp_ghost_head invece del solito Ghost_head. Ciò garantirà che JS non venga emesso in testa, il che interromperà la convalida AMP.
E, diversamente dai normali modelli Ghost, dovresti omettere il Ghost_foot espressione tutti insieme.
Tutto il contenuto di un post può essere esposto nel modello "amp.hbs" utilizzando l'espressione di blocco post ... / post. Tra questi tag è possibile utilizzare i seguenti helper per l'output del contenuto:
Puoi anche accedere a tutti @blog dati globali all'interno del modello "amp.hbs", come @Titolo del Blog e @ blog.url, se dentro o fuori il post ... / post espressione.
Come sai, AMP richiede l'utilizzo di un numero di propri elementi personalizzati al posto di normali elementi HTML. Ciò significa che ci sono due aspetti dei tuoi siti Ghost in cui è necessario assicurarsi che vengano utilizzati gli elementi AMP corretti:
Nel contenuto del tuo post Ghost può automaticamente rilevare immagini, iframe, gif e elementi audio quindi riscriverli nelle loro controparti AMP.
Per abilitare questo devi includere amp_components nella tua sezione di testa, appena prima della chiusura tag, che produrrà eventuali script aggiuntivi richiesti dagli elementi personalizzati di AMP. Dovrai anche usarlo Amp_content invece di soddisfare quindi viene prodotto il markup corretto per gli elementi personalizzati.
Per quanto riguarda il codice nel modello "amp.hbs", tuttavia, dovrai aggiungere manualmente gli elementi AMP richiesti. Ad esempio, se desideri includere l'immagine in primo piano del post, utilizzerai:
Questo copre tutti gli elementi essenziali per accedere al supporto AMP di Ghost. Facciamo un breve riassunto dei punti chiave:
Amp_ghost_head invece di Ghost_head Ghost_foot amp_components subito prima della chiusura post ... / post espressione di blocco e tutto @blog dati globali. Amp_content per l'output di contenuti. Questo dovrebbe essere inserito nel post ... / post bloccare.Questo ci porta alla fine di questo breve tutorial. Tieni d'occhio altri suggerimenti sull'utilizzo di AMP con altre piattaforme di creazione siti, in arrivo molto presto!
