Share
Proiectul AMP oferă o modalitate relativ liberă de a implementa mai multe tipuri de optimizare a paginilor web. Puteți citi întregul nostru studiu despre exact ceea ce este proiectul și ce face în proiectul AMP: va face site-urile dvs. mai rapide?.
Pentru a rezuma modul în care AMP este implementat, veți:
După ce ați făcut cele trei lucruri de mai sus, restul procesului de optimizare este gestionat pentru dvs. în spatele scenei. În plus, paginile AMP trebuie să treacă un test de validare și, pentru a trece acest test, trebuie respectate toate regulile de bune practici.
Una dintre regulile AMP poate fi puțin dificilă în timpul dezvoltării, și aceasta este cerința ca toate CSS personalizate să fie încărcate în linie în cap secțiune între un set de Etichete.
Dacă scrieți manual CSS-ul dvs. direct în paginile dvs. " cap secțiuni se vor confrunta cu probleme și limitări. În cazul în care trebuie să modificați CSS pe mai multe pagini de site-uri, va fi laborios și nu veți avea opțiunea de a utiliza instrumente de îmbunătățire CSS, cum ar fi preprocesoarele sau minifiștii.
Din acest motiv, dacă vă vedeți că faceți mai mult de un șablon AMP, veți dori să găsiți o modalitate de a scrie CSS într-o foaie de stil externă, astfel încât fluxul de lucru obișnuit să fie menținut, dar să treacă încă validarea AMP prin mutarea tuturor CSS-urilor în cap secțiune după fapt.
În acest sfat rapid, veți învăța două moduri în care puteți face asta.
Jade este o limbă pe care o puteți gândi la fel de mult ca un preprocesor pentru HTML. Acesta vă permite să scrieți HTML într-o formă terse, sub presiune, care se compilează în HTML obișnuit, dar cel mai important pentru subiectul la îndemână vă permite, de asemenea, să importați fișiere CSS și să obțineți conținutul complet al acestora oriunde doriți.
În această metodă, veți scrie șabloanele AMP utilizând sintaxa Jade și veți importa un fișier CSS extern în secțiunea cap din fiecare șablon. Aceasta este una dintre cele mai bune metode pe care le puteți utiliza pentru a crea pagini AMP dacă aveți nevoie să trimiteți cod HTML static. Iată cum să faceți asta.
Primul lucru pe care trebuie să-l faceți este să configurați foaia de stil externă pe care doriți să o importați în șabloanele AMP. Creați un dosar care să găzduiască proiectul dvs., apoi creați în interiorul acestuia o foaie de stil nouă și denumiți-o "style.css".
Adăugați câteva CSS de bază în foaia dvs. de stil, oricare doriți, atâta timp cât fișierul dvs. nu rămâne la dimensiuni mai mari de 50kb, în conformitate cu regulile de validare ale AMP.
Dacă doriți doar ca un test CSS să vă inițieze, adăugați următoarele:
corp fundal: # 3498db; culoare: #fff
Următorul pas este de a adăuga codul de boilerplate al AMP, dar cu două diferențe semnificative. Unul, vom folosi sintaxa Jade în loc de HTML drept și două, vom importa fișierul nostru extern "style.css".
Creați un fișier nou în folderul proiectului numit "index.jade" și adăugați următorul cod:
doctype html (AMP, lang = "en") capul meta (charset = "utf-8") titlu AMP prin linkul Jade meta (name = "viewport" , content = "lățime = lățimea dispozitivului, scara minimă = 1, scala inițială = 1") (tip = "application / ld + json"). "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework pentru publicarea conținutului", "datePublished": "2015-10-07T12: 02: 41Z "," imagine ": [" logo.jpg "] | script-ul (async, src = "https://cdn.ampproject.org/v0.js") stilul (amp-custom) include stil.css body h1 Aceasta este o pagina AMP bazata pe Jade.
Codul de mai sus este același cu cel pe care îl veți găsi în documentele AMP, doar convertite în sintaxa Jade.
Veți observa în partea de jos a acestui cod pe care îl avem:
stil (amp-custom) include stil.css
Citirea liniei stil (amp personalizat) va scoate numărul necesar Etichete. Indentat pe următoarea linie veți vedea include stil.css. Aceasta folosește funcțiile Jade și va importa întregul conținut al fișierului dvs. "style.css" și îl va scoate între etichetele de stil.
Acum ați configurat tot codul necesar pentru această metodă și trebuie doar să vă compilați șablonul Jade. Puteți face acest lucru fie printr-un alergător de sarcină, cum ar fi Gulp sau Grunt, sau printr-o aplicație de compilare.
Pentru proiectele relativ directe în care doriți doar să obțineți fișiere compilate, vă recomandăm să utilizați o aplicație numită Prepros. Veți avea nevoie de versiunea gratuită / de încercare numai în scopul acestei metode.
Odată ce ați instalat și rulați Prepros, tot ce trebuie să faceți este să glisați folderul proiectului pe interfața sa și acesta va găsi fișierul Jade. Acesta va începe automat vizionarea proiectului dvs. pentru modificări, așa că salvați fie fișierul Jade sau CSS și care va declanșa Prepros pentru a vă compila șablonul.
Ar trebui să vedeți acum un nou fișier în proiectul dvs. numit "index.html", iar în interiorul acestuia ar trebui să vedeți codul dvs. de execuție HTML completat cu CSS personalizat inline:
AMP prin Jade Aceasta este o pagină AMP bazată pe Jade.
Următorul lucru pe care doriți să-l faceți este să examinați o previzualizare a site-ului dvs. Deși este posibil să vizualizați doar fișierul dvs. AMP într-un browser încărcat direct de pe hard disk, este o practică bună să previzualizați site-urile dvs. cu o localhost, adică să simulați o gazdă Web pe computerul dvs..
Prepros vine cu o previzualizare localhost inclusă, care se actualizează automat când se fac modificări în proiectul dvs. Cu toate acestea, nu veți putea să o utilizați cu AMP (din păcate). Motivul pentru care Prepros încarcă unele JavaScript în previzualizare pentru a permite reîncărcarea live, dar datorită faptului că nu este permis JavaScript particularizat în paginile AMP, validatorul va detecta acest script și ar arunca apoi o eroare.
Din acest motiv, abordarea pe care o recomand este să configurați site-ul local preview folosind MAMP pentru Mac sau Windows. Veți urma același proces pe care l-am parcurs mai sus, singura diferență fiind că veți crea dosarul de proiect în interiorul folderului "htdocs" MAMP înainte de al trage pe interfața dvs. Prepros. Când rulează MAMP, aceasta vă va permite să o previzualizați la un URL ca http: // localhost: 8888 / myproject.
Cu această abordare veți obține cele mai bune din ambele lumi: o previzualizare localhost fără erori de validare prin MAMP și compilare automată Jade prin Prepros.
Dacă nu aveți nevoie să generați șabloane HTML statice, aveți opțiunea de a utiliza PHP pentru a scoate în mod dinamic foaia de stil în secțiunea de cap. Această abordare necesită, probabil, un pic mai puțin tam-tam, dar este adecvată numai dacă cerințele proiectului dvs. (și gazda dvs.) permit PHP.
De altfel, chiar dacă nu ați folosit niciodată PHP înainte și doriți doar să scrieți în HTML direct, în loc să utilizați sintaxa Jade, puteți utiliza în continuare această tehnică.
Începeți prin a crea un fișier index cu codul standard de bootplate AMP adăugat la acesta, dar în loc de a numi fișierul "index.html" nume-l "index.php":
Bună ziua, AMP-uri Bine ați venit pe webul mobil
Dacă ați lucrat deja la un șablon AMP, puteți doar să redenumiți fișierul, schimbând extensia în ".php", transformându-l astfel într-un fișier PHP. De exemplu, "about.htm" va fi redenumit la "about.php". (Asigurați-vă că schimbați extensia pe oricare dintre legăturile interne.)
Acum, creați o foaie de stil externă numită "style.css" în dosarul rădăcină. Dacă aveți un șablon pe care lucrați deja, tăiați orice CSS pe care îl aveți în prezent între dvs. și lipiți-o în foaia de stil externă.
Pentru a extrage CSS-ul extern în secțiunea capului fișierului AMP, trebuie doar să lipiți acest fragment dintr-o singură linie PHP între Etichete:
Dacă nu sunteți deosebit de interesat de PHP, puteți lăsa acest lucru, știind că fragmentul va permite ca PHP să preia foaia de stil de pe server, să citească conținutul său, apoi să îl trimită în linie. Cu toate acestea, dacă doriți să aflați mai multe despre fragment, să o desființăm.
În primul rând, avem etichetele PHP de deschidere și închidere . Acestea permit serverului să știe că ceea ce este între aceste etichete este PHP și nu HTML obișnuit.
Apoi folosim funcția readfile (). Această funcție se uită la fișierul specificat între paranteze, îl prelucrează de pe server, citește conținutul său, apoi iese acel conținut în linie.
Între paranteze avem funcția getcwd (). Această funcție devine calea spre directorul de lucru curent, adică directorul în care se află fișierul nostru PHP.
După aceasta, avem șirul (text normal) "/style.css" care specifică numele foii de stil, în funcție de locația fișierului nostru PHP. Apoi, între acest șir și getcwd () funcția pe care o punem un punct . care leagă (conectează) pe cele două împreună pentru a crea calea completă spre foaia de stil. De exemplu, într-o previzualizare MAMP calea ar fi ceva de genul "/Applications/MAMP/htdocs/myproject/style.css".
Puteți utiliza acest fragment în cât mai multe dintre șabloanele dvs. PHP, iar orice modificare a foii de stil externe va fi transmisă în toate șabloanele dvs..
Ca și în cazul metodei Jade, o modalitate excelentă de previzualizare a paginilor AMP bazate pe PHP utilizează MAMP, care are suport complet pentru PHP. Instalați MAMP și creați folderul de proiect în interiorul directorului "htdocs" și veți putea să vă previzualizați site-ul la un URL ca http: // localhost: 8888 / myproject fără nicio configurare suplimentară.
Am acoperit acum două moduri în care vă puteți păstra foaia de stil existentă și fluxul normal de lucru pentru dezvoltarea CSS, dar totuși treci validarea AMP mutându-vă CSS în linie. Să rezumăm rapid fiecare dintre ele.
Accentsconagua
cap secțiune. Compilați-le cu Prepros și previzualizați-le cu MAMP.cap secțiune. Previzualizați cu MAMP.În ceea ce privește metoda pe care o alegeți, aceasta va depinde de specificul proiectului dvs., dar în general:
Cu oricare dintre aceste metode, puteți dezvolta CSS în modul în care vă obișnuiți, cu modificările instantanee reflectate în toate șabloanele și accesul la preprocesoare și instrumente de optimizare, în timp ce încorporați în continuare CSS într-un mod compatibil AMP.
Sper că acest lucru vă ajută să vă faceți procesele de dezvoltare a AMP puțin mai ușoare!
