Organisere Ghost Tema filer og mapper

Dette er den andre delen av Ghost-tema-opplæringen. Alt fra her forutsetter at du har en grunnleggende forståelse av Ghost. Hvis ikke, før du fortsetter, ta deg tid til å lese Forstå Ghost: Stages of Design).

Som vi diskuterte i forrige del, er det to trinn for å designe et tema for Ghost: Template File Creation and Styling.

I denne opplæringen skal vi fokusere på første fase, ved å veilede deg trinnvis gjennom prosessen med å sette opp temaets maler. Du lærer om Ghosts malfil og delvise system, dets håndtaksmaler-tagger, og hvordan du skriver temaets oppslagskjema.

Merk: Denne veiledningen utføres på en Windows-maskin, så vær så snill å ta tilsvarende trinn på ditt foretrukne OS.

Du må også ha din foretrukne kodeditor nyttig. denne opplæringen vil bli utført i Sublime Text 2.

Installere Ghost lokalt

Det første du må gjøre er å installere Ghost på din lokale maskin. Å gjøre det er ganske enkelt, så lenge du har de nødvendige forutsetninger for systemet. Det er ikke nødvendig å kjøre XAMPP eller tilsvarende for å kunne kjøre Ghost på din lokale maskin, da den faktisk vil kjøre seg selv.

Merk: Av og til når du oppretter et nytt tema, starter du Ghost, og velg deretter det nye temaet i admin, det kan fortsatt laste CSS fra forrige tema. Hvis du opplever dette problemet mens du fullfører denne opplæringsserien eller når som helst mens du oppretter et nytt tema, er alt du trenger å gjøre, å utføre en annen omstart av Ghost. En ekstra omstart bør fjerne hurtigbufferen, slik at det nye temaets CSS blir synlig.

Når du har fulgt instruksjonene og installert Ghost på din lokale maskin (og bekreftet at alt fungerer som det skal), vil du være klar til å begynne å lage ditt Ghost-tema ved å starte trinnene under.

Start et nytt, blankt tema

For å komme i gang skal vi lage og aktivere et tomt Ghost-tema med absolutt minimum av nødvendige filer.

Trinn 1:

I Windows Utforsker (eller tilsvarende) navigerer du til mappen der du har installert Ghost. Du bør se følgende struktur i hovedghostmappen din:

Steg 2:

Naviger inn i mappen "content> themes", der du vil se mappen til standardtemaet "casper".

Trinn 3:

På denne plasseringen, opprett en ny mappe og navnet på det du vil at temaet ditt skal bli kalt. I denne opplæringen lager vi et tema som heter "UberTheme", og så er navnet på mappen vi skal opprette:

Legg til de nødvendige filene

Vi skal nå legge til de nødvendige malfilene, uten hvilke du får feil hvis du prøver å aktivere ditt nye tema.

De to filene som er helt avgjørende for at et Ghost-tema skal løpe, er:

index.hbs: kontrollerer visning av de siste innleggene / startsiden
post.hbs: kontrollerer visning av enkelt innlegg sett individuelt

Trinn 1:

I din foretrukne kodeditor, opprett en ny fil og lagre den i "UberTheme" -mappen som "index.hbs". Du har ingen kode for å legge til filen enda, men filen du lager vil være tom.

Steg 2:

Lag en ny ny fil, lagre den også i "UberTheme" -mappen, denne gangen som "post.hbs". Som filen "index.hbs" du opprettet under forrige trinn, vil denne filen også være tom / tom.

Innsiden av "UberTheme" -mappen din bør nå se slik ut:

Aktiver Tour Theme

Vi må nå starte / starte Ghost for å se "UberTheme" komme opp i listen over tilgjengelige temaer i administrasjonspanelet slik at vi kan velge og aktivere det.

Trinn 1:

Hvis du allerede har Ghost running, slå den av ved å trykke CTRL + C i terminalen din, og skriv deretter "y" etterfulgt av ENTER.

Steg 2:

Start / restart Ghost ved å skrive "npm start" i terminalen din.

