Share
Il progetto AMP fornisce un modo relativamente a mani libere per implementare diversi tipi di ottimizzazione delle pagine web. Puoi leggere la nostra carrellata completa di esattamente cosa è il progetto e cosa fa in AMP Project: renderà i tuoi siti più veloci?.
Per riassumere come è implementato AMP, dovrai:
Una volta che hai fatto le tre cose di cui sopra, il resto del processo di ottimizzazione viene gestito per te dietro le quinte. Inoltre, le pagine AMP devono superare un test di convalida e per poter superare questo test devono essere rispettate tutte le regole relative alle best practice.
Tuttavia, una delle regole di AMP può essere un po 'ingombrante durante lo sviluppo, e questo è il requisito che tutti i CSS personalizzati siano caricati in linea nel capo sezione tra un insieme di tag.
Se scrivi manualmente il tuo CSS direttamente nelle tue pagine ' capo sezioni che affronterai problemi e limiti. Se hai bisogno di cambiare il CSS su più pagine del sito sarà laborioso, e non avrai la possibilità di utilizzare strumenti di miglioramento CSS come preprocessori o minifiers.
Per questo motivo, se vedi di creare più di un modello AMP, dovrai trovare un modo per scrivere il tuo CSS in un foglio di stile esterno in modo da mantenere il normale flusso di lavoro, ma comunque passare la convalida AMP spostando tutti i tuoi CSS in testa sezione dopo il fatto.
In questo suggerimento rapido, imparerai due modi in cui puoi fare proprio questo.
Jade è una lingua che puoi pensare tanto come un preprocessore per HTML. Ti permette di scrivere HTML in una forma concisa e concisa che si inserisce in un normale HTML, ma soprattutto per l'oggetto in questione ti permette anche di importare file CSS e avere il loro intero contenuto in uscita ovunque tu voglia.
In questo metodo, scriverete i vostri modelli AMP usando la sintassi di Jade e importate un file CSS esterno nella sezione head di ciascuno dei vostri template. Questo è uno dei migliori metodi che puoi usare per creare pagine AMP se hai bisogno di generare HTML statico. Ecco come fare.
La prima cosa che devi fare è impostare il foglio di stile esterno che desideri importare nei tuoi modelli AMP. Crea una cartella per ospitare il tuo progetto, quindi al suo interno crea un nuovo foglio di stile e chiamalo "style.css".
Aggiungi del CSS di base al tuo foglio di stile, qualsiasi cosa tu scelga purché il tuo file non abbia dimensioni maggiori di 50kb, in aderenza alle regole di convalida di AMP.
Se desideri solo alcuni test CSS per iniziare, aggiungi quanto segue:
body background: # 3498db; colore: #fff
Il prossimo passo è quello di aggiungere il codice boilerplate di AMP, ma con due differenze significative. Uno, useremo la sintassi di Jade invece del semplice HTML, e due, importeremo il nostro file "style.css" esterno.
Crea un nuovo file nella cartella del tuo progetto con il nome "index.jade" e aggiungi il seguente codice:
doctype html (amp, lang = "en") head meta (charset = "utf-8") titolo AMP via collegamento Jade (rel = "canonical", href = "/ index.html") meta (name = "viewport" , content = "width = device-width, minimum-scale = 1, initial-scale = 1") script (type = "application / ld + json"). "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Framework open source per la pubblicazione di contenuti", "datePublished": "2015-10-07T12: 02: 41Z "," image ": [" logo.jpg "] | | script (async, src = "https://cdn.ampproject.org/v0.js") style (amp-custom) include style.css body h1 Questa è una pagina AMP basata su Jade.
Il codice sopra è lo stesso che troverai nei documenti AMP, appena convertito in sintassi Jade.
Noterai verso la fine di questo codice che abbiamo:
lo stile (amp-custom) include style.css
La lettura della linea stile (amp-custom) emetterà il necessario tag. Indentati nella riga seguente vedrai include style.css. Questo sfrutta le funzionalità di Jade e importerà tutto il contenuto del tuo file "style.css" e lo invierà tra i tag di stile.
Ora hai impostato tutto il codice richiesto per questo metodo e hai solo bisogno di compilare il tuo modello Jade. Puoi farlo tramite un task runner come Gulp o Grunt o tramite un'app di compilazione.
Per progetti relativamente semplici in cui si desidera solo ottenere file compilati, si consiglia di utilizzare un'app chiamata Prepros. Hai solo bisogno della versione gratuita / di prova per lo scopo di questo metodo.
Una volta installato ed eseguito Prepros, tutto ciò che devi fare è trascinare la cartella del progetto sulla sua interfaccia e troverà il tuo file Jade. Inizierà automaticamente a guardare il tuo progetto per le modifiche, quindi basta salvare il tuo file Jade o CSS e questo attiverà Prepros per compilare il tuo modello.
Ora dovresti vedere un nuovo file apparire nel tuo progetto chiamato "index.html", e al suo interno dovresti vedere il tuo codice HTML compilato compilato con CSS personalizzato incorporato:
AMP via Jade Questa è una pagina AMP basata su Jade.
La prossima cosa che vorrai fare è dare un'occhiata all'anteprima del tuo sito. Mentre è possibile visualizzare il tuo file AMP in un browser caricato direttamente dal tuo disco rigido, è buona prassi visualizzare in anteprima i tuoi siti con un localhost, ovvero per simulare un host web sul tuo computer.
Prepros include un'anteprima localhost inclusa che si aggiorna automaticamente quando vengono apportate modifiche al progetto. Tuttavia, non sarà possibile utilizzarlo con AMP (sfortunatamente). Il motivo per cui Prepros carica JavaScript nella sua anteprima per abilitare il live ricaricamento, ma poiché nelle pagine AMP non è consentito alcun JavaScript personalizzato, il validatore rileverà questo script e quindi genererà un errore.
Per questo motivo, l'approccio che consiglio è di impostare l'anteprima del sito localhost usando MAMP per Mac o Windows. Seguirai la stessa procedura descritta in precedenza, con l'unica differenza che creerai la cartella del progetto all'interno della cartella "htdocs" di MAMP prima di trascinarla nell'interfaccia di Prepros. Quando MAMP è in esecuzione, questo ti permetterà di visualizzarlo in anteprima su un URL come http: // localhost: 8888 / myproject.
Con questo approccio ottieni il meglio di entrambi i mondi: un'anteprima localhost senza errori di validazione tramite MAMP e la compilazione automatica di Giada via Prepros.
Se non è necessario generare modelli HTML statici, è possibile utilizzare PHP per generare in modo dinamico il foglio di stile nella sezione principale. Questo approccio richiede probabilmente un po 'meno confusione, ma è appropriato solo se i requisiti del tuo progetto (e il tuo host) consentono PHP.
Per inciso, anche se non hai mai usato PHP prima e vuoi solo scrivere in HTML dritto piuttosto che usare la sintassi di Jade, puoi comunque usare questa tecnica.
Inizia creando un file indice con il codice standard AMP standard aggiunto ad esso, ma invece di nominare il file "index.html" chiamalo "index.php":
Ciao, AMP Benvenuti nel Web mobile
Se hai già lavorato a un modello AMP, puoi anche rinominare il file, modificando l'estensione in ".php", convertendolo in un file PHP. Ad esempio, "about.htm" verrebbe rinominato in "about.php". (Assicurati di cambiare l'estensione anche su qualsiasi link interno).
Ora, crea un foglio di stile esterno chiamato "style.css" nella cartella principale. Se hai già un modello su cui stai già lavorando, taglia qualsiasi CSS che hai attualmente tra le tue tag e incollalo nel tuo foglio di stile esterno.
Per estrarre il CSS esterno nella sezione head del tuo file AMP, incolla questo snippet di PHP a una riga tra tags:
Se non sei particolarmente interessato a PHP puoi lasciarlo, sapendo che lo snippet consentirà a PHP di recuperare il tuo foglio di stile dal server, leggerne il contenuto, quindi stamparlo in linea. Tuttavia, se vuoi saperne di più sullo snippet, scomporlo.
Innanzitutto, abbiamo i tag PHP di apertura e di chiusura . Questi permettono al server di sapere che cosa c'è tra questi tag è PHP e non è un normale HTML.
Quindi stiamo usando la funzione readfile (). Questa funzione controlla il file specificato tra parentesi, lo preleva dal server, ne legge il contenuto e quindi lo rende in linea.
Tra le parentesi abbiamo la funzione getcwd (). Questa funzione ottiene il percorso della directory di lavoro corrente, cioè la directory in cui si trova il nostro file PHP.
Dopodiché abbiamo la stringa (testo normale) "/style.css" che specifica il nome del nostro foglio di stile, relativo alla posizione del nostro file PHP. Quindi tra questa stringa e il getcwd () funzione mettiamo un punto . che concatena (collega) i due insieme per creare il percorso completo al nostro foglio di stile. Ad esempio, in un'anteprima MAMP il percorso sarebbe simile a "/Applications/MAMP/htdocs/myproject/style.css".
Puoi utilizzare questo snippet in tutti i tuoi modelli PHP di cui hai bisogno e tutte le modifiche al foglio di stile esterno verranno visualizzate su tutti i tuoi modelli.
Come con il metodo Jade, un ottimo modo per visualizzare in anteprima le pagine AMP basate su PHP sta utilizzando MAMP, che ha pieno supporto per PHP. Installa MAMP e crea la cartella del progetto nella sua cartella "htdocs" e sarai in grado di visualizzare l'anteprima del tuo sito a un URL come http: // localhost: 8888 / myproject senza alcuna configurazione aggiuntiva.
Abbiamo coperto due modi per mantenere il foglio di stile esterno e il normale flusso di lavoro di sviluppo CSS, ma continuiamo a passare la convalida AMP spostando il tuo CSS in linea. Riassumiamo rapidamente ciascuno di essi.
Accentsconagua
capo sezione. Compilare con Prepros e anteprima con MAMP.capo sezione. Anteprima con MAMP.Per quanto riguarda quale metodo scegliere, dipenderà dalle specifiche del progetto, ma in generale:
Con uno di questi metodi puoi sviluppare i CSS nel modo in cui sei abituato, con le modifiche che si riflettono immediatamente su tutti i modelli e l'accesso ai preprocessori e agli strumenti di ottimizzazione, mentre continui ad integrare il tuo CSS in un modo compatibile con AMP.
Spero che questo aiuti a rendere i tuoi processi di sviluppo AMP un po 'più agevoli!
