Share
Jekyll er et statisk nettstedgenereringssystem som lar deg ta enkle tekstfiler og konvertere dem til en sofistikert blogg uten å måtte bekymre deg om databaser, sikkerhetsproblemer, oppdateringer og andre komplikasjoner som kan komme sammen med mange CMS og blogging-plattformer.
På samme måte som de fleste nettstedssystemer, er det mulig å bruke temaer på Jekyll-nettsteder. Men for øyeblikket bruker Jekyll ikke temaer på samme måte som du kanskje er vant til.
Akkurat nå er Jekyll-temaer ikke Selvforsynte pakker må påføres gjennom et installasjonsprogram. Når du laster ned et Jekyll-tema, vil du faktisk også laste ned alle filene kreves for å kjøre et helt Jekyll-område.
Dette vil endres i en fremtidig versjon av Jekyll, men for nå må du vite hvordan du skal håndtere det faktum at Jekyll-temaer kommer med et helt nettsted knyttet til dem.
I denne opplæringen vil vi gå gjennom å sette opp et Jekyll-tema fra begynnelsen, med utgangspunkt i noen grunnleggende installasjonsråd, hvordan du kjenner deg til et nytt tema, og går gjennom tips om å sette opp et nytt nettsted eller re- temaer en eksisterende.
La oss begynne!
Jekyll-kategorien på Envato Market har en rekke temaer fra $ 19 til $ 24. Senere bruker vi "Writer" og "Astro" (de to nåværende toppselgere) for å demonstrere installasjon.
Jekyll temaer på Envato MarketJekyll er designet for å bli administrert offline på egen datamaskin, bygget inn i et statisk HTML-nettsted, og deretter distribuert. Når du legger til innhold, er den grunnleggende prosessen å lage en markdown-fil, legg til noen fremre saker øverst, fyll ut resten av filen med innhold, og bygg deretter nettstedet ditt på nytt..
Når nettstedet ditt er bygget, kan du distribuere det på en måte du velger, enten det er via FTP eller Git-kommandoer. Vi vil ikke fokusere på distribusjon i denne opplæringen, men hvis du vil lese mer om emnet, vennligst besøk Jekyll dokumentasjonen.
I stedet vil vi fokusere på den delen av Jekyll-oppsettprosessen som skjer offline på datamaskinen din, som alle starter med installasjon.
Arbeide med Jekyll innebærer litt bruk av kommandolinjebruk, men hvis du aldri har jobbet med kommandolinjen før ikke la det sette deg av. Jeg anbefaler å kjøre gjennom noen oppføringer i vår kommandolinje for webdesign opplæringsserie for å bli komfortabel.
Hvis datamaskinen din kjører Windows, er Jekyll dessverre ikke offisielt støttet. Det betyr ikke at du ikke kan få det til å fungere, men du må kanskje hoppe over noen forhindringer. Hvis du vil ta en løp ved å bruke Jekyll på Windows, sjekk ut detaljer i Jekyll-dokumentasjonen.
Ellers, hvis du er på Mac OS X, Linux eller Unix, må du sikre at du har disse forutsetningene installert:
For å sjekke om du har installert Ruby, kjør kommandoen rubin -v. For å sjekke om Ruby Gems løp perle -v. I begge tilfeller kontrollerer disse kommandoene et versjonsnummer, så lenge du ser et nummer som er returnert i terminalen, er det bra å gå.
Vi jobber med Jekyll 3.1.x, slik at du ikke trenger NodeJS eller Python som nevnt på Jekyll installasjons dokumentasjonsside.
Nå, for å installere Jekyll på datamaskinen, kjør kommandoen: perle installasjon jekyll
Hvis du ser en melding som sier at du ikke har skrivetillatelser, forord kommandoen med sudo og skriv inn passordet ditt når du blir bedt om det.
Deretter ser du noen linjer utskrift i terminalen som viser at installasjonsprosessen blir kjørt. Når det står "1 perle installert" du er ferdig.
La oss raskt lage et Jekyll-område slik at du kan se hvordan det ser ut som det er i standard, ikke-tema-tilstand, og bli kjent med fil- og mappestrukturen. Opprett en mappe for å huse nettstedet, og åpne deretter en terminal som peker på mappen og kjøre: jekyll ny .
Merk: Hvis du på et tidspunkt ønsker å opprette et nytt Jekyll-område i s-undermappen, bruk stedet kommandoen: jekyll nytt undermappenavn
Når oppsettet er ferdig, ser du en melding i terminalen din "New jekyll site installert i
Kjør nå kommandoen jekyll servere for å få nettstedet ditt til å løpe offline.
Når du ser meldingen "Server kjører ... trykk ctrl-c for å stoppe" I din terminal kan du gå adressen http: // localhost: 4000 i en nettleser og sjekk ut standard Jekyll-siden.
Nå som du har sett hva fil- og mappestrukturen på et standard Jekyll-nettsted ser ut, så vel som dets un-themed-tilstand, får du en bedre forståelse av hva du ser i et typisk Jekyll-tema nedlasting.
Som du vet fra det vi har snakket om i denne opplæringen så langt, kommer Jekyll-temaer nå med alle filene trengte å kjøre et helt nettsted. Og som du så i det siste avsnittet, når du har alle de filene du kan kjøre jekyll servere for å aktivere visning av nettstedet i en nettleser.
Dette betyr at når du laster ned et nytt Jekyll-tema, kan du bare pakke ut det, løp jekyll servere og demo temaet på et fullt funksjonelt Jekyll-område med en gang. Mange temaer kommer til og med med demoinnhold som allerede er inkludert.
La oss se på noen eksempler ved hjelp av temaene "Writer" og "Astro", (eller noe du foretrekker).
Når du har hentet ut, søk gjennom temaets struktur til du finner rotmappen som inneholder alle filene på et Jekyll-nettsted. Du bør kunne gjenkjenne denne mappen fra standard Jekyll-installasjonen tidligere. Se etter ting som _config.yml fil, den _includes katalog og så videre.
Åpne deretter en terminal inne i mappen og kjør jekyll servere.
Hvis alt er vellykket, ser du meldingen "Server adresse: " med en URL vist mot slutten av terminalen. Kopier og lim inn denne nettadressen i en nettleser, og du bør se en demonstrasjon av det nye temaet ditt.
I noen tilfeller ser du kanskje en feilmelding når du prøver å kjøre jekyll servere. Hvis dette skjer, ser du om meldingen klager over en manglende avhengighet, det vil si noe temaet trenger for å fungere, mangler fra oppsettet ditt..
I dette eksemplet kan du se i den røde feilteksten at "jekyll-paginate" -gruppen mangler:
Et raskt Google-søk viser Github repo for den aktuelle perlen, og gir kommandoen som kreves for å installere den.
Etter å ha kjørt kommandoen og installert den manglende avhengigheten jekyll servere kan kjøre som forventet med temaet.
Hvis du går til den angitte nettadressen og ikke ser nettstedet, for eksempel dette:
... kontroller verdien av baseURL i _config.yml fil. Denne filen, som vi snakker mer om senere, styrer den generelle konfigurasjonen for hele nettstedet.
De baseURL variabel er vedlagt hoveddomenet, som når vi jobber frakoblet, er http: // localhost: 4000.
I eksempelet ovenfor vil vi at nettstedet vårt skal vises på http: // localhost: 4000. I _config.yml filen vår baseURL variabel er satt til:
baseurl: "http: // localhost"
Dette kan virke rett først, men fordi denne verdien er lagt til hoveddomenet, gjør det faktisk nettstedet til å laste på http: // localhost: 4000http: // localhost.
Så, vi må endre verdien til en tom streng som denne:
baseurl: ""
Siden lastes deretter som forventet.
Hvis du vil laste nettstedet ditt fra en underkatalog i stedet, endrer du baseURL Verdien til navnet på underkatalogen, er sikker på å starte og avslutte med et foroverstrekk:
baseurl: "/ themedemo /"
En av hovedgrunnene til at det er en god idé å begynne å betjene temaet rett ut av den eksisterende strukturen, er det (utenom å sjekke det som forventet), det gir deg muligheten til å bli kjent med temaets funksjoner og arbeidsflyt.
Fordi Jekyll gir ganske fleksibilitet, kan temaene tilby funksjonalitet som er ganske forskjellig fra den ene til den andre. Etter å ha servert en demo av et nytt tema, ta et øyeblikk å bla rundt og se hvilken type struktur temaet har. Se etter ting som om temaet har kategorisider, kjente bilder, forfattersider og så videre. Vær oppmerksom på disse funksjonene, slik at du kan søke i temaets dokumentasjon og lære å bruke dem.
Du bør også se gjennom fil og mappestruktur av temaet. De viktigste områdene du vil undersøke er:
Du må også finne ut hvilke konfigurasjonsalternativer for nettstedet du måtte sette inn på nettstedet _config.yml fil for å bruke temaets funksjoner, for eksempel nettsider for sosiale medier, forfatterinformasjon, navkoblinger og så videre.
Nå har du hatt en sjanse til å se over temaet og bli kjent med deg, det er på tide å bruke det på ditt eget nettsted. La demoversjonen du allerede har opprettet uendret, slik at du kan sammenligne det nybygde nettstedet ditt mot.
Lag en ny mappe på datamaskinen din og ta ut alle temaets filer til det.
Denne gangen, gå inn i _posts mappe og slette alle filene der inne, så demo innleggene blir fjernet.
Deretter slette noen .md (markdown) filer fra rotmappen, så alle demo sidene er borte også.
Hvis du ønsker det, kan du også finne og slette noen bilder som brukes i demoinnhold, som for eksempel miniatyrer etter innlegg, hvis du planlegger å erstatte dem med ditt eget. Om demoinnholdsbilder er til stede, kan det variere fra tema til tema.
Hvis temaet ditt har demo-bilder du vil slette, men du er ikke sikker på hvor de er, kan du sjekke tema dokumentasjonen som den skal fortelle deg. Ellers må du kanskje gå gjennom koden i temaets maler og finne ut det derfra.
Deretter bør du åpne opp _config.yml fil fra rotmappen og oppsett eventuelle variabler i webområdet som kreves av temaet. Noen innstillinger vil vanligvis være felles for alle _config.yml filer, for eksempel tittel, e-post, beskrivelse og noen andre. Noen innstillinger vil imidlertid være spesifikke for det angitte temaet.
Nøyaktig hva du trenger å gjøre i konfigurasjonsfilen av nettstedet, avhenger av det spesifikke temaet, så det er en god ide å referere til temaets dokumentasjon på dette punktet for veiledning om hva hver innstilling gjør.
For eksempel, i Writer-temaet er det mulig å sette opp en egendefinert navigasjonsmeny ved hjelp av nav_list variabel for å definere en liste over menyelementer. Hver har en etikett, permalink og en klasse som vil gjøre et ikon for Font Awesome vises ved siden av det.
I motsetning til dette bruker Astro-temaet ikke Writer-spesifikken nav_item variabel, men har egne tilpassede variabler slik at du kan legge til linker til ulike sosiale medier-kontoer, samt å aktivere Disqus-kommentarer og så videre.
Arbeid gjennom variablene i ditt eget tema _config.yml filen til du har dem alt satt til din smak.
Vær oppmerksom på at hvis du gjør endringer som dette etter at du først har brukt det nye nettstedet ditt jekyll servere, du må stoppe prosessen med CTRL + C og start på nytt for å se at eventuelle påfølgende endringer trer i kraft.
Noen temaer gir deg muligheten til å velge mellom flere oppsett for hjemmesiden din og angi kontroller som påvirker skjermen. Hvis dette er tilfellet vil du sannsynligvis finne at innstillingene kan endres i fronten av index.html fil fra rotmappen.
Hvis flere oppsett er tilgjengelige, er det sannsynlig at du kan finne at du kan velge en annen ved å endre verdien av oppsett innstilling-du må referere til temaets dokumentasjon for å se hvilke mulige verdier som kan brukes.
Mens du redigerer filen, kan du se om det finnes andre verdier som bør endres for å påvirke innhold som skal vises på hjemmesiden. For eksempel er det i Writer-temaet mulig å angi en egendefinert tittel og beskrivelse som bare skal vises på hjemmesiden, samt et utvalgt bilde.
Hvis du vil legge til sider som "Om" eller "Kontakt", er tiden nå. Legg til en .md (markdown) dokument til rotmappen til nettstedet for hver side du vil konfigurere.
Merk: Noen temaer er oppsett for å ha alle sidene plassert i en undermappe, (vanligvis kalt "sider"), i stedet for rotmappen, så sjekk temadokumenter for å se om dette er tilfelle.
For eksempel, her har jeg lagt til en side om "Om nettstedet" (om.md), en "Om meg" forfatterprofilside (author-kezz.md) og en "Kontakt" -side (contact.md).
Når du legger til sidefiler, vil du vite om det er spesifikke layoutmaler og / eller foransatte innstillinger du burde bruke med dem. For å finne ut, kan du se temaets dokumenter, eller bare kopiere og lime inn markdownfiler fra demoinstallasjonen du gjorde av temaet og omarbeide dem.
For eksempel, her har jeg kopiert over en eksisterende forfatterside fra Writer-demoen og konvertert den til min egen ved å omdøpe den og deretter redigere sin forside og innhold.
Nå som du har essensialene i oppsettet for din sidestruktur, er det på tide å legge til noen innlegg. Jeg anbefaler å kopiere et innlegg fra _posts mappe i demoområdet og lim det inn i installasjonen du jobber med. Deretter kan du omdøpe det med datoen og permalinken du vil ha for din nye artikkel. Ved å gjenbruke en demo-post vil alt nødvendig frontmateriell være på plass, og du trenger bare å oppdatere det.
Noen temaer tilbyr støtte for kategori og tag sider. Dette er ikke alltid tilfelle, og som sådan kan implementeringen avvike fra tema til tema. Sjekk temaets dokumenter på hva du kanskje må gjøre for å jobbe med kategorier og koder på nettstedet ditt.
For eksempel i Writer-temaet, for hver kategori du vil bruke, er det nødvendig å manuelt konfigurere en mappe og malfil i en undermappe under navnet "kategori".
Det kan også være noen andre ekstra funksjoner det bestemte temaet du bruker, har tilgjengelig. Pass på at du har en god lese gjennom temaets funksjonsliste og dokumentasjon for å sikre at du er over alt den inneholder.
Hvis du allerede har et Jekyll-nettsted og bare vil bruke et nytt tema, vil du gå gjennom nesten samme prosess som vi gjorde over. Forskjellen vil komme etter å slette demoinnholdet, når du i stedet for å legge til nye sider og innlegg, kan du bare kopiere over innholdet på det eksisterende nettstedet ditt.
Hvis du har et eksisterende Jekyll-nettsted med sider som allerede er tilstede, kopier og lim inn tilhørende markdown-filer fra det gamle nettstedet ditt til den nye. Gå gjennom hver side og oppdatere forsiden til å bruke det nye temaets layouter og nødvendige variabler.
Deretter kopierer du alle dine postfiler fra den gamle _posts mappe inn i den nye. Det kommer til å være litt kjedelig, men du vil sannsynligvis måtte gå gjennom hver postfil en etter en og oppdatere frontmateren med alle innstillinger som kreves av det nye temaet, og slett alt som trengs av det gamle temaet men brukes ikke lenger.
Hvis du har en mappe med bilder og andre medier som brukes i sider og innlegg på ditt gamle nettsted, kopier du over hele mappen til den nye nettstedstrukturen. Dine innlegg og sider bør fortsatt referere til de samme bildesteder, slik at de fortsatt kan vises i innholdet ditt.
Så det er essensen av hvordan du konfigurerer et Jekyll-tema! De fineste punktene i prosessen vil variere fra tema til tema, men du kan fortsatt følge disse essensielle stadiene i hvert tilfelle. La oss raskt gjenskape hva disse stadiene er.
Accentsconagua
jekyll servere Jeg håper denne veiledningen har hjulpet deg til å føle deg trygg på å takle å sette opp et nytt Jekyll-område med et tilpasset tema, eller bytte ditt eksisterende nettsteds tema til en ny.
For en grundig veiledning om bruk av Jekyll, sjekk ut dette kurset av Guy Routledge:
Takk for at du leser, og jeg ser deg igjen snart!
