Share
Jekyll este un sistem static de generare a site-urilor, care vă permite să preluați fișiere text simplu și să le transformați într-un blog sofisticat, fără a fi nevoie să vă faceți griji cu privire la bazele de date, probleme de securitate, actualizări și alte complicații care pot veni împreună cu multe CMS-uri și platforme de blogging.
Similar cu majoritatea sistemelor de management al site-urilor, este posibil să se utilizeze teme pe site-urile Jekyll. Totuși, în acest moment, Jekyll nu folosește temele așa cum s-ar putea să fii obișnuit.
În prezent, temele lui Jekyll sunt nu pachetele autocolante trebuie să fie aplicate prin intermediul unui instalator. Când descărcați o temă Jekyll, veți descărca de asemenea toate fișierele necesare pentru a rula un întreg site Jekyll.
Acest lucru se va schimba într-o versiune viitoare a lui Jekyll, dar pentru moment va trebui să știți cum să faceți față faptului că temele lui Jekyll vin cu un întreg site atașat acestora.
În acest tutorial vom trece prin crearea unei teme Jekyll încă de la început, începând cu câteva sfaturi de instalare de bază, trecând prin modul în care vă familiarizați cu caracteristicile unei noi teme și trecând prin sfaturi privind crearea unui site nou sau re- pe cea existentă.
Sa incepem!
Categoria Jekyll de pe Envato Market are o mulțime de teme variind de la 19 dolari la 24 dolari. Mai târziu, vom folosi "Writer" și "Astro" (cei doi vânzători de top) pentru a demonstra instalarea.
Teme Jekyll pe piața EnvatoJekyll este conceput pentru a fi gestionat offline pe calculatorul propriu, construit într-un site HTML static, apoi implementat. La adăugarea conținutului, procesul de bază este de a crea un fișier de marcare, de a adăuga o chestiune frontală în partea de sus, de a completa restul fișierului cu conținut, apoi de a reconstrui site-ul.
Odată ce site-ul dvs. este construit, îl puteți implementa în orice mod pe care îl alegeți, fie prin intermediul comenzilor FTP sau GIT. Nu ne vom concentra pe implementarea în acest tutorial, așa că dacă doriți să citiți mai multe despre acest subiect, vizitați documentația Jekyll.
Mai degrabă, ne vom concentra asupra porțiunii procesului de instalare a site-ului Jekyll, care se va petrece offline pe computerul dvs., care începe cu instalarea.
Lucrul cu Jekyll implică un pic de utilizare a liniei de comandă, dar dacă nu ați lucrat niciodată cu linia de comandă înainte de a nu lăsa să vă scoată. Vă recomandăm să treceți prin câteva intrări în seria noastră de instrucțiuni pentru linia de comandă pentru a obține confortabil.
Dacă computerul dvs. rulează Windows, din păcate, Jekyll nu este acceptat oficial. Asta nu înseamnă că nu poți să faci să funcționeze, dar poate că trebuie să sari câteva obstacole. Dacă doriți să faceți o alergare la folosirea lui Jekyll pe Windows, verificați detaliile din documentația lui Jekyll.
În caz contrar, dacă sunteți pe Mac OS X, Linux sau Unix, va trebui să vă asigurați că aveți aceste cerințe prealabile instalate:
Pentru a verifica dacă ați instalat Ruby executați comanda ruby -v. Pentru a verifica dacă Ruby Gems rulează gem -v. În ambele cazuri, aceste comenzi verifică un număr de versiune, atâta timp cât vedeți un număr returnat în terminalul dvs., e bine să mergeți.
Vom lucra cu Jekyll 3.1.x astfel încât nu veți avea nevoie de NodeJS sau Python așa cum este menționat pe pagina de documentare a instalării Jekyll.
Acum, pentru a instala Jekyll pe computerul dvs. rulați comanda: gem install jekyll
Dacă vedeți un mesaj care spune că nu aveți permisiuni de scriere, prefața comanda cu sudo și introduceți parola când vi se solicită.
Veți vedea apoi câteva linii tipărite în terminal care arată procesul de instalare rulat. Când se spune "1 bijuterie instalată" ați terminat.
Să creăm rapid un site Jekyll astfel încât să puteți vedea cum arată în starea lui implicită, fără tematică și să vă familiarizați cu structura sa de fișiere și dosare. Creați un dosar pentru a găzdui site-ul, apoi deschideți un terminal indicat spre dosar și executați: jekyll new .
Notă: dacă la un moment dat doriți să creați un nou site Jekyll în subfolderul s, utilizați în schimb comanda: jekyll nou subfolder_name
Când configurarea site-ului este completă, veți vedea un mesaj în terminalul dvs. spunând Site nou instalat în
Acum rulați comanda sexyll servi pentru a accesa site-ul dvs. offline.
Când vedeți mesajul "Serverul rulează ... apăsați pe ctrl-c pentru a opri" în terminalul dvs., puteți accesa adresa http: // localhost: 4000 într-un browser și verificați site-ul implicit Jekyll.
Acum că ați văzut ce arată structura fișierelor și a dosarelor unui site Jekyll implicit, precum și starea sa non-tematică, veți avea o mai bună înțelegere a ceea ce vedeți într-o temă tipică Jekyll descărcare.
După cum știți de la ceea ce am vorbit în acest tutorial până acum, temele lui Jekyll vin în prezent toate fișierele necesare pentru a rula un întreg site. Și după cum ați văzut în ultima secțiune, odată ce aveți toate fișierele pe care le puteți rula sexyll servi pentru a permite vizualizarea acelui site într-un browser.
Aceasta înseamnă că atunci când descărcați o nouă temă Jekyll, o puteți extrage, rulați sexyll servi și demo tema pe un site pe deplin funcțional Jekyll imediat. Multe teme vor veni chiar și cu conținut demo inclus deja.
Să ne uităm la câteva exemple folosind temele "Writer" și "Astro" (sau orice preferați).
Odată extras, căutați prin intermediul structurii temei până când găsiți dosarul rădăcină care conține toate fișierele unui site Jekyll. Ar trebui să puteți recunoaște acest dosar din instalarea implicită a lui Jekyll mai devreme. Căutați lucruri de genul _config.yml fișierul, _includes directorul și așa mai departe.
Apoi deschideți un terminal în interiorul dosarului și rulați-l sexyll servi.
Dacă totul este de succes, veți vedea mesajul "Adresa serverului: " cu o adresă URL afișată spre sfârșitul terminalului. Copiați și inserați această adresă URL într-un browser și ar trebui să vedeți o demonstrație a noii dvs. teme.
În unele cazuri, este posibil să vedeți un mesaj de eroare când încercați să rulați sexyll servi. Dacă se întâmplă acest lucru, uitați-vă dacă mesajul se plânge de o dependență care lipsește, adică ceva ce necesită tema pentru a funcționa lipsește din configurația dvs..
În acest exemplu, puteți vedea în textul de eroare roșu că bijuteria "jekyll-paginate" lipsește:
O căutare rapidă de la Google indică reputația Github pentru bijuteria respectivă, furnizând comanda necesară pentru instalarea acesteia.
După executarea comenzii respective și instalarea dependenței care lipsește sexyll servi este capabil să ruleze așa cum era de așteptat cu tema.
Dacă accesați adresa URL furnizată și nu vedeți site-ul, cum ar fi de exemplu:
... verificați valoarea baseurl în _config.yml fişier. Acest fișier, despre care vom vorbi mai târziu, controlează configurația generală pentru întregul site.
baseurl variabila este adăugată la domeniul principal, care atunci când lucrăm offline este http: // localhost: 4000.
În exemplul de mai sus, dorim ca site-ul nostru să apară la http: // localhost: 4000. În _config.yml fișierul nostru baseurl este setată la:
baseurl: "http: // localhost"
Acest lucru poate părea la început la început, dar deoarece această valoare este adăugată la domeniul principal, site-ul încearcă să se încarce la adresa http: // localhost: 4000http: // localhost.
Deci, trebuie să schimbăm valoarea într-un șir gol ca acesta:
baseurl: ""
Site-ul dvs. va încărca după cum era de așteptat.
Dacă doriți să încărcați site-ul dintr-un subdirector, schimbați-l baseurl valoare pentru numele de subdirector, fiind sigur de a începe și a termina cu o slash înainte:
baseurl: "/ themedemo /"
Unul dintre principalele motive pentru care este o idee bună să începeți prin a servi tema direct din structura sa existentă este (în afară de verificarea funcționării așa cum era de așteptat), vă oferă posibilitatea de a vă familiariza cu caracteristicile și fluxurile de lucru ale temei.
Deoarece Jekyll oferă o mulțime de flexibilitate, temele sale pot oferi o funcționalitate foarte diferită de la o persoană la alta. După ce ați servit un demo al unei noi teme, faceți o clipă pentru a parcurge și a vedea ce tip de structură are tema. Căutați subiecte cum ar fi dacă tema are pagini de categorie, imagini prezentate, pagini de autor și așa mai departe. Luați notă de aceste caracteristici, astfel încât să puteți căuta documentația temei și să învățați să le folosiți.
De asemenea, ar trebui să căutați structura fișierelor și a dosarelor temei. Principalele domenii pe care doriți să le investigați sunt:
De asemenea, va trebui să aflați ce opțiuni de configurare la nivel de site trebuie să setați în site-uri _config.yml fișierul pentru a utiliza caracteristicile temei, cum ar fi adresele media sociale, informațiile despre autor, linkurile nav și așa mai departe.
Acum ai avut ocazia să te uiți peste temă și să te familiarizezi, este timpul să-l folosești pe site-ul tău. Lăsați versiunea demo pe care ați creat-o deja neschimbată, astfel încât să o aveți pentru a compara site-ul dvs. proaspăt construit împotriva.
Creați un nou folder pe computerul dvs. și re-extrageți toate fișierele temei în el.
De data aceasta, intră în _posts și ștergeți toate fișierele de acolo, astfel încât posturile demo sunt eliminate.
După aceea, ștergeți orice .md (markdown) din dosarul rădăcină, astfel încât toate paginile demo au dispărut.
Dacă doriți, puteți, de asemenea, să găsiți și să ștergeți toate imaginile folosite în cadrul conținutului demo, cum ar fi miniaturile postate, dacă intenționați să le înlocuiți cu propriile dvs. Indiferent dacă imaginile de conținut demonstrative sunt prezente pot varia de la temă la temă.
Dacă tema dvs. are imagini demo pe care doriți să le ștergeți, dar nu sunteți sigur unde sunt, verificați documentația despre temă cum ar trebui să vă spună. În caz contrar, poate fi necesar să treceți codul în șabloanele temei și să-l dați seama de acolo.
Apoi, ar trebui să deschideți _config.yml fișier din dosarul rădăcină și configurați toate variabilele la nivel de site care sunt solicitate de temă. Unele setări vor fi, în general, comune tuturor _config.yml fișiere, cum ar fi titlu, e-mail, Descriere și alți câțiva. Cu toate acestea, unele setări vor fi specifice temei date.
Exact ceea ce trebuie să faci în fișierul de configurare a site-ului depinde de tema specifică, deci este o idee bună să te referi la documentația temei la acest punct pentru a îndruma cu privire la ceea ce face fiecare setare.
De exemplu, în tema Writer este posibil să configurați un meniu de navigare personalizat folosind nav_list pentru a defini o listă de elemente de meniu. Fiecare dintre ele are o etichetă, o permalink și o clasă care va face să apară lângă ea o pictogramă Awesome Font.
În contrast, tema Astro nu utilizează specificul Writer nav_item variabilă, dar are propriile variabile personalizate pentru a vă permite să adăugați linkuri către conturile dvs. de social media diferite, precum și să activați comentariile Disqus și așa mai departe.
Lucrați prin variabilele din propria temă _config.yml fișier până când le-ați setat toate la gustul dumneavoastră.
Rețineți că dacă efectuați astfel de modificări după prima utilizare a noului dvs. site utilizând sexyll servi, va trebui să opriți procesul CTRL + C și reporniți-l pentru a vedea că toate modificările ulterioare au efect.
Unele teme vă vor oferi opțiunea de a alege din mai multe layout-uri pentru pagina dvs. de pornire și de a stabili comenzi care să le afișeze. Dacă acesta este cazul, probabil că veți găsi că setările pot fi modificate în privința din față a index.html fișier din dosarul rădăcină.
Dacă sunt disponibile mai multe layout-uri, probabil veți găsi că puteți alege unul diferit prin modificarea valorii schemă setare-va trebui să te referi la documentația temei pentru a vedea ce valori posibile pot fi folosite.
În timp ce editați fișierul, vedeți dacă există alte valori care ar trebui modificate pentru a activa conținutul care va fi afișat pe pagina de pornire. De exemplu, în tema Writer, este posibil să setați un titlu și o descriere personalizată care să apară numai pe pagina de pornire, precum și o imagine recomandată.
Dacă doriți să adăugați pagini cum ar fi "Despre" sau "Contact" acum este momentul. Adauga o .md (marcaj) în dosarul rădăcină al site-ului pentru fiecare pagină pe care doriți să o configurați.
Notă: unele teme sunt configurate pentru a avea toate paginile plasate într-un subfolder (denumit în mod obișnuit "pagini"), în loc de directorul rădăcină, așa că verificați tema docs pentru a vedea dacă este cazul.
De exemplu, aici am adăugat pagina "Despre site" (about.md), pagina de profil a autorului "About Me" (author-kezz.md) și o pagină "Contact" (contact.md).
Pe măsură ce adăugați fișiere de pagină, veți dori să știți dacă există șabloane de layout specifice și / sau setări pentru materialele frontale pe care ar trebui să le utilizați. Pentru a afla puteți să vă referiți la documentele temelor sau doar să copiați și să lipiți fișierele de marcare din instalarea demo-ului pe care ați făcut-o pentru temă și să le refaceți.
De exemplu, aici am copiat pe o pagină de autor existentă din demo-ul Writer și l-am transformat în propria mea, redenumind-o, apoi editând aspectul și conținutul din față.
Acum, că aveți cele mai importante elemente ale configurației structurii site-ului dvs., este timpul să adăugați câteva postări. Vă recomandăm să copiați un mesaj de la _posts folder în site-ul dvs. demo și inserați-l în instalarea pe care lucrați. Apoi puteți să îl redenumiți cu data și permalink-ul dorit pentru noul dvs. articol. Prin reutilizarea unui post demo, toate materialele necesare vor fi în vigoare și nu trebuie decât să le actualizați.
Unele teme oferă suport pentru pagini de categorie și etichete. Acest lucru nu este întotdeauna cazul și, prin urmare, implementarea poate diferi de la temă la temă. Verificați documentele temei privind ce ar putea fi necesar să faceți pentru a lucra cu categorii și etichete pe site-ul dvs..
De exemplu, în tema Writer, pentru fiecare categorie pe care doriți să o utilizați, este necesar să configurați manual un dosar și un fișier șablon într-un subfolder de site numit "category".
De asemenea, pot exista numeroase alte caracteristici suplimentare pe care tema specifică pe care o utilizați este disponibilă. Asigurați-vă că aveți o bună citire a listei de caracteristici și a documentației pentru a vă asigura că sunteți peste tot ceea ce include.
Dacă aveți deja un site Jekyll și doriți doar să aplicați o nouă temă, veți dori să treceți prin aproape același proces ca și cel de mai sus. Diferența va apărea după ștergerea conținutului demo, când în loc să adăugați pagini și postări proaspete, puteți copia conținutul site-ului existent.
Dacă aveți un site Jekyll existent cu pagini deja existente, copiați și inserați fișierele de marcare asociate de pe site-ul dvs. vechi în cel nou. Treceți prin fiecare pagină și actualizați aspectul frontal pentru a utiliza planurile noii teme și variabilele necesare.
Apoi, copiați toate fișierele postare de pe vechiul dvs. _posts folder în noua ta. Va fi un pic obositor, dar cel mai probabil va trebui să treceți prin fiecare fișier post unul câte unul și să actualizați aspectul frontal cu toate setările necesare pentru noua temă și să ștergeți toate cele necesare pentru vechea temă dar nu mai sunt folosite.
Dacă aveți un dosar cu imagini și alte suporturi media utilizate în paginile și postările de pe site-ul dvs. vechi, copiați întregul dosar în noua structură de site. Postările și paginile dvs. ar trebui să facă în continuare referire la aceleași locații imagine, permițându-le să apară în continuare în conținutul dvs..
Deci, acestea sunt esențiale ale modului în care configurați o temă Jekyll! Punctele mai fine ale procesului vor varia de la o temă la alta, dar puteți continua aceste etape esențiale în fiecare caz. Să recapitulăm rapid acele etape.
Accentsconagua
sexyll servi Sper că acest tutorial v-a ajutat să vă simțiți încrezători să vă ocupați de crearea unui nou site Jekyll cu o temă personalizată sau să treceți tema site-ului existent la una nouă.
Pentru un ghid detaliat cu privire la folosirea lui Jekyll, verificați acest curs de către Guy Routledge:
Vă mulțumim că ați citit și vă voi mai vedea curând!