Tips: Hvis du ikke er sikker på hvordan du åpner terminalen, slik at du kan utføre trinnet ovenfor, navigerer du til "Ghost" -mappen din, trykk og hold SHIFT, høyreklikk for å åpne Windows-menyen, og klikk deretter på venstre-klikk på "Åpne kommandovinduet her".

Merk: Trinnene ovenfor antar at du har besøkt Slik installerer du Ghost for instruksjoner om hvordan du installerer og kjører Ghost.

Trinn 3:

Besøk Ghost-administrasjonspanelet, (logg inn om nødvendig), vanligvis plassert på http: // localhost: 2368 / spøkelse

Trinn 4:

Klikk på "INNSTILLINGER" -knappen på toppmenyen i administrasjonspanelet ditt:

Dette tar deg til avsnittet "INNSTILLINGER> Generelt" i administrasjonspanelet.

Trinn 5:

Rull ned til bunnen av siden, og finn deretter og utvider rullegardinlisten "Tema". Du bør se "UberTheme" som et av alternativene:

Trinn 6:

Velg "UberTheme" fra listen, og klikk deretter den blå "SAVE" -knappen øverst til høyre på siden.

Trinn 7:

I nettleseren din, besøk den forreste delen av Ghost-installasjonen din, vanligvis plassert på http: // localhost: 2368 /

Resultat: Du bør bare se et blankt hvitt nettleservindu.

Hvis du ikke ser et tomt hvitt nettleservindu, og i stedet ser du noe som bildet nedenfor, kan du gå gjennom trinnene ovenfor igjen og sørg for at du har navngitt dine malfiler riktig:

Fullfør fil- og mappestrukturen

De eneste absolutt nødvendige filene er "index.hbs" og "post.hbs" malfiler som beskrevet i siste avsnitt.

Men det er to filer du vil bruke i stort sett alle temaer, selv om de ikke er strengt nødvendige, så legger vi til dem nå. Vi organiserer også en mappestruktur for å holde eventuelle flere filer lagt til temaet ditt senere.

Theme Wrapper File

Det er bare en ekstra hovedmalfil du vil ønske i rotmappen til temaet ditt, og det er "default.hbs" -filen.

Denne filen lager "wrapper" -koden for temaet ditt, dvs. hodet og foten koden som vil bli pakket rundt hver side på et nettsted som kjører temaet ditt. Det vil inneholde standarden din , og seksjoner, samt noen maletiketter som vil sende ut viktig Ghost-kode.

Vi vil dekke hva som faktisk må skrives inn i denne filen mer detaljert senere. For nå, la oss bare lage den tomme filen selv.

Trinn 1:

I din foretrukne kodeditor, opprett en ny fil og lagre den i "UberTheme" -mappen som "default.hbs".

Opprett Partials-mappen din

Med håndteringsskjermene har du muligheten til å opprette det som kalles "delvise" malfiler. Disse delvise malfiler lar deg bryte temaet ditt ned i mindre komponenter for en mer modulær, velorganisert struktur.

For eksempel kan du dele opp oppsettet i "overskrift", "hoved" og "bunntekst", med koden for hver inneholdt i sin egen delfil. Du vil se denne prosessen i praksis senere. For nå vil vi bare opprette mappen som vil bli brukt til å holde disse "delvise" filene.

Trinn 1:

I Windows Utforsker (eller tilsvarende) naviger til "UberTheme" -mappen din.

Steg 2:

Opprett en ny mappe og navnet "partials".

Merk: Det er viktig å sikre at denne mappen er oppkalt riktig og plassert i temaets rotmappe, eller Ghost vil ikke kunne finne dine delvise malfiler.

Eiendomsmappestruktur

Når vi når stylingstrinnet, går alle dine stilrelaterte filer inn i mappen "eiendeler", inkludert CSS, JS, font og bildefiler.

Merk: Du er ikke pålagt å navngi mappen "eiendeler" - du kan faktisk nevne alt du ønsker. Vi følger bare retningslinjene for beste praksis fra Ghost i denne opplæringen.

Trinn 1:

I Windows Utforsker (eller tilsvarende) naviger til "UberTheme" -mappen din.

Steg 2:

Opprett en ny mappe og navnet "eiendeler".

Trinn 3:

Naviger inn i mappen "eiendeler".

Trinn 4:

Opprett en ny mappe og navnet "css".

Trinn 5:

Opprett en ny mappe og navnet "fonter".

Trinn 6:

Opprett en ny mappe og navnet "bilder".

Trinn 7:

Opprett en ny mappe og navnet "js".

Din temafil og mappestruktur skal nå se slik ut:

Legg til stilarkfilen din

Teknisk sett kan du legge til stilarkfilen din som en del av stylingsprosessen. Imidlertid skal vi skrive delen i neste trinn av opplæringen, og som en del av det vil vi knytte temaets stilark og verifisere at det lastes.

Til det formål vil vi opprette en stilarkfil som vil legge til en bakgrunnsfarge i temaet ditt, slik at vi senere kan sikre at det er koblet til din delen riktig.

Trinn 1:

I din foretrukne kodeditor, opprett en ny fil.

Steg 2:

Legg til følgende CSS i filen:

kropp bakgrunnsfarge: # F0F0F0;

Trinn 3:

Lagre filen i "UberTheme> assets> css" -mappen som "style.css".

Skriver standard.hbs-filen

Vi kommer nå til å bevege oss inn i å skrive selve templatingskoden til temaet ditt, begynner med "default.hbs" -filen. (Se ovenfor for et sammendrag av hva denne filen er for).

Merk: For å skille mellom html-koder og styringsmal-koder, bruker vi enten termen "html-koder" eller "maltekoder", slik at du vet hvilken type som refereres til.

Trinn 1:

I din foretrukne kodeditor, åpne din "default.hbs" -fil fra rotmappen til temaet, dvs. "UberTheme".

Steg 2:

Legg til følgende kode:

    ! Dokumentinnstillinger   ! Responsive Meta Tags

Alt vi har gjort her er å legge til de essensielle doktypene, html, hode og kroppskoder. Vi har også lagt til noen grunnleggende metakoder for å angi charsetet, aktivert Chrome Frame (hvis tilgjengelig) eller annen kantmodus (høyest tilgjengelig) for IE, og å initialisere vår responsive visning.

Merk: I koden ovenfor ser du også to eksempler på hvordan kommentarer kan skrives i styringsfiler ("Dokumentinnstillinger" og "Responsive Meta Tags" kommentarer). Kommentarer er differensiert når det er et utropstegn lagt umiddelbart etter åpningen av to sett med krøllete parenteser, med lukkede kommentaren merket med to lukkede sett med krøllete parenteser. Her er et annet eksempel:

 ! Din kommentar her

Trinn 3:

Legg til følgende utdrag bare over ! Responsive Meta Tags kode:

 ! Side Meta Meta_title

Dette legger til sidespesifikke meta html-koder.

Trinn 4:

Legg til følgende utdrag over ! Responsive Meta Tags kode og direkte under siden meta html tag linjer som du tidligere har lagt til:

 ! Stiler

Dette legger til den eksterne linken til stilarket ditt.

Merk: Du trenger ikke en full sti til stilarket ditt, bare en sti i forhold til rotmappen til temaet ditt.

Trinn 5:

Legg til følgende over avslutningen html tag:

 Ghost_head

Ghost bruker denne taggen til å levere viktig stil og metadata i hovedenheten.

Merk: For de med en WordPress-temabakgrunn, kan du sammenligne dette med inkluderingen av wp_head () i alle temaer seksjoner.

Trinn 6:

Erstatt den html-tag med følgende kode:

Denne malemerken vil gi et annet CSS-klassenavn, avhengig av hvilket område av nettstedet som lastes inn:

På hjemmesiden: "hjemme-mal"
På sider med eldre innlegg som nås via paginering: "arkivmal"
På enkelt innlegg: "postmal"

Trinn 7:

Under

kropp

 Uansett hvor du plasserer kropp tag i filen "default.hbs" er hvor hovedinnholdet ditt vil bli vist, det vil si din siste innleggsliste eller en enkelt innleggsvisning.
 Vi har også lagt til en div med wrapper_uber klassenavn, vi vil stilere senere som en wrapper, ved å bruke den til å kontrollere bredden og annen stil av temaets hovedinnholdsområde.
 Merk: Alle CSS-klasser bør inkludere namespacing for å sikre at de ikke støter sammen med andre stiler som nettstedet kan lastes inn. I dette tilfellet legger vi alle klassenavnene sammen med _uber.
 Viktig: Det er veldig viktig kropp tag er omgitt av trippel krøllet parentes, da dette forhindrer verdiene som returneres her, fra å bli rømt. Hvis du ikke brukte trippelkretsbraketter her, ville du få en last med HTML som vises på skjermen i stedet for det faktiske innholdet.
 Trinn 8:
 Rett over  html tag legg til følgende kode:
  Ghost_foot
 Mye som Ghost_head tag vi lagt til ovenfor, dette Ghost_foot template tag må inkluderes for å kunne skrive ut viktige skript og data.
 Trinn 9:
 Lagre filen "default.hbs".
 Din "default.hbs" -fil skal nå se slik ut:
     ! Dokumentinnstillinger   ! Side Meta Meta_title  ! Stiler  ! Responsive Meta Tags    Ghost_head    kropp 
 Ghost_foot  
 
 Testing av "default.hbs" -filen
 Du er nå klar til å teste din "default.hbs" malfil og sørge for at alt er riktig.
 For å gjøre dette, trenger du bare å la Ghost vite at du vil at den skal laste inn "default.hbs" -malen.
 Trinn 1:
 Åpne både "index.hbs" og "post.hbs" -filene i kodeditoren din.
 Steg 2:
 Legg til følgende kode for hver og lagre deretter:
  !< default
 Når Ghost ser !< default tag det vil vite at du vil pakke siden i koden fra "default.hbs" -malen.
 Trinn 3:
 Nå, for å teste din "default.hbs" -fil, gå tilbake til forsiden av Ghost-nettstedet ditt, vanligvis plassert på http: // localhost: 2368 / spøkelse, og oppdater siden.
 Trinn 4:
 Hvor før du så bare et tomt hvitt nettleservindu, bør du nå se bakgrunnsfargen til vinduet omgjort til en lysegrå.
 Hvis du ser dette, har du bekreftet at stilarket lastes riktig.
 Hvis nettleservinduet fortsatt er hvit, må du kontrollere at stedsarkets plassering og navn er riktig angitt i  linje du la til din  seksjon.
 Trinn 5:
 Bruk nettleseren din til å vise sidekilden. Hvis det ser ut som dette, har du opprettet din standard.hbs-fil:
       Spøkelse           
   
 Merk: Du kan oppleve at innholdet på tittel og meta beskrivelsen vises annerledes når du ser sidekilden din. I så fall er det helt normalt da dataene i disse feltene er hentet fra bloggtitlen og bloggbeskrivelsen som angitt i Ghost admin-siden "Innstillinger> Generelt".
 
 Nestemann
 Selv om dette er slutten av den andre avgiften, er vi ikke ferdig med templeringsstadiet for å lage ditt Ghost-tema ennå.
 Vi er imidlertid klare til å begynne å legge til noe innhold slik at det kan vises på en side og slik at vi kan fortsette å teste oppsettet av våre maler mens vi går.
 Neste trinn i vår opplæringsserie fortsetter og fullfører templeringsprosessen. Du lærer hvordan du legger til maler og merker, avslutter temaets tre hovedmalfiler, og legg til malfiler som plasserer en felles topptekst og bunntekst i temaet ditt. Ved slutten av neste del vil templeringsprosessen for å skape temaet være komplett.



		
			
	   
	




Webdesign