Je hebt waarschijnlijk wel van gehoord Geest , het nieuwe blogplatform dat de blogwereld op zijn kop heeft gezet; het is eenvoudig, het is strak, het is sexy; het heeft een live preview-functie. Wat moet niet leuk vinden?
Ik ga naar Geest , zoals veel webontwerpers, van een WordPress-achtergrond. Maar voordat ik er echt in slaagde mijn hoofd rond te wikkelen WordPress 'template-functies, ik had tientallen, mogelijk honderden, CMS-opties geprobeerd. Sommige van de meer memorabele omvatten ExpressionEngine , Textpattern , de noodlottigen FrogCMS , een oud, oud script genaamd CuteNews , en nog veel meer.
Lange tijd gaf WordPress me alles wat ik nodig had: krachtige sjabloonfuncties; een eindeloze voorraad plug-ins; gewoon zien wat ik kon doen.
Maar WordPress is al geruime tijd heel wat meer dan een bloggengine. Het beweegt op een bepaalde manier gestaag naar het rijk van het raamwerk. Een publicatiekader, als je wilt.
Ik heb het punt bereikt waarop ik software wil die blogt, en dat is alles. Ik wil mijn berichten in schrijven Markdown , typ wat zoekwoorden in, voeg een afbeelding of twee toe, klik op publiceren en vergeet het geheel.
Blijkt dat ik niet alleen ben in mijn verlangen naar een doodeenvoudig blogplatform. De makers achter Ghost hebben zich tot het uiterste ingespannen om alle informatie die we hebben toegevoegd aan het blogproces te verwijderen en een eenvoudig, snel publicatieplatform te bouwen dat de klus zal klaren. Het is een heel ander beest.
Het werkt vanuit de gedachte dat een CMS voor bloggen één ding moet doen en het goed moet doen. Je zult geen tijdschriften op dit platform zien verschijnen zonder veel aanpassingen. Het is een blog en als je er iets anders van maakt, zou het zijn doel verslaan.
Dan is er het feit dat het is gebouwd op nieuwe technologieën. Geest is gebouwd op Node.js , die JavaScript-code op de server uitvoert in plaats van in de browser. Het is geliefd bij dezelfde mensen die dol zijn op PaaS hosting, en al deze nieuwe systemen die mensen zoals ik leuk vinden, worstelen om te begrijpen. In zekere zin is het vanaf de start klaar voor de toekomst. Het maakt deel uit van de eerste generatie van een nieuw ras van CMS.
Let op, vanuit het oogpunt van de blogger, het is gewoon een eenvoudige interface voor bloggen. Vanuit het perspectief van de eindgebruiker is niets echt veranderd, behalve misschien dat het standaardblogthema een beetje "plat" lijkt. Maar onder de motorkap zien we iets totaal nieuws, en dat is een goede zaak.
Ghost op de gemakkelijke manier installeren.
Meestal moet u een of twee componenten afzonderlijk installeren om Ghost op een lokale computer te laten installeren en uitvoeren. U zou Node.js moeten installeren en dan zou u naar binnen moeten gaan en enkele extra knooppuntpakketten handmatig installeren vanaf de opdrachtregel.
Dat klopt, de typische setup voor Ghost vereist het gebruik van de opdrachtregel. Voor mensen die gewend zijn aan het "" vijf minuten durende setup "-proces van WordPress met MySQL-databases en een grafisch installatieprogramma, kan dit ongemakkelijk zijn.
Het kan een pijn in de nek zijn als je niet gewend bent om de opdrachtregel op een Mac- of Linux-computer te gebruiken.
Gelukkig, de aardige mensen die er zijn Bitnami maakte grafische installateurs voor Windows, Mac en Linux.
Hier zijn alle stappen die u moet volgen:
Omdat het installatieprogramma u alle componenten biedt die u nodig hebt, zoals Node.js en een miniserver, is de bestandsdirectory niet helemaal duidelijk.
Je moet openen in welke map je Ghost hebt geïnstalleerd en vervolgens navigeren naar apps / ghost / htdocs / . Dat is de daadwerkelijke installatie van Ghost.
De thema's bevinden zich in apps / ghost / htdocs / content / themes / .
Ghost-thema's zijn vrij eenvoudig te maken, zolang je HTML en CSS kent. Het programmeren van kennis is nuttig, maar niet strikt noodzakelijk. Het sjablonensysteem van Ghost is eenvoudig en zelfs vrij intuïtief, als je thema's hebt opgebouwd voor WordP ... ahem, andere CMS's eerder.
Ik weet het. De vergelijking met WordPress is oud. Maar dat ene beetje software domineert de markt al jaren - net zoals Photoshop voor afbeeldingen - de vergelijkingen zijn onvermijdelijk. In dit geval zijn ze zelfs nuttig.
Mensen die WordPress-thema's hebben gemaakt, zullen een deel van de bestandsstructuur en sjabloontaal vinden om vertrouwd te zijn, maar veel eenvoudiger. De PHP-functies van WordPress bieden u veel flexibiliteit; maar ze compliceren ook het coderingsproces van het thema.
Ghost's sjablonsysteem (gebouwd met Sturen ), is semantisch, krachtig en veel leesbaarder dan de onbewerkte PHP-functies waarmee we werken. Persoonlijk vind ik het gewoon een stuk gemakkelijker te gebruiken.
Aan de andere kant is het puur bedoeld voor het bouwen van blogs. Je zult met dit ding geen hybride nieuwssite / sociaal netwerk / forum bouwen. Eenvoudiger, maar beperkt. Dat is de trade-off die inherent is aan het hele platform.
Een basisthema voor Ghost maken.
Als je de video hebt bekeken (wat je echt zou moeten doen), ken je de basisprincipes. Je hebt je Ghost-installatie in de ontwikkelingsmodus en je hebt een zeer, zeer beperkt thema om mee te werken.
Om samen te vatten, heb je technisch gezien maar drie bestanden nodig om een Ghost-thema te maken:
index.hbs (This template will list your posts)post.hbs (This will display a single post)package.json (This contains theme information)
Er zijn echter nog andere basissjablonen die u waarschijnlijk wilt opnemen. U kunt natuurlijk aangepaste sjablonen maken voor pagina's, berichten, auteurs, tags en meer. Dat zullen we in de loop van de tijd krijgen.
Voor nu wil ik me alleen concentreren op de basis: themastructuur, uitbreiding van sjabloonbestanden en de plaats waar alle HTML moet worden geplaatst. Dit betekent dat je wat extra bestanden en mappen aan ons Ghost-thema moet toevoegen. Laten we de herziene structuur eens bekijken:
default.hbsindex.hbspage.hbspost.hbspackage.jsonassets/css/images/javascript/partials/ (Just examples, here. Not required.)navigation.hbsloop.hbs
default.hbs zal dienen als basis voor uw thema. Jouw ,
, en tags gaan hier naartoe. Elke andere sjabloon wordt 'binnen' deze weergegeven. Nu hoeft u het niet op deze manier te doen; maar het is standaardpraktijk en wordt ten zeerste aanbevolen door de Ghost-ontwikkelaars zelf.page.hbs is precies wat je denkt dat het is, de sjabloon voor statische pagina's. De map met items is redelijk duidelijk.
In de partials / map moet je stukjes code die je vaker gebruikt, in verschillende sjablonen bewaren. Navigatie.hbs kan bijvoorbeeld uw sitenaam / logo en primaire navigatie omvatten. loop.hbs kan een lijst met berichten uitvoeren met wat algemene HTML en stijl. Dit kan op een aantal plaatsen op de site worden gebruikt.
Dus laten we je precies laten zien hoe eenvoudig het templateren kan zijn. Eerst stellen we ons default.hbs- bestand in:
{{! Here we see the functions for page titles and descriptions. }}{{meta_title}} {{! Anything in the assets/ folder can be easily linked to, like so: }}{{! This function here outputs meta keywords, some styling information, stuff like that. }}{{ghost_head}}{{! Any .hbs file in the partials folder can be called in like this. }}{{> header}}{{! This is where the content of all the sub-templates will be output. }}{{{body}}}{{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }}{{ghost_foot}}
Laten we nu de sjabloon navigation.hbs maken, want die staat op elke pagina:
{{! This should be fairly self-explanatory. }} {{@blog.title}}
{{! Each post excerpt will be displayed with this same markup. }}{{#foreach posts}}» {{/ Foreach}} {{! Links naar de volgende en vorige pagina's met links. U kunt definiëren hoeveel links op elke pagina in het admin-paneel staan. }}{{paginering}}
Nu gaan we alles samenvoegen met de index.hbs- sjabloon, die ook als de startpagina zal fungeren, tenzij u anders opgeeft. De code hiervoor, zien hoe we de meeste HTML elders hebben verdeeld en georganiseerd, is heel eenvoudig:
{{!< default}}{{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}}{{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }}{{> loop}}
En dat is het. Ik zei al dat het eenvoudig was!
Als je problemen hebt, ga je naar Ghost's standaardthema en de documentatie . Speel met de HTML, speel met het sjabloonsysteem en begin met het stylen van je thema.
De volgende keer graven we wat dieper. In de tussentijd veel plezier!