Share
Jekyll är ett statiskt webbplatsgenereringssystem som låter dig ta vanliga textfiler och konvertera dem till en sofistikerad blogg utan att behöva oroa dig för databaser, säkerhetsproblem, uppdateringar och andra komplikationer som kan komma med många CMS och bloggar.
På samma sätt som de flesta webbplatshanteringssystem är det möjligt att använda teman på Jekyll-sidor. Men för tillfället använder Jekyll inte teman på det sätt du brukar vara van vid.
Just nu är Jekyll-teman inte självständiga paket måste tillämpas via en installatör. När du laddar ner ett Jekyll-tema kommer du faktiskt också ladda ner alla filer krävs för att köra en hel Jekyll webbplats.
Detta kommer att förändras i en framtida version av Jekyll, men för nu behöver du veta hur man ska hantera det faktum att Jekyll-teman kommer med en hel sida kopplad till dem.
I denna handledning kommer vi att gå igenom att skapa ett Jekyll-tema från början, med början av några grundläggande installationsråd, genom att lära känna dig av ett nytt temas funktioner och gå igenom tips om hur du skapar en ny webbplats eller re- teman en befintlig.
Låt oss börja!
Jekyll-kategorin på Envato Market har en massa teman som sträcker sig från $ 19 till $ 24. Senare använder vi "Writer" och "Astro" (de två nuvarande toppsäljare) för att visa installation.
Jekyll-teman på Envato MarketJekyll är utformad för att hanteras offline på din egen dator, inbyggd i en statisk HTML-sida, som sedan distribueras. När du lägger till innehåll är den grundläggande processen att skapa en markdown-fil, lägg till en del främre saker högst upp, fyll i resten av filen med innehåll och bygg sedan om din webbplats.
När din webbplats är byggd kan du distribuera den på något sätt du väljer, vare sig det är via FTP eller Git-kommandon. Vi kommer dock inte att fokusera på utplacering i denna handledning, men om du vill läsa mer om ämnet, besök Jekyll dokumentationen.
Snarare kommer vi att fokusera på den del av din Jekyll-installationsprocess som händer offline på din dator, som alla börjar med installationen.
Att arbeta med Jekyll involverar lite kommandoradsanvändning, men om du aldrig har arbetat med kommandoraden innan låt det inte skjuta upp dig. Jag rekommenderar att du kör igenom några poster i vår serie Kommandorad för webbdesign för att bli bekväm.
Om din dator kör Windows, är Jekyll tyvärr inte officiellt stödd. Det betyder inte att du inte kan få det att fungera, men du kanske måste hoppa några hinder. Om du vill ta en körning med Jekyll på Windows kolla in detaljer i Jekyll-dokumentationen.
Annars, om du är på Mac OS X, Linux eller Unix måste du se till att du har dessa förutsättningar installerade:
För att kontrollera om du har installerat Ruby kör kommandot rubin -v. Att kontrollera om Ruby Gems kör gem -v. I båda fallen kontrollerar dessa kommandon ett versionsnummer så länge du ser ett nummer som returneras i din terminal är det bra att gå.
Vi jobbar med Jekyll 3.1.x så du behöver inte NodeJS eller Python som nämns på Jekyll installationsdokumentationssida.
Nu, för att installera Jekyll på din dator, kör kommandot: gem installation jekyll
Om du ser ett meddelande som säger att du inte har skrivbehörigheter, kommandot kommandot med sudo och ange ditt lösenord när du blir ombedd.
Då ser du några rader ut i terminalen som visar att installationsprocessen körs. När det står "1 pärla installerad" du är klar.
Låt oss snabbt skapa en Jekyll-webbplats så att du kan se hur det ser ut i sitt standardvärde, utan tema och bekanta dig med fil- och mappstrukturen. Skapa en mapp för att hysa webbplatsen, öppna sedan en terminal som pekar på mappen och kör: jekyll ny .
Notera: om du vill skapa en ny Jekyll-plats i s-undermappen i stället använder du kommandot: jekyll ny undermappsnamn
När webbplatsinställningen är klar ser du ett meddelande i din terminal som säger "Ny jekyll plats installerad i
Kör nu kommandot jekyll servera för att få din webbplats att fungera offline.
När du ser meddelandet "Server running ... tryck ctrl-c för att stoppa" I din terminal kan du gå till adressen http: // localhost: 4000 i en webbläsare och kolla på standard Jekyll-webbplatsen.
Nu när du har sett vad filen och mappstrukturen för en standard Jekyll-webbplats ser ut, liksom dess un-themed-tillstånd, kommer du att få en bättre förståelse av vad du ser inne i en typisk Jekyll-tematnedladdning.
Som du vet från vad vi har pratat om i denna handledning hittills, kommer Jekyll-teman för närvarande med alla filer behövs för att köra en hel webbplats. Och som du såg i det sista avsnittet, när du har alla dessa filer kan du springa jekyll servera för att kunna visa den webbplatsen i en webbläsare.
Det betyder att när du laddar ner ett nytt Jekyll-tema kan du bara extrahera det, springa jekyll servera och demo temat på en fullt fungerande Jekyll-webbplats direkt. Många teman kommer även att komma med demoinnehåll som redan ingår.
Låt oss titta på några exempel med teman "Writer" och "Astro" (eller någon som föredrar).
När du har extraherat, sök igenom tematets struktur tills du hittar rotmappen som hyser alla filer på en Jekyll-webbplats. Du ska kunna känna igen den här mappen från din standard Jekyll-installering tidigare. Leta efter saker som _config.yml fil, _includes katalog och så vidare.
Öppna sedan en terminal i mappen och kör jekyll servera.
Om allt är lyckat ser du meddelandet "Server adress: " med en webbadress som visas mot slutet av terminalen. Kopiera och klistra in den här webbadressen i en webbläsare och du bör se en demo av ditt nya tema.
I vissa fall kan du få ett felmeddelande när du försöker springa jekyll servera. Om detta händer ser du om meddelandet klagar på ett saknat beroende, dvs något som temat behöver för att fungera saknas från din inställning.
I det här exemplet kan du se i den röda feltexten att "jekyll-paginera" -stenen saknas:
En snabb Google-sökning visar Github repo för den aktuella pärlan, vilket ger kommandot som krävs för att installera det.
Efter att ha kört kommandot och installerat det saknade beroendet jekyll servera kan köra som förväntat med temat.
Om du går till den angivna webbadressen och inte ser webbplatsen, så här till exempel:
... kolla på värdet av baseURL i _config.yml fil. Den här filen, som vi kommer att prata mer om senare, kontrollerar den övergripande konfigurationen för hela webbplatsen.
De baseURL variabel läggs till huvuddomänen, som när vi arbetar offline är http: // localhost: 4000.
I ovanstående exempel vill vi att vår sajt visas på http: // localhost: 4000. I _config.yml filen vår baseURL variabel är inställd på:
baseurl: "http: // localhost"
Det här kan verka rätt redan i början, men eftersom det här värdet läggs till huvuddomen gör det faktiskt att webbplatsen försöker ladda på http: // localhost: 4000http: // localhost.
Så vi måste ändra värdet till en tom sträng så här:
baseurl: ""
Din webbplats laddas sedan som förväntat.
Om du vill ladda din webbplats från en underkatalog istället, ändra baseURL värdet till namnet på underkatalogen, var noga med att börja och avsluta med ett snedstreck framåt:
baseurl: "/ themedemo /"
En av huvudorsakerna är att det är en bra idé att börja betjäna temat rakt ut ur den befintliga strukturen. Det ger dig möjlighet att bekanta dig med tematets funktioner och arbetsflöden.
Eftersom Jekyll ger en hel del flexibilitet kan dess teman erbjuda funktionalitet som är helt annorlunda än en till nästa. Efter att ha serverat en demo av ett nytt tema ta en stund att bläddra och se vilken typ av struktur temat har. Leta efter saker som om temat har kategori sidor, presenterade bilder, författarsidor och så vidare. Notera dessa funktioner så att du kan söka tematets dokumentation och lära dig att använda dem.
Du bör också titta igenom filens och mappstrukturen i temat. De viktigaste områdena som du vill undersöka är:
Du måste också ta reda på vilka konfigurationsalternativ för webbplatsen du kan behöva ställa in på webbplatsen _config.yml fil för att använda tematets funktioner, t.ex. webbadresser för sociala medier, författarinformation, navlänkar och så vidare.
Nu har du haft chans att se över temat och bekanta dig själv, det är dags att använda det på din egen webbplats. Lämna demoversionen du redan skapat oförändrad så att du kan jämföra din nybyggda webbplats mot.
Skapa en ny mapp på din dator och ta ut alla temas filer till det.
Den här gången, gå in i _posts mapp och radera alla filer där inne så att demostationerna tas bort.
Därefter raderas alla .md (markdown) -filer från rotmappen så att alla demosidorna är borta.
Om du vill kan du också hitta och ta bort bilder som används inom demoinnehåll, till exempel posta miniatyrbilder, om du planerar att ersätta dem med din egen. Huruvida bilder om demoinnehåll är närvarande kan variera från tema till tema.
Om ditt tema har demoprodukter som du vill radera men du är inte säker på var de är, kolla temadokumentationen som den ska berätta för dig. Annars kan du behöva gå igenom koden i temat mallar och räkna ut det därifrån.
Därefter bör du öppna _config.yml filen från rotmappen och konfigurera eventuella sidbrettvariabler som krävs av temat. Vissa inställningar är i allmänhet vanliga för alla _config.yml filer, till exempel titel, e-post, beskrivning och några andra. Men vissa inställningar kommer att vara specifika för det angivna temat.
Exakt vad du behöver göra i konfigurationsfilen för webbplats beror på det specifika temat, så det är en bra idé att hänvisa till temat dokumentation vid denna punkt för vägledning om vad varje inställning gör.
Till exempel i Writer-temat är det möjligt att ställa in en anpassad navigationsmeny med hjälp av nav_list variabel för att definiera en lista över menyalternativ. Var och en har en etikett, permalink och en klass som kommer att göra en ikon för Font Awesome visas bredvid den.
I motsats till detta använder Astro-temat inte Writer specifc nav_item variabel men har egna anpassade variabler så att du kan lägga till länkar till dina olika sociala medier, samt att aktivera Disqus kommentarer och så vidare.
Arbeta genom variablerna i ditt eget tema _config.yml filen tills du har dem alla inställda efter eget tycke.
Observera att om du gör ändringar så här efter att du först serverat din nya webbplats med jekyll servera, du måste stoppa processen med CTRL + C och starta om det för att se efterföljande ändringar träder i kraft.
Vissa teman ger dig möjlighet att välja mellan flera layouter för din hemsida och inställningar som påverkar deras bildskärm. Om så är fallet kommer du troligen att hitta inställningarna kan ändras i främre delen av index.html filen från rotmappen.
Om flera layouter är tillgängliga är det troligt att du kan hitta att du kan välja en annan genom att ändra värdet på layout inställning-du måste referera till temat dokumentation för att se vilka möjliga värden som kan användas.
Medan du redigerar filen, se om det finns andra värden som ska ändras för att effekta innehåll som kommer att visas på hemsidan. Till exempel i Writer-temat är det möjligt att ange en anpassad titel och en beskrivning som bara ska visas på hemsidan, liksom en utvalt bild.
Om du vill lägga till sidor som "Om" eller "Kontakt" nu är det dags. Lägg till en .md (markdown) dokument till rotmappen på webbplatsen för varje sida du vill installera.
Notera: vissa teman är inställda för att alla sidor ska placeras i en undermapp, (vanligtvis namngivna "sidor"), istället för rotmappen, så kolla på temadokumenterna för att se om detta är fallet.
Till exempel har jag lagt till en sida om "Om webbplatsen" (om.md), en "Om mig" författarprofil sida (author-kezz.md) och en "Kontakt" -sida (contact.md).
När du lägger till sidfiler vill du veta om det finns specifika layoutmallar och / eller frontmailinställningar du ska använda med dem. För att ta reda på att du kan referera till tematets dokument, eller bara kopiera och klistra in markdown-filer från den demo-installation du gjorde av temat och omarbeta dem.
Jag har till exempel här kopierat över en befintlig författarsida från Writer-demoen och konverterat den till min egen genom att byta namn på den och redigera dess främsta materia och innehåll.
Nu när du har grundläggande förutsättningar för din webbplatsstruktur är det dags att lägga till några inlägg. Jag rekommenderar att du kopierar ett inlägg från _posts mapp på din demo webbplats och klistra in den i den installation du arbetar med. Då kan du byta namn på det med datumet och den permalink du vill ha för din nya artikel. Genom att återanvända en demostation kommer alla nödvändiga frontmaterial att vara på plats och du behöver bara uppdatera den.
Vissa teman erbjuder stöd för kategori- och taggsidor. Detta är inte alltid fallet, och som sådan kan implementeringen skilja sig från tema till tema. Kontrollera tematets dokument på vad du kanske behöver göra för att arbeta med kategorier och taggar på din webbplats.
Till exempel, i Writer-temat, för varje kategori du vill använda, är det nödvändigt att manuellt konfigurera en mapp och en mallfil i en webbplatskarta med namnet "kategori".
Det kan också finnas några andra extrafunktioner det specifika temat du använder har tillgängligt. Var noga med att ha en bra läs igenom ditt temas lista och dokumentation för att se till att du är över allt som ingår.
Om du redan har en Jekyll-webbplats och bara vill använda ett nytt tema, vill du gå igenom nästan samma process som vi gjorde ovan. Skillnaden kommer efter att radera demoinnehållet, när du istället för att lägga till nya sidor och inlägg kan du bara kopiera över innehållet på din befintliga webbplats.
Om du har en befintlig Jekyll-sida med sidor som redan finns, kopiera och klistra in de associerade markdownfilerna från din gamla webbplats till din nya. Gå igenom varje sida och uppdatera frontmaterialet för att använda det nya tematets layouter och nödvändiga variabler.
Kopiera sedan alla dina postfiler från din gamla _posts mapp i din nya. Det kommer att bli lite tråkigt men du kommer sannolikt att behöva gå igenom varje postfil en efter en och uppdatera dess främre materia med alla inställningar som krävs av det nya temat och radera alla som behövdes av det gamla temat men används inte längre.
Om du har en mapp med bilder och andra medier som används i sidor och inlägg på din gamla webbplats, kopiera över hela mappen till din nya webbplatsstruktur. Dina inlägg och sidor ska fortfarande referera till samma bildplats, så att de kan fortsätta att visas i ditt innehåll.
Så det är väsentliga för hur du konfigurerar ett Jekyll-tema! De finaste punkterna i processen varierar från tema till tema, men du kan fortfarande följa dessa väsentliga steg i varje enskilt fall. Låt oss snabbt ta reda på vad dessa steg är.
Accentsconagua
jekyll servera Jag hoppas att den här handledningen har hjälpt dig att känna dig säker på att ta itu med att du skapar en ny Jekyll-webbplats med ett anpassat tema, eller byter din befintliga webbplats till en ny.
För en grundlig guide till användandet av Jekyll, kolla in kursen av Guy Routledge:
Tack för att du läste och jag ses snart igen!
