Accentsconagua
Share
En av Jekylls bemerkelsesverdige nye funksjoner er evnen til å skape offisielle temaer i form av Ruby-perler. Disse temaene kan installeres av en Jekyll-bruker for å stillegge sin statiske blogg eller nettside med letthet, slik at de kan administrere innholdet.
Før denne nye temafunksjonen skrev Kezz Bracey en flott opplæring om hvordan man oppretter et Jekyll-tema. I denne opplæringen kommer vi til å utvide Kezzs innlegg ved å konvertere vår mal inn i en offisiell Jekyll-templet.
Jekyll-kategorien på Themeforest har en rekke temaer fra $ 16 til $ 29. Hvorfor ikke sende inn din egen, alt innpakket som en pen Ruby Gem?
Jekyll temaer på ThemeforestFør vi begynner, vil jeg anbefale at du leser gjennom den forrige opplæringen. Jeg kommer til å anta at du allerede har et Jekyll-tema opprettet ved hjelp av Kezzs metode, eller du kan til og med ha et godt skrevet Jekyll-nettsted som du vil konvertere til et offisielt Jekyll-tema.
Du kommer til å trenge å bruke kommandolinjen når du arbeider med ditt Jekyll-tema, men igjen har Kezz deg dekket!
Åpne kommandolinjeverktøyet ditt og sørg for at du har den nyeste versjonen av Jekyll installert (på tidspunktet for denne artikkelen er det 3,3) ved å bruke følgende:
$ perle installasjon jekyll
Du trenger også Bundler, som er en perle for å administrere andre edelstener. Jeg forklarer hvorfor du trenger dette senere. Du kan installere dette ved å bruke:
$ perle installasjonspakker
Til slutt må du registrere deg for en RubyGems.org-konto. Ved å gjøre dette kan du skyve temaet ditt til registeret slik at andre Jekyll-brukere kan laste ned og bruke det.
For å hjelpe oss med å komme i gang, har Jekyll en kommando bare for å skape et nytt tema. I kommandolinjeverktøyet finner du katalogen du planlegger å jobbe i, og bruker følgende kommando for å lage grunnfiler for temaet ditt:
$ jekyll nytt tema awesome-jekyll-tema
Du bør se noe som listen nedenfor i arbeidsmappen din:
awesome-jekyll-tema / _includes / _layouts / default.html page.html post.html _sass / assets / Gemfile LICENSE.txt awesome-jekyll-theme.gemspec README.md
De _layouts /, _includes / og _sass / mapper er de samme som mappene du vil se i et vanlig Jekyll-prosjekt, som inneholder alle sidelayoutene dine, "inkluderer" (eller "delvise") og Sass-filer.
De eiendeler/ mappen er for filer du vil produksjon til brukerens nettsted. For eksempel, JavaScript, bilde eller stil filer. Du vil normalt legge inn disse filene JS /, css / eller Bilder/ mapper.
awesome-Jekyll-theme.gemspec er filen som beskriver din perle tema. Her kan du liste navnet, versjonen, en beskrivelse, en hjemmeside og en liste over edelstener for temagemuren din.
De Gemfile er for Bundler, som vi nevnte før. Dette kobler perler oppført i din .gemspec fil med Bundler i kommandolinjeverktøyet ditt. Vi bruker Bundler senere for å teste ut temaet ditt.
Endelig, den README.md og LICENSE.txt er det for å dokumentere temaet ditt og å gi en passende lisens. Du er sikkert kjent med disse filene hvis du har opprettet et GitHub-prosjekt før.
Merk: Det er viktig å dokumentere temaet grundig. På den måten vil folk som vil bruke temaet, kunne gjøre det enkelt, og bruke alternativene og kontrollene du har oppgitt i den.
Gitt at et Jekyll-prosjekt har en ganske lignende filstruktur til et Jekyll-tema, kan du gå videre og kopiere de fleste filene dine over. Du vil sannsynligvis overskrive de eksisterende layoutfilene som følger med grunntemaet med ditt eget. Så, alle layoutfilene dine må gå inn i _layouts / mappe, din innbefatter i _includes / mappe og Sass-filene dine i _sass / mappe i grunntemaet du opprettet.
Hint: Ny på Sass? Sjekk ut dette kurset av Adi Purdila, 14 dager for å lære Sass
Du må plassere dine viktigste stiler, JavaScript og grafiske ressurser i eiendeler/ mappe. Dette er en nøkkelmappe for Jekyll-tema, da det er den eneste katalogen som vil vises på sluttbrukerens nettsted. Du kan ende opp med en eiendomsmappe som ser slik ut:
assets / styles.scss scripts.js theme-logo.png
I sin tur må du oppdatere stiene i koden din for å gjenspeile denne banebrytelsen. For eksempel, css / styles.scss vil bytte til eiendeler / styles.scss.
Hint: For å sikre at stiene dine er korrekte i temaet ditt, vil du kanskje sjekke ut relative_url og absolute_url som nylig er lagt til Jekyll.
De .gemspec filen er utformet for å gi kjerneinformasjon om temaet perlen. Basen Jekyll-temaet kommer med denne filen, men du må erstatte eksempler verdiene med din egen. Her er et eksempel .gemspec fil:
# koding: utf-8 perle :: spesifikasjon.nye gjør | spes | spec.name = "awesome-jekyll-tema" spec.version = "0.0.2" spec.authors = ["David Darnes"] spec.email = ["[email protected]"] spec.summary =% q En kort forklaring på min kjempebra perle tema. Spec.description = "En lengre forklaring på mitt fantastiske perle tema som ikke er det samme som sammendraget mitt." spec.homepage = "https://alembic.darn.es" spec.license = "MIT" spec.files = git ls-files -z.split ("\ x0"). velg | f | f.match (% r ^ (eiendeler | _layouts | _includes | _sass | LISENS = README) i) spes.add_runtime_dependency "jekyll-seo-tag", "~> 2.0" spec.add_development_dependency "jekyll" > 3,3 "spec.add_development_dependency" bundler "," ~> 1.12 "-end
Nedenfor er en nedgang av det jeg forandret i min .gemspec fil:
De Navn bør være navnet på ditt tema, som skal stemme overens med .gemspec filnavn. De versjon bør være det siste nummeret av tema-perlen din. De forfattere kan være en liste over mennesker, men for nå er det bare meg selv som utvikler dette temaet. e-post bør være den samme e-posten du registrerte deg med for RubyGems.org.
De sammendrag og beskrivelse bør være henholdsvis korte og lange forklaringer av tema-perlen din. Du kan enten stille inn hjemmeside til en levende demo av temaet eller til og med GitHub-repoen der den er bosatt.
De tillatelse bør samsvare med hvilken lisens du har oppgitt i temaet perlen (den LICENSE.txt fil). De filer verdien bør forbli uendret da det markerer filene og mappene som vil bli brukt i den endelige temanestenen din.
Den siste delen av .gemspec filen er en liste over edelstener som er behov for for at temaet ditt skal fungere riktig. I mitt eksempel har jeg bare en perle som er nødvendig for at den skal kunne kjøre: Brunswick-seo-tag. De andre edelstener oppført, Jekyll og Bunter, er utvikling perler og er bare nødvendig når noen utvikler temapjengen.
Pass på å legge til alle edelstenene du trenger for temaet ditt i denne filen. Du finner en fullstendig liste over Jekylls plugins på deres nettsted.
Nå som vi har våre temafiler og vår .gemspec filen er fylt ut, vi kan nå utføre noen første testing. Imidlertid trenger vi noen eksempler på innhold, så kopier over _config.yml fra ditt gamle tematema, sammen med noen markdown-innhold. en index.md fil med noe innhold skal være tilstrekkelig for en første test, men du vil kanskje også legge til et eksempel innlegg. Blogging er en av hovedtrekkene til Jekyll, så det ville være en god ide å teste dette.
Merk: Pass på at ditt fremre materiale har valgt et layout, eller du kan ikke se temaet riktig når du kjører lokalt.
Husk at vi installerte Bundler og at Gemfile i bunnen av temakatalogen vår? Vel, Bundler bruker Gemfiles til å administrere edelstener i prosjekter, og hvis du åpner den filen, ser du følgende:
kilde "https://rubygems.org" gemspec
Hva denne filen gjør er å fortelle Bundler å se på RubyGems.org for edelstenene i din .gemspec fil. Så, med det for øye, la oss teste ditt tema.
I kommandolinjeverktøyet, bruk kommandoen nedenfor for å installere alle edelstenene som trengs for temaet din perle:
$ bundle installasjon
Dette bør installere alle temaene i din .gemspec, som i mitt eksempel ville bare være Brunswick-seo-tag. Nå kan vi kjøre temaet lokalt ved å bruke:
$ bunt exec jekyll servere
Du bør da kunne se temaet ditt på http: // localhost: 4000. Hvis det oppstår en feil, kan det hende at du mangler en perle i din .gemspec fil.
Merk: Du må kanskje hviteliste edelstener i din _config.yml fil, hvis du ikke allerede har gjort det, så vel som å angi dem i din .gemspec. Hvis du sliter med å få tak i Jekyll, har Guy Routledge skapt et flott kurs for Tuts + på Building Static Websites med Jekyll.
Deretter skal du tilbringe litt tid på å raffinere temaet ditt for å sikre at det fungerer med en rekke innholdsformater og størrelser. Du kan også vurdere å vurdere tilpasningsalternativer, enten gjennom en global innstilling i _config.yml eller på separate sider i forsiden.
Brukeren har muligheten til å overskrive hvilken som helst fil i templet med sin egen fil på sitt eget Jekyll-nettsted. For eksempel, hvis du har _includes / header.html i temaet perle, temaet bruker kan overskrive den filen med _includes / header.html på deres eget nettsted. Du vil kanskje tenke på å gjøre temaet ditt fleksibelt nok til at temabrukeren enkelt kan overskrive filene dine for å gjøre sitt eget nettsted mer unikt.
Hvis du legger til tilpasning til temaet ditt, trenger du dokumentasjon for å gå med det. Dokumentasjon av temaet perle er veldig viktig. Hvis dokumentasjonen er dårlig, vil folk ikke ønske å bruke temaet.
Her er noen av de tingene jeg forventer å se i temaets dokumentasjon:
Alt dette kan bli oppført i README.md, som ble opprettet da vi genererte grunnleggende Jekyll-temaet. Når temaet blir presset opp til RubyGems.org, blir readme-filen behandlet og vist på gemsiden for at folk skal henvise til.
Sammen med dokumentasjonen din, vil jeg anbefale å gi noe demoinnhold for å få folk i gang med temaet ditt. EN _config.yml, index.md og eksempel etter fil, ligner de du brukte til å teste ditt tema med tidligere, sammen med en Gemfile skal være tilstrekkelig. Selv om det bare krever at brukeren legger til perlen til Gemfile, vil det være svært nyttig å gi et eksempel oppsett som de kan laste ned og bruke straks.
Du må gi et skjermbilde for temaet ditt, som angitt i den offisielle Jekyll-dokumentasjonen, med navnet screenshot.png. Ikke bare vil dette tillate folk å se hvordan temaet ditt ser på et blikk, men det vil også gi konsistens i alle Jekyll-temaer, slik at de kan vises i et galleri eller admin-brukergrensesnitt i fremtiden.
Når du er fornøyd med temaet ditt, og du har testet og dokumentert det, må du skyve det opp til RubyGems.org-registeret slik at andre kan bruke det.
Finn temaet perle med kommandolinjeverktøyet ditt og bruk følgende:
perle bygge awesome-jekyll-theme.gemspec
Pass på at du samsvarer med navnet på .gemspec fil i temaet ditt med kommandoen vist ovenfor. Dette vil opprette en fil som heter awesome-Jekyll-tema-0.0.2.gem, hvilken er din offisielle Jekyll templet! Deretter må du skyve din perle opp til RubyGems.org. Bruk følgende i kommandolinjeverktøyet ditt:
perle push awesome-jekyll-theme-0.0.2.gem
Hvis dette er første gang du trykker på en perle til RubyGems.org, vil den be deg om å logge inn med detaljene du brukte til å registrere deg. Deretter skal perlen skyves opp til registret, noe som betyr at temaet perlen har blitt publisert.
Hint: Med de fleste kommandolinjeverktøy, hvis du skriver de første bokstavene til en fil og trykker deretter Tab, den skal fylle ut resten av filnavnet, så lenge det ikke finnes en annen fil som begynner med de samme bokstavene i samme mappe.
Når dette har skjedd, må du gjøre ytterligere testing og følge dine egne instruksjoner om å installere og bruke temapjengen. Instruksjonene skal være ganske lik de som vises på det offisielle Jekyll-nettstedet.
I tillegg til å følge denne opplæringen, vil du kanskje sjekke ut disse ressursene når det gjelder å lage din egen Jekyll temapjengel:
