Een statische blog maken met Cactus [OS X]

Bijwerken: Cactus-app is stopgezet.

Als u geen CMS nodig hebt en liever alleen een statische site of blog wilt, is Jekyll een goed hulpmiddel om een ​​kans mee te nemen. Als u echter de voorkeur geeft aan een hulpmiddel met een grafische gebruikersinterface, in plaats van te werken met hulpprogramma's voor opdrachtregels, wilt u misschien even kijken Cactus.

Cactus is een gratis statische site generator uitgerust met krachtige hulpmiddelen die u kunnen helpen websites lokaal bouwen, sneller en gemakkelijker met moderne webtechnologieën. Het geeft je een startpunt in je project met 4 vooraf ontworpen sjablonen, zodat je op de grond kunt rennen.

Tijdens het werken aan je project zal Cactus dat doen toezicht houden op elke verandering die u aanbrengt in uw project en automatisch de browser vernieuwen zodat u de wijzigingen onmiddellijk kunt zien, op uw Mac of mobiele apparaat. Het ondersteunt ook SASS / SCSS en Coffescript uit de doos, dus elke verandering in dit bestand wordt ook automatisch gegenereerd.

Begin

Allereerst moet u Cactus downloaden van de startpagina en vervolgens de installatie uitvoeren. Eenmaal voltooid, opent u deze en ziet u vier knoppen: Maken, Inzetten, Bewerken en Voorbeeldknop.

Klik op om een ​​nieuw project te maken creëren. Je ziet daar 4 sjablonen. Voor deze zelfstudie gaan we met de blogsjabloon. Klik creëren.

U wordt gevraagd om de naam van uw project op te geven en de locatie te kiezen waar het project bestaat. Hier geef ik naam “Mijn geweldige blog” voor het project. Daarna zie je je project al in Cactus.

Bestanden aanpassen

Het gegenereerde project met een Blog-sjabloon bestaat nu in uw Finder. We zullen nu de elementen inspecteren die nodig zijn om onze blog te bouwen. Ga naar de map waar uw bestanden worden bewaard. De belangrijkste mappen die we zullen gebruiken zijn templates, Pages, en Statisch directory. Laten we de anderen overslaan voor nu.

Om het kort te houden, hier is waar elke map voor is:

• templates: Bevat HTML-bestanden die zich als sjabloon gedragen, gebruikt door HTML-bestanden op pagina's om op te bouwen.
• Pages: Bevat alle HTML-bestanden die een pagina met hetzelfde pad worden. bijv .: hello.html hier wordt http://yoursite.com/hello.html
• Statisch: Bevat alle statische bronnen zoals CSS, Javascript en afbeeldingen.

Nu zullen we drie hoofdbestanden uit de mappen bewerken: base.html en post.html in de map Templates en index.html in de map Pages.

Cactus gebruikt Django Template Engine voor de templaterende taal. Hiermee kunt u HTML-elementen uit andere HTML-bestanden opnemen, zodat u geen codes hoeft te dupliceren. De functies die hier het meest worden gebruikt, zijn template inheritance en veranderlijk.

Om te zien hoe ze werken, open eerst de base.html in de map Sjabloon.

             % block content% Hoofdinhoud % endblock content% ---   

base.html is het eenvoudige html-bestand dat we gebruiken als een 'skelet' -sjabloon. Het bevat gemeenschappelijke elementen van onze site. Je kunt er wat zien “blokken” daarin; we zullen de onderliggende sjabloon gebruiken om deze blokken te negeren.

Open nu de post.html bevindt zich in dezelfde map met base.html.

 % breidt "base.html"% % block title% title | uit Cactus % endblock title% % block content% --- 
 
title
 
headline 
 
 
 % block body% Dit is waar de inhoud van het bericht is. % endblock body% 
 --- % endblock content% 

De post.html bevat de opmaak voor onze blog-invoerpagina. Op de eerste regel kun je dat zien post.html breidt het uit base.html. Dit betekent dat we de blokken opheffen base.html met de blokken hier.

We kunnen hier ook variabelen vinden, zoals title en headline. We zullen de waarden van deze variabelen later in de blogvermeldingen definiëren.

Laten we nu kijken naar de % block body% blok. Dit wordt opgeheven door de kindsjabloon die de berichten van onze blog bevat.

Ga naar de map pages / berichten. Dit zijn de rest van onze berichten.

 title: Mijn berichtitems headline: My Post Headline auteur: Agus date: 15-01-2015 % extends "post.html"% % block body% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe, assumenda, amet illo gedeelditi officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

In de postinvoeren geven we waarde aan de variabele, zoals titel, kop, auteur en datum. Deze waarde gaat over als we de variabelenaam op de bovenliggende sjabloon noemen. Vervolgens schrijven we de inhoud van onze blog met Markdown.

Nu gaan we naar de indexpagina van onze blog, open index.html in de pagina's directory. Het bevat de lijst met onze blog-items en de link naar elk item. De hoofdcode ziet er als volgt uit:

 % breidt "base.html"% % block content% uit -- 
 % voor plaatsen in berichten% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

Op dit punt hebben we een eenvoudige blog met twee hoofdpagina's, de indexpagina die de blog-items bevat, en de blog invoerpagina zelf.

Ga naar Cactus-venster en klik op de voorbeeldknop om de server te starten. Het opent de browser automatisch en opent uw website.

De blog stylen met SCSS

Een leuk kenmerk van Cactus is dat het uit de doos met SASS / SCSS werkt. Net drop je .sass of .scss bestanden in de statisch map en elke keer dat u de bestanden bewerkt en opslaat, zal Cactus automatisch de CSS genereren.

Hier zal ik een voorbeeld geven met bootstrap-sass voor het stylen van onze blog. Ervan uitgaande dat u prieel gebruikt, opent u de terminal en navigeert u naar de statisch directory van ons project met CD commando. Installeer vervolgens bootstrap-sass met behulp van deze opdracht:

$ bower installeert bootstrap-sass-officieel

Zodra de download is voltooid, ziet u een bower_components map in de statische map met bootstrap-sass-official.

Ga nu naar deze map: static / css. Maak het scss-bestand, geef het de naam syle-bs.scss en voeg deze code in.

 @import "... / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"; 

Wat de code doet is dat het alles importeert van bootstrap-sass. Nadat u style-bs.scss hebt opgeslagen, ziet u style-bs.css gegenereerd in dezelfde map die alle stijlen van bootstrap bevat.

Implementeer uw project

Als uw project ten slotte klaar is, kunt u uw project eenvoudig implementeren in de live versie met behulp van Amazon S3.