Cum se folosește suportul AMP încorporat de Ghost

În acest tutorial vă voi prezenta toate aspectele cheie ale utilizării suportului AMP încorporat al lui Ghost.

Notă: acest articol presupune că sunteți deja familiarizat cu modul de creare a paginilor valide AMP și, ca atare, se va concentra pe detaliile specifice utilizării împreună a Ghost și AMP. Dacă sunteți nou la AMP, verificați:

AMP în 60 de secunde
Sus și a alerga cu AMP
Cum să faci o pagină AMP de bază de la zero
Proiectul AMP: va face site-urile dvs. mai rapide
Cum să utilizați amp-img și amp-video pentru a accelera site-ul dvs.

De asemenea, presupun că aveți cunoștințe despre cum să creați o temă tipică Ghost. Dacă nu, puteți afla cum citiți:

Actualizare: Ce este nou în temele Ghost
Construiește o temă Ghost de la zero
Dezvoltarea temelor fantomă: Dincolo de elementele de bază

Ghost's built-in AMP Support

De fapt, Ghost are suport automat AMP fără a fi nevoie să ridici degetul. Versiunea AMP a oricărei postări poate fi vizitată doar prin adăugare / Amp / la adresa URL. Versiunea obișnuită a oricărei postări va include, de asemenea, în mod automat un link în pentru a permite Google să afle că această versiune AMP este disponibilă.

Datorită acestei funcționalități automate, dacă vizitați o postare Ghost care utilizează Chrome cu extensia AMP Validator instalată, veți vedea o mică pictogramă de legătură albastră indicând o versiune AMP a paginii a fost detectată.

Faceți clic pe pictogramă și veți fi luați la versiunea AMP a postării, moment în care veți vedea pictograma deveni verde pentru a indica codul AMP valabil.

Acest suport automatizat AMP este însă numai pentru posturile unice. Alte tipuri de conținut, cum ar fi pagina dvs. de pornire sau paginile de etichete, nu vor avea versiuni AMP dacă nu vă dezvoltați manual întreaga temă pentru a fi construită integral din codul compatibil AMP.

Utilizând un șablon personalizat AMP

În mod implicit, prezentarea postărilor AMP pe Ghost este controlată de un șablon intern. Pentru a vedea cum este creat acest șablon și pentru a obține o referință pentru modul în care AMP funcționează cu Ghost, puteți găsi acest șablon implicit în interiorul instalării Ghost la /core/server/apps/amp/lib/views/amp.hbs

Dacă preferați să utilizați propriul dvs. markup și stil pentru postările AMP, va trebui să creați un șablon numit "amp.hbs"în directorul rădăcină al temei.

Șablonul AMP nu va putea să se extindă pe șablonul obișnuit "default.hbs", așa cum ați proceda, de obicei, atunci când creați șabloane tematice Ghost. Mai degrabă, ar trebui să fie creat ca un document HTML complet autonom cu propriile sale html, cap și corp element.

Motivul pentru aceasta este că trebuie să vă asigurați:

În deschidere, utilizați codul esențial AMP tag și în cap secțiune
CSS este încărcat într-un mod valid AMP
Scripturile AMP necesare pot fi încărcate de Ghost
Nu se încarcă JS personalizat

Un fișier "default.hbs" într-o temă tipică Ghost nu ar îndeplini cerințele de mai sus, de aici necesitatea de a avea un "amp.hbs".

Manipularea CSS

Există câteva lucruri pe care trebuie să le cunoașteți cu CSS în șabloanele AMP.

În primul rând, dacă încărcați într-un font personalizat dintr-una din sursele aprobate, asigurați-vă că o faceți într-un mod valid AMP. De exemplu, un font Google poate fi încărcat printr-o adresă URL asemănătoare //fonts.googleapis.com în șablonul dvs. "default.hbs", dar pentru a trece validarea în șablonul dvs. "amp.hbs", va trebui să schimbați https://fonts.googleapis.com

Celălalt aspect principal este că trebuie să aveți întreaga CSS personalizată etichetele din , cu CSS-ul dvs. care nu depășește 50kb și care nu încalcă regulile AMP CSS.

Există două modalități de a face acest lucru:

Scrieți CSS specifică AMP și folosiți-o exclusiv pe paginile AMP.
Scrieți CSS pentru întregul dvs. site care respectă regulile AMP și folosiți-l peste tot.

Dacă site-ul dvs. "obișnuit" are într-adevăr nevoie de unele CSS grele, este posibil să aveți nevoie de opțiunea anterioară, dar în caz contrar s-ar putea să fiți mai ușor să îl utilizați.

Păstrarea întregii foi de stil a site-ului sub 50kb ar putea părea descurajantă dat fiind că unele cadre CSS populare sunt mai mult în regiunea de 120kb - 150kb, dar dacă vă stabiliți cu obiectivul de 50kb în minte, este destul de realizabil. De exemplu, CSS-ul neinminat al Casper implicit temă Ghost este de 45.5kb.

Dacă doriți să utilizați această abordare, puteți să creați un șablon parțial numit "css.hbs" și să plasați direct codul CSS al site-ului. Apoi, în șablonul "default.hbs" puteți încărca acest CSS cu:

Și în șablonul "amp.hbs" utilizați:

Pentru a stoarce la maximum CSS-ul dvs. puteți de asemenea să-l minifializați înainte de al plasa în acest parțial. Veți putea monitoriza dimensiunea fișierului acestui parțial pentru a obține o idee destul de bună dacă sunteți în limita de 50kb.

Expresii ale capului și ale picioarelor

În secțiunea cap din șablonul dvs. "amp.hbs" va trebui să includeți expresia Amp_ghost_head în loc de cele obișnuite Ghost_head. Acest lucru va asigura că nu se transmite JS în cap, ceea ce ar rupe validarea AMP.

Și, spre deosebire de șabloanele regulate Ghost, ar trebui să omiteți Ghost_foot expresie toate împreună.

Accesarea datelor

Tot conținutul unei postări poate fi expus în șablonul "amp.hbs" utilizând expresia bloc post ... / post. Între aceste etichete puteți utiliza următorii utilizatori pentru a obține conținut:

titlu
Url
autor
Data
extras
Post_class
Etichete

Puteți, de asemenea, accesa toate @blog date globale din cadrul șablonului "amp.hbs", cum ar fi @Titlu de Blog și @ blog.url, în interiorul sau în afara zonei post ... / post expresie.

Utilizarea elementelor AMP

După cum știți, AMP cere ca anumite elemente personalizate să fie folosite în locul elementelor HTML obișnuite. Acest lucru înseamnă că există două aspecte ale site-urilor dvs. Ghost în care trebuie să vă asigurați că elementele AMP corecte sunt utilizate:

Conținutul mesajului scos din spate
Codul dvs. în șablonul dvs. "amp.hbs"

În conținutul postului dvs. Ghost poate detecta automat imaginile, iframe-urile, gif-urile și elementele audio, apoi să le rescrie în omologii lor AMP.

Pentru a activa acest lucru, va trebui să includeți amp_components în secțiunea capului, chiar înainte de închidere tag, care va scoate orice script-uri suplimentare Elementele custom AMP necesare. De asemenea, va trebui să utilizați Amp_content in loc de conţinut astfel încât să se producă marcarea corectă a elementelor personalizate.

În ceea ce privește codul din șablonul dvs. "amp.hbs", va trebui să adăugați manual toate elementele AMP necesare. De exemplu, dacă doriți să includeți imaginea recomandată a postării, veți folosi:

Înfășurarea în sus

Aceasta acoperă toate elementele esențiale ale atingerii în Ghost în suportul AMP construit. Să facem o recapitulare rapidă a punctelor-cheie:

Funcția AMP funcționează automat pe postări unice.
Pentru a vedea versiunea AMP a postului / Amp / la adresa URL.
Pentru a personaliza prezentarea posturilor AMP, creați un șablon numit "amp.hbs" în dosarul rădăcină al temei.
Asigurați-vă că CSS este utilizat într-un mod valid AMP.
Luați în considerare codarea stilului valabil AMP pentru întregul dvs. site și plasarea acestuia într-un șablon parțial, astfel încât acesta să poată fi utilizat atât în șabloanele dvs. "default.hbs", cât și în "amp.hbs".
Include Amp_ghost_head in loc de Ghost_head
Nu includeți Ghost_foot
Include amp_components chiar înainte de închidere etichetă.
În șablonul "amp.hbs" puteți utiliza funcția post ... / post expresie bloc și tot @blog date globale.
Utilizare Amp_content pentru a genera conținut. Acest lucru ar trebui să fie plasat în interiorul post ... / post bloc.
Asigurați-vă că toate elementele greu codate în șablonul "amp.hbs" utilizează elementele personalizate AMP acolo unde este necesar.

Asta ne aduce la sfârșitul acestui tutorial rapid. Fii atent pentru mai multe sfaturi despre utilizarea AMP cu alte platforme de creare de site-uri, care vin foarte curand!

Citirea în continuare

Documentația AMP a lui Ghost

Web design