Share
Dit is het tweede deel van onze tutorialserie Ghostthema. Alles vanuit hier gaat ervan uit dat je een fundamenteel begrip hebt van Ghost. Als dit niet het geval is, neem voordat u verder gaat de tijd om het volgende te lezen: Understanding Ghost: Stages of Design).
Zoals we in het vorige deel hebben besproken, zijn er twee fasen voor het ontwerpen van een thema voor Ghost: Template File Creation and Styling.
In deze zelfstudie gaan we ons richten op de eerste fase, door u stapsgewijs te begeleiden bij het instellen van de sjablonen van uw thema. Je leert over het sjabloondossier en gedeeltelijke systeem van Ghost, de sjabloontags van het stuur en hoe je het markupskelet van je thema schrijft.
Notitie: Deze zelfstudie wordt uitgevoerd op een Windows-computer, dus neem de equivalente stappen op uw gewenste besturingssysteem.
U zult ook uw voorkeurcode-editor nodig hebben; deze tutorial zal worden uitgevoerd in Sublime Text 2.
Het eerste dat u moet doen is Ghost op uw lokale computer installeren. Dit doen is vrij eenvoudig, zolang je de vereiste voorwaarden op je systeem hebt. Het is niet nodig om XAMPP of het equivalent uit te voeren om Ghost op uw lokale computer uit te voeren, omdat deze zichzelf ook daadwerkelijk zal uitvoeren.
Notitie: Af en toe wanneer u een nieuw thema maakt, start u Ghost opnieuw en selecteert u het nieuwe thema in admin. Het kan nog steeds CSS laden van het vorige thema. Als je dit probleem ervaart tijdens het doorlopen van deze tutorialserie of wanneer je een nieuw thema aan het maken bent, hoef je alleen maar een tweede herstart van Ghost uit te voeren. Een extra herstart moet de cache wissen zodat de CSS van het nieuwe thema zichtbaar wordt.
Zodra je de instructies hebt gevolgd en Ghost hebt geïnstalleerd op je lokale computer (en hebt gecontroleerd of alles goed werkt), ben je klaar om te beginnen met het maken van je Ghost-thema, te beginnen met de onderstaande stappen.
Om te beginnen gaan we een leeg Ghost-thema maken en activeren met het absolute minimum aan vereiste bestanden.
Navigeer in Windows Explorer (of equivalent) naar de map waarin u Ghost hebt geïnstalleerd. Je zou de volgende structuur in je hoofd-Ghost-map moeten zien:
Navigeer naar de map "content> themes", waar u de map van het standaardthema "casper" ziet.
Maak op deze locatie een nieuwe map en geef deze een naam, ongeacht het thema dat u wilt gebruiken. In deze zelfstudie maken we een thema met de naam "UberTheme" en dat is de naam van de map die we gaan maken:
We gaan nu de vereiste sjabloonbestanden toevoegen, zonder welke u fouten krijgt als u uw nieuwe thema probeert te activeren.
De twee bestanden die absoluut noodzakelijk zijn voor het uitvoeren van een Ghost-thema zijn:
Maak een nieuw bestand in de codebewerker van je voorkeur en sla het vervolgens op in de map "UberTheme" als "index.hbs". U hebt nog geen code om aan het bestand toe te voegen, zodat het bestand dat u maakt leeg is.
Maak een tweede nieuw bestand en sla dat ook op in je "UberTheme" -map, dit keer als "post.hbs". Net als het bestand "index.hbs" dat u tijdens de vorige stap hebt gemaakt, is dit bestand ook leeg / leeg.
De binnenkant van je "UberTheme" -map zou er nu als volgt uit moeten zien:
Nu moeten we Ghost starten / herstarten om te zien dat "UberTheme" in de lijst met beschikbare thema's in het admin-paneel verschijnt, zodat we het kunnen selecteren en activeren.
Als je Ghost al hebt laten lopen, zet je hem uit door op CTRL + C in je terminal te drukken en typ je vervolgens "y" gevolgd door ENTER.
Start / herstart Ghost door "npm start" in uw terminal in te voeren.
Tip: Als u niet zeker weet hoe u de terminal moet openen, zodat u de bovenstaande stap kunt uitvoeren, navigeert u naar de map "Ghost", houdt u SHIFT ingedrukt, klikt u met de rechtermuisknop om het menu met Windows-opties te openen en klikt u met de linkermuisknop op "Open hier het Command-venster".
Notitie: In de bovenstaande stappen wordt ervan uitgegaan dat u Ghost hebt bezocht voor instructies over het installeren en uitvoeren van Ghost.
Ga naar je Ghost-beheerderspaneel (aanmelden als dat nodig is), meestal op http: // localhost: 2368 / ghost
Klik op de knop "INSTELLINGEN" in het bovenste menu in uw admin-venster:
Hiermee gaat u naar het gedeelte "INSTELLINGEN> Algemeen" van uw beheerdersdashboard.
Blader omlaag naar de onderkant van de pagina en zoek en vouw vervolgens de vervolgkeuzelijst "Thema" uit. U zou "UberTheme" als een van de opties moeten zien:
Selecteer "UberTheme" in de lijst en klik vervolgens op de blauwe knop "SAVE" in de rechterbovenhoek van de pagina.
Ga in je browser naar de voorkant van je Ghost-installatie, meestal op http: // localhost: 2368 /
Resultaat: u zou niets anders moeten zien dan een blanco wit browservenster.
Als u geen leeg wit browservenster ziet en in plaats daarvan iets ziet als de afbeelding hieronder, doorloopt u de bovenstaande stappen opnieuw en zorgt u ervoor dat u uw sjabloonbestanden correct hebt benoemd:
De enige absoluut vereiste bestanden zijn de "index.hbs" en "post.hbs" sjabloonbestanden zoals beschreven in de laatste sectie.
Er zijn echter nog twee bestanden die je in vrijwel elk thema wilt gebruiken, ook al zijn ze niet strikt vereist, dus we voegen die nu toe. We organiseren ook een mappenstructuur om eventuele extra bestanden die later aan uw thema worden toegevoegd, te bewaren.
Er is nog een hoofdsjabloonbestand dat je wilt in de hoofdmap van je thema, en dat is het bestand "default.hbs".
Dit bestand maakt de "wrapper" -code voor uw thema, d.w.z. de hoofd- en voetcode die om elke pagina van een site met uw thema wordt gewikkeld. Het zal je standaard bevatten , en secties, evenals enkele sjabloontags die belangrijke Ghost-code uitvoeren.
We zullen later meer in detail beschrijven wat er in dit bestand moet worden geschreven. Laten we voorlopig gewoon het lege bestand zelf maken.
Maak een nieuw bestand in de codebewerker van je voorkeur en sla het vervolgens op in je "UberTheme" -map als "default.hbs".
Met het sjablonen van het stuur kun je zogenoemde "gedeeltelijke" sjabloonbestanden maken. Met deze gedeeltelijke sjabloonbestanden kunt u uw thema opsplitsen in kleinere componenten voor een meer modulaire, goed georganiseerde structuur.
U wilt bijvoorbeeld uw lay-out opsplitsen in "header", "main" en "footer" -secties, met de code voor elke sectie in zijn eigen gedeeltelijke bestand. Je ziet dit proces later in de praktijk. Voor nu maken we gewoon de map die zal worden gebruikt om deze "gedeeltelijke" bestanden te bewaren.
Navigeer in Windows Verkenner (of gelijkwaardig) naar de map "UberTheme".
Maak een nieuwe map en noem deze "partials".
Notitie: Het is belangrijk om te zorgen dat deze map de juiste naam heeft en zich bevindt in de hoofdmap van het thema, anders kan Ghost uw gedeeltelijke sjabloonbestanden niet vinden.
Wanneer we de stylingfase bereiken, gaan al uw stijlgerelateerde bestanden naar uw "assets" -map, inclusief CSS, JS, lettertype en afbeeldingsbestanden.
Notitie: U bent niet verplicht om de map "assets" een naam te geven - u kunt het eigenlijk alles noemen wat u maar wilt. We volgen eenvoudigweg de richtlijnen met best practices van Ghost in deze zelfstudie.
Navigeer in Windows Verkenner (of gelijkwaardig) naar de map "UberTheme".
Maak een nieuwe map en noem deze "assets".
Navigeer naar uw map "assets".
Maak een nieuwe map en noem deze "css".
Maak een nieuwe map en noem deze "fonts".
Maak een nieuwe map en noem deze "afbeeldingen".
Maak een nieuwe map en noem deze "js".
Uw themabestand en mappenstructuur moeten er nu als volgt uitzien:
Technisch gezien zou het toevoegen van uw stylesheet-bestand deel uitmaken van het stylingproces. We gaan het echter schrijven sectie in de volgende fase van de zelfstudie, en als onderdeel hiervan willen we de stylesheet van uw thema koppelen en verifiëren dat deze wordt geladen.
Voor dat doel zullen we een stylesheetbestand maken dat een achtergrondkleur aan uw thema toevoegt, zodat we er vervolgens voor kunnen zorgen dat het in uw sectie correct.
Maak een nieuw bestand in uw voorkeurscode-editor.
Voeg de volgende CSS toe aan het bestand:
body achtergrondkleur: # F0F0F0;
Sla het bestand op in de map "UberTheme> assets> css" als "style.css".
We gaan nu verder met het schrijven van de eigenlijke sjablooncode van uw thema, te beginnen met het bestand "default.hbs". (Zie hierboven voor een samenvatting van waar dit bestand voor is).
Notitie: Om onderscheid te maken tussen html-tags en stuursjabloontags, gebruiken we de term 'html-tags' of 'sjabloontags', zodat u weet naar welk type wordt verwezen.
Open in je voorkeurscode-editor je "default.hbs" -bestand uit de hoofdmap van het thema, d.w.z. "UberTheme".
Voeg de volgende code toe:
! Documentinstellingen ! Responsieve metatags
Het enige dat we hier hebben gedaan is het toevoegen van de essentiële doctype-, html-, head- en body-tags. We hebben ook enkele standaard metatags toegevoegd om de tekenset in te stellen, Chrome Frame ingeschakeld (indien beschikbaar) of anders Edge-modus (hoogst beschikbaar) voor IE en om ons responsieve display te initialiseren.
Notitie: In de bovenstaande code ziet u ook twee voorbeelden van opmerkingen die kunnen worden geschreven in stuurbestanden (de opmerkingen "Documentinstellingen" en "Responsieve metatags"). Opmerkingen worden gedifferentieerd wanneer er een uitroepteken wordt toegevoegd onmiddellijk na het openen van twee sets accolades, met het sluiten van de opmerking gemarkeerd door twee gesloten reeksen accolades. Hier is nog een voorbeeld:
! Uw commentaar hier
Voeg het volgende fragment toe net boven de ! Responsieve metatags code:
! Pagina-metaMeta_title
Hiermee worden paginaspecifieke meta-html-tags toegevoegd.
Voeg het volgende fragment toe boven de ! Responsieve metatags code en direct onder de pagina meta html-tagregels die u eerder hebt toegevoegd:
! Stijlen
Hiermee wordt de externe link toegevoegd aan uw stylesheet.
Notitie: U hebt geen volledig pad naar uw stylesheet nodig, alleen een pad ten opzichte van de hoofdmap van uw thema.
Voeg het volgende toe boven de afsluiting html-tag:
Ghost_head
Ghost gebruikt deze tag om belangrijke stijl- en metadata uit te voeren in de headsectie.
Notitie: Voor degenen met een WordPress-achtergrond, kunt u dit vergelijken met de opname van wp_head () in alle thema's secties.
Vervang de html-tag met de volgende code:
Deze sjabloontag geeft een andere CSS-klassenaam weer, afhankelijk van het gebied van de site dat wordt geladen:
Onder de Waar je het ook plaatst We hebben ook een div toegevoegd met de Notitie: Alle CSS-klassen moeten namespacing bevatten om ervoor te zorgen dat ze niet botsen met andere stijlen die de site mogelijk laadt. In dit geval voegen we alle klassenamen toe met Belangrijk: Het is erg belangrijk het Direct boven de html-tag voeg de volgende code toe: Net als de Sla het bestand "default.hbs" op. Uw "default.hbs" -bestand zou er nu als volgt uit moeten zien: U bent nu klaar om uw "default.hbs" -sjabloonbestand te testen en te controleren of alles correct is. Om dit te doen, moet je Ghost laten weten dat je wilt dat het de "default.hbs" -sjabloon laadt. Open zowel uw "index.hbs" - als "post.hbs" -bestanden in uw codebewerker. Voeg de volgende code toe aan elk en sla vervolgens op: Wanneer Ghost de ziet Om nu je "default.hbs" -bestand te testen, ga je terug naar de voorkant van je Ghost-site, meestal op http: // localhost: 2368 / ghost, en vernieuw je de pagina. Waar je eerder een leeg wit browservenster zag, zou je nu de achtergrondkleur van het venster moeten zien geconverteerd naar een lichtgrijs. Als je dit ziet, heb je geverifieerd dat je stylesheet correct wordt geladen. Als het browservenster nog steeds wit is, controleer dan of de locatie en de naam van uw stylesheet correct zijn ingevoerd in de Gebruik uw browser om de paginabron te bekijken. Als het er zo uitziet, hebt u met succes het bestand "default.hbs" gemaakt: Notitie: Mogelijk ziet u dat uw titel en metabeschrijving inhoud anders wordt weergegeven wanneer u uw paginabron bekijkt. Als dat zo is, is dat volkomen normaal omdat de gegevens in die velden zijn afgeleid van de blogtitel en blogbeschrijving zoals ingevoerd op de Ghost-admin "Instellingen> Algemeen" pagina. Hoewel dit het einde van de tweede aflevering is, zijn we nog niet klaar met de templating-fase van het maken van je Ghost-thema. We zijn echter klaar om inhoud toe te voegen zodat deze kan worden weergegeven op een pagina en zodat we de configuratie van onze sjablonen kunnen blijven testen terwijl we verder gaan. De volgende fase van onze zelfstudiereeks gaat verder en voltooit het sjabloonproces. U leert hoe u sjabloontags en markeringen kunt toevoegen, de drie belangrijkste sjabloonbestanden van uw thema kunt finaliseren en de sjabloonbestanden kunt toevoegen die een gemeenschappelijke kop- en voettekst in uw thema plaatsen. Aan het einde van het volgende deel is het sjabloonproces voor het maken van je thema voltooid.lichaam tag in uw "default.hbs" -bestand is waar uw hoofdcontent wordt weergegeven, d.w.z. uw laatste lijst met berichten of één bericht achteraf.wrapper_uber class naam zullen we later als een wrapper stylen, waarmee het de breedte en andere styling van het hoofdinhoudsgebied van het thema regelt._uber.lichaam tag is omgeven door drievoudige accolades, omdat dit voorkomt dat de hier geretourneerde waarden kunnen worden geëscaped. Als u hier geen drievoudige accolades hebt gebruikt, krijgt u een hoop HTML op uw scherm te zien in plaats van de werkelijke inhoud.Stap 8:
Ghost_foot
Ghost_head tag die we hierboven hebben toegevoegd, dit Ghost_foot sjabloontag moet worden opgenomen om belangrijke scripts en gegevens uit te voeren.Stap 9:
! Documentinstellingen ! Pagina-meta
Uw "default.hbs" bestand testen
Stap 1:
Stap 2:
!< default
!< default label het zal weten dat je de pagina in de code wilt inpakken van de "default.hbs" -sjabloon.Stap 3:
Stap 4:
regel die u aan uw hebt toegevoegd sectie.Stap 5:
Komende Volgende
Accentsconagua