Update Wat is er nieuw in Ghost-thema's

#label 
 
Posts Tagged: name
 
 /label

Hiermee wordt een koptekst toegevoegd aan uw pagina's met codelijsten met de naam van de huidige tag.

In uw "layout.less" bestand, na de .article_uber selector stijl, voeg deze code toe:

.tag_heading font-size: 2rem; opvulling: 0 0 2rem 0; text-align: center; margin-bottom: 0.25rem;  

Wanneer u naar een pagina met een codelijst gaat, zou u nu als volgt een kopsectie moeten hebben:

Als u verschillende sjablonen voor specifieke tags wilt maken, gebruikt u de syntaxis van de bestandsnaamtag - slug. Hbs '. Dit kan geweldig zijn voor dingen zoals het maken van afbeeldingsgalerijen uit berichten met de tag "galerij", bijvoorbeeld met behulp van een sjabloon met de naam "tag-gallery.hbs".

Thuiscontext / thuissjabloon

Mogelijk wilt u een andere sjabloon voor uw startpagina dan voor de volgende lijst met berichten terwijl mensen doorbladeren. U kunt bijvoorbeeld een grote omslagafbeelding of een diavoorstelling op uw startpagina hebben waarvan u niet wilt dat bezoekers er op de volgende pagina met berichten langs moeten scrollen..

Als u de weergave van uw startpagina wilt aanpassen, maakt u een sjabloon met de naam "home.hbs".

Lees meer in de Ghost-ontwikkelaardocumenten.

Aangepaste foutpagina's

Als u de exacte weergave van foutpagina's wilt beheren, kunt u dit nu doen door een sjabloon met de naam "error.hbs" te maken..

Lees meer in de (kan je raden?) Ghost ontwikkelaar docs!

Nieuwe helpers

Ghost heeft verschillende nieuwe helpers geïntroduceerd; soort sjabloonlabels die u helpen bij het uitvoeren van bepaalde soorten inhoud in uw thema.

navigatie Helper

Het is nu mogelijk om basisnavigatiemenu's te maken in Ghost, door naar te gaan Instellingen> Navigatie in het admingebied.

Als u een nav-menu wilt weergeven in uw UberTheme, opent u het bestand "header.hbs" in de map "partials" en voegt u deze code toe vóór de laatste afsluitende div-tag:

Open vanuit de "LESS" -map van het project "layout.less" en zoek de .header_uber klasse. Daarin, op regel 33, verander de padding-bottom waarde van:

padding-bottom: 3 * @golden + 0em;

… naar:

padding-bottom: 1,5 * @golden + 0em;

Voeg vervolgens de volgende code toe om je nieuwe navigatiemenu te stylen:

ul.nav list-style-type: none; margin-top: 1,5 * @golden + 0em; opvulling: 0; weergave: flex; justify-content: center; border-top: 0.0625rem solid lighten (@ color_03, 33%); border-bottom: 0.0625rem solid lighten (@ color_03, 33%); achtergrondkleur: lichter (@ color_03, 42%); li marge: 0 0,25 m; opvulling: 0.75em 1em; een text-decoration: none; 

Notitie: We gebruiken hier flexbox voor snelle en eenvoudige menu-implementatie, maar als u oudere browsers wilt ondersteunen, kunt u een andere aanpak gebruiken.

Je thema zou nu een navigatiemenu moeten hebben dat er als volgt uitziet:

Lees meer over navigatie in de ... weet je.

image Helper

Ghost biedt nu de mogelijkheid om een ​​aanbevolen afbeelding aan een bericht toe te voegen. Als u een afbeelding wilt toevoegen, klikt u op het kleine tandwielpictogram rechtsonder in de interface voor het bewerken van berichten en klikt u vervolgens op de knop Postafbeelding toevoegen vierkant boven aan de zijbalk die eruit springt. U kunt ook een afbeelding ernaar slepen en neerzetten.

Om de afbeelding van de post uit te voeren, gebruikt u de beeld helper. Open in UberTheme het bestand "index.hbs" en zoek het inhoud tag op regel 12:

 inhoud 

Recht erboven, voeg een afbeeldingselement toe met behulp van de beeld helper in de src attribuut. We gebruiken de titel van het bericht ook in de alt attribuut, en wikkel het met een #if afbeelding ... / if controleer om er zeker van te zijn dat er een afbeelding te zien is:

 #if afbeelding  / if content 

Je zou nu elk toegevoegd bericht recht onder de titel van het bericht in je thema kunnen zien, zoals zo:

Ga door, docs.

#has Helper

De nieuwe  #Has helper laat je controleren of een bericht een bepaalde auteur als schrijver heeft en / of er zijn bepaalde tags aan gekoppeld. Hiermee kunt u dingen doen zoals het maken van verschillende soorten presentaties voor verschillende auteurs, of in het geval van tags, het instellen van verschillende soorten berichten vergelijkbaar met Tumblr-thema's of WordPress-postformaten.

U kunt bijvoorbeeld alle berichten met de tag 'foto' laten weergeven met een speciale fotolay-out, alle berichten met de tag 'video' worden op hun eigen manier gepresenteerd en andere berichten die teruggaan naar de standaardmarkering:

#has tag = "photo" Speciale presentatie van foto's hier else #has tag = "video" Speciale video-presentatie hier else Terugvallen naar standaardpresentatie / Heeft heeft

Docs.

#is Helper

Tot nu toe hebben we veel van de nieuwe "contexten" doorgenomen binnen een Ghost-site, zoals "post", "auteur", "pagina", "tag" en "home". De  #Is helper geeft u een manier om de uitvoer in een sjabloon te regelen, afhankelijk van de context waarin de sjabloon wordt gebruikt.

Bijvoorbeeld, in plaats van een andere "tag.hbs" -sjabloon te maken zoals hierboven, kunt u in plaats daarvan het volgende toevoegen aan uw "index.hbs" -bestand:

#is "tag" #tag 
 
Posts Tagged: name
 
 / tag / is

De #is "tag" lijncontroles om te zien of de huidige context "tag" is, d.w.z. dat de kijker naar een lijst met berichten onder een bepaald label kijkt, en alleen dan zal het de labelkop uitvoeren.

Lees verder.

###### en # next_post helpers

Als je wilt, kun je nu een toevoegen Volgende bericht en een Vorige post link om lezers toe te staan ​​rechtstreeks van het lezen van de ene post naar de andere te gaan. Deze koppelingen moeten worden toegevoegd aan de sjabloon "post.hbs".

Een voorbeeld van hoe deze links kunnen worden geïmplementeerd (van de pagina Ghost docs), is als volgt:

#post 
titel
 
 inhoud 
 #prev_post title / prev_post #next_post title / next_post / post

Sjablonen overschrijven

Alle sjablonen die we tot nu toe hebben behandeld, komen overeen met bepaalde contexten, maar er zijn er enkele die kunnen worden gebruikt om de uitvoer van bepaalde helpers te controleren, bijvoorbeeld. navigatie en paginering. Standaard verwerkt Ghost de uitvoer van deze helpers automatisch, maar je hebt de mogelijkheid om je eigen uitvoer binnen je thema te definiëren.

Navigatiesjabloon

De standaardmarkupuitvoer door de navigatie helper is:

 #foreach navigation 
label
 / Foreach 

Om in plaats daarvan uw eigen navigatie-opmaak te gebruiken, maakt u een bestand met de naam "navigation.hbs" en plaatst u het in de partials-map van uw thema.

Lees meer in de documenten.

Paginering sjabloon

De mogelijkheid om een ​​aangepaste sjabloon te maken voor de paginering helper is niet echt nieuw, maar het is iets dat we eerder niet in de serie hadden besproken en het is dus het vermelden waard hier. De standaard paginering code in Ghost is:

Overschrijf deze code met uw eigen door een sjabloon met de naam "pagination.hbs" te maken in de map "partials" van uw thema.

Meer hier in de documenten.

Extra kenmerken

Naast nieuwe contexten, sjablonen en helpers heeft Ghost nog een paar dingen toegevoegd aan de mix.

Aanbevolen berichten

Als u een specifieke post als 'Uitgelicht' wilt markeren, zijn er nu twee manieren in de beheerdersinterface.

Klik in de beheerdersruimte met al je berichten op het sterretje in de linkerbovenhoek van het voorbeeldvenster van de post.

Klik vanuit de berichteditor op het kleine tandwielpictogram rechtsonder in het scherm en vink vervolgens het vakje aan Ken dit bericht.

Als je in je thema andere opmaak wilt gebruiken voor aanbevolen berichten, controleer dan of een bericht wordt vermeld bij #if featured

#foreach posts #if featured  anders  / if / foreach

Uitgelichte berichten dragen ook de klasse Aanbevolen zodat je ze kunt targeten voor verschillende styling in je CSS. Voeg deze toe als u wilt dat deze klasse wordt uitgevoerd  Post_class helper op je berichten. 

In UberTheme's "index.hbs", "post.hbs" en "page.hbs" bestanden veranderen bijvoorbeeld deze regel:

… naar:

Standaard zijn de geparkeerde berichten niet gepositioneerd boven andere berichten, ze bevinden zich in hun normale positie op basis van wanneer ze werden gepubliceerd. Als je echter wilt dat aanbevolen berichten als eerste worden weergegeven, heb je twee postlussen nodig: één voor aanbevolen berichten en één voor normale berichten.

#foreach posts #if featured ! - Toon aanbevolen berichten hier - / if / foreach #foreach posts #unless featured ! - Geef normale berichten hier weer - / unless / foreach

Iedereen zingt nu mee: lees meer in de documenten.

Aangepaste Favicons

Om een ​​aangepast favicon in te stellen, plaatst u uw "favicon.ico" -bestand in de map "assets" en laadt u het in de deel van je thema met

asset "/favicon.ico"

Lees meer op Wikipedia (grapje, probeer de Ghost-documenten).

Afsluiten

Dat is een heleboel nieuwe kracht toegevoegd aan de ontwikkeling van het thema Ghost, met een overvloed aan nieuwe mogelijkheden voor de ontwikkeling van creatieve thema's!

Samengevat hebben we:

• "Package.json" bestand en Troef helper gebruik nu vereist
• Navigatie toegevoegd, met de mogelijkheid om de HTML-uitvoer aan te passen
• Uitgelichte afbeeldingen toegevoegd
• Nieuwe helpers om veel meer opties in opmaak toe te staan
• Statische pagina's en aangepaste sjablonen voor hen
• Tag pagina's en aangepaste sjablonen voor hen
• Auteurspagina's en aangepaste sjablonen voor hen
• Homepaginasjabloon
• Aangepaste foutsjabloon
• Aanbevolen berichten
• Aanpasbare favicons

Zelfs met alles wat we hier besproken hebben, zijn er nog steeds meer nieuwe helpers en functies beschikbaar in Ghost, evenals meer details over al het bovenstaande, dus zorg ervoor dat je een goed boek hebt bij themes.ghost.org om alle ins te zien en outs.

Bij deze tutorial vind je een download van een bronbestand waarin je het bijgewerkte thema kunt vinden, evenals het bewerkte bestand "layout.less". Gebruik UberTheme als je testspeeltuin om jezelf vertrouwd te maken met alles wat er nieuw is in Ghost, ga dan daarheen en maak een paar geweldige thema's!

Envato Market

Vergeet niet de Ghost-categorie op Envato Market te bekijken!