Πώς να δημιουργήσετε ένα στατικό ιστολόγιο χρησιμοποιώντας Cactus [OS X]

Εκσυγχρονίζω: Η εφαρμογή Cactus έχει διακοπεί.

Εάν δεν χρειάζεστε ένα CMS και θα προτιμούσατε να αποκτήσετε μόνο ένα static site ή blog, τότε ο Jekyll είναι ένα καλό εργαλείο για να πάρετε μια ευκαιρία με. Ωστόσο, εάν προτιμάτε ένα εργαλείο με γραφικό περιβάλλον, αντί να δουλεύετε με εργαλεία γραμμής εντολών, τότε ίσως θελήσετε να το ελέγξετε Κάκτος.

Ο Κάκτος είναι δωρεάν γεννήτρια στατικών τοποθεσιών εξοπλισμένο με ισχυρά εργαλεία που μπορούν να σας βοηθήσουν οικοδόμηση ιστοσελίδων σε τοπικό επίπεδο, ταχύτερη και ευκολότερη με σύγχρονες τεχνολογίες ιστού. Σας δίνει ένα σημείο εκκίνησης στο έργο σας με 4 προδιαμορφωμένα πρότυπα ώστε να μπορείτε να χτυπήσετε το έδαφος σε λειτουργία.

Ενώ εργάζεστε στο έργο σας, το Cactus θα το κάνει παρακολουθήστε κάθε αλλαγή που κάνετε στο έργο σας και αυτόματη ανανέωση του προγράμματος περιήγησης ώστε να μπορείτε να δείτε τις αλλαγές αμέσως, στο Mac ή στην κινητή συσκευή σας. Υποστηρίζει επίσης το SASS / SCSS και το Coffescript από το κουτί, επομένως κάθε αλλαγή σε αυτό το αρχείο δημιουργείται επίσης αυτόματα.

Ξεκίνα

Πρώτα απ 'όλα, θα πρέπει να κατεβάσετε το Cactus από την αρχική του σελίδα και στη συνέχεια να εκτελέσετε την εγκατάσταση. Μόλις ολοκληρωθεί, ανοίξτε το, θα δείτε τέσσερα κουμπιά: Δημιουργία, Ανάπτυξη, Επεξεργασία και Προεπισκόπηση.

Για να δημιουργήσετε ένα νέο έργο, κάντε κλικ στην επιλογή Δημιουργώ. Θα δείτε 4 πρότυπα διαθέσιμα εκεί. Για αυτό το σεμινάριο, πηγαίνουμε με το πρότυπο Blog. Κάντε κλικ Δημιουργώ.

Θα σας ζητηθεί να δώσετε το όνομα του έργου σας και να επιλέξετε την τοποθεσία όπου υπάρχει το έργο. Εδώ δίνω το όνομα “Το φοβερό μου ιστολόγιο” για το έργο. Μετά από αυτό, θα δείτε το έργο σας ήδη στο Cactus.

Τροποποίηση αρχείων

Το δημιουργούμενο έργο που χρησιμοποιεί πρότυπο Blog υπάρχει τώρα στο Finder σας. Θα εξετάσουμε τώρα τα στοιχεία που απαιτούνται για τη δημιουργία του Blog μας. Μεταβείτε στον κατάλογο όπου φυλάσσονται τα αρχεία σας. Οι κύριοι κατάλογοι που θα χρησιμοποιήσουμε είναι Πρότυπα, Σελίδες, και Στατικός Ευρετήριο. Ας πηδήσουμε τους άλλους για τώρα.

Για να κρατήσετε τα πράγματα σύντομα, ακολουθήστε τα εξής:

• Πρότυπα: Περιέχει αρχεία HTML που συμπεριφέρονται ως πρότυπο, τα οποία χρησιμοποιούνται από αρχεία HTML σε σελίδες για την ανάπτυξη.
• Σελίδες: Περιέχει όλα τα αρχεία HTML που θα γίνουν μια σελίδα με την ίδια διαδρομή. π.χ.: hello.html εδώ θα γίνει http://yoursite.com/hello.html
• Στατικός: Περιέχει όλους τους στατικούς πόρους όπως CSS, Javascript και εικόνες.

Τώρα, θα επεξεργαστούμε τρία βασικά αρχεία από τους καταλόγους: base.html και post.html στον κατάλογο Πρότυπα και index.html στον κατάλογο Σελίδες.

Κάκτος χρησιμοποιεί Μηχανή προτύπου Django για τη γλώσσα που υποδύεται. Με αυτό, μπορείτε να συμπεριλάβετε στοιχεία HTML από άλλα αρχεία HTML, επομένως δεν χρειάζεται να κάνετε διπλότυπους κωδικούς. Τα χαρακτηριστικά που χρησιμοποιούνται περισσότερο εδώ είναι πρότυπο κληρονομιά και μεταβλητός.

Για να δείτε πώς λειτουργούν, ανοίξτε πρώτα το base.html στον κατάλογο προτύπων.

             % block content% Κύριο περιεχόμενο % endblock content% ---   

base.html είναι το απλό αρχείο html που χρησιμοποιούμε ως πρότυπο "σκελετό". Περιέχει κοινά στοιχεία του ιστότοπού μας. Μπορείτε να δείτε μερικά “μπλοκ” εκεί μέσα; θα χρησιμοποιήσουμε το πρότυπο παιδιού για να παρακάμψουμε αυτά τα μπλοκ.

Τώρα ανοίξτε το post.html που βρίσκεται στον ίδιο κατάλογο με base.html.

 % επεκτείνει "base.html"% % block title% title | Cactus % endblock title% % περιεχόμενο μπλοκ% --- 
 
 τίτλος 
 
 επικεφαλίδα  
 
 
 % block body% Αυτό είναι όπου το περιεχόμενο των μηνυμάτων είναι. % endblock body% 
 --- % endblock content% 

ο post.html περιέχει τη σήμανση για τη σελίδα εισαγωγής ιστολογίου. Στην πρώτη γραμμή μπορείτε να το δείτε post.html επεκτείνει το base.html. Αυτό σημαίνει ότι θα αντικαταστήσουμε τα μπλοκ base.html με τους μπλοκ εδώ.

Μπορούμε επίσης να βρούμε μεταβλητές εδώ, όπως τίτλος και επικεφαλίδα . Θα καθορίσουμε αργότερα τις τιμές αυτών των μεταβλητών στις καταχωρήσεις του ιστολογίου.

Τώρα, μπορείτε να δείτε το % block body% ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Αυτό θα αντικατασταθεί από το πρότυπο παιδιού που περιέχει τις καταχωρήσεις καταχωρήσεων του ιστολογίου μας.

Πηγαίνετε στον κατάλογο σελίδες / αναρτήσεις. Ακολουθούν οι υπόλοιπες καταχωρίσεις μας.

 τίτλος: Οι εγγραφές μου Τίτλος: Η Δημοσίωσή μου Τίτλος συγγραφέας: Agus ημερομηνία: 15-01-2015 % extends "post.html"% % block body% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ο χρόνος, ο δεύτερος εφευρέτης δεν μπορεί να χρησιμοποιηθεί για να αποφευχθεί η μείωση του αριθμού των ασθενών, --- % τελικός φίλτρο% % endblock body% 

Στις καταχωρήσεις μετά, δίνουμε αξία στη μεταβλητή, όπως τον τίτλο, τον τίτλο, τον συντάκτη και την ημερομηνία. Αυτή η τιμή θα περάσει όταν καλούμε το όνομα της μεταβλητής στο γονικό πρότυπο. Στη συνέχεια, γράφουμε το περιεχόμενο του ιστολογίου μας με τον Markdown.

Τώρα θα πάμε στη σελίδα ευρετηρίου του ιστολογίου μας, ανοιχτό index.html στο σελίδες Ευρετήριο. Περιέχει τη λίστα των καταχωρίσεων του ιστολογίου μας και τη σύνδεση με κάθε καταχώρηση. Ο κύριος κώδικας φαίνεται παρακάτω:

 % επεκτείνει "base.html"% % block content% -- 
 % για δημοσίευση σε αναρτήσεις% 
   Τίτλος ανάρτησης  
post.headline 
 % endfor% 
 -- % endblock content% 

Σε αυτό το σημείο έχουμε ένα απλό ιστολόγιο με δύο κύριες σελίδες, το σελίδα ευρετηρίου που περιέχει τις καταχωρήσεις blog και το σελίδα καταχώρησης ιστολογίου εαυτό.

Μεταβείτε στο παράθυρο Cactus και κάντε κλικ στο κουμπί προεπισκόπησης για να ξεκινήσετε το διακομιστή. Θα ανοίξει αυτόματα το πρόγραμμα περιήγησης και θα ανοίξει τον ιστότοπό σας.

Σχεδίαση του Blog χρησιμοποιώντας το SCSS

Ένα μεγάλο χαρακτηριστικό του Cactus είναι ότι λειτουργεί με το SASS / SCSS από το κουτί. Μόλις αφήστε τα αρχεία .sass ή .scss μέσα στο στατικός και κάθε φορά που επεξεργάζεστε και αποθηκεύετε τα αρχεία, το Cactus θα δημιουργήσει αυτόματα το CSS.

Εδώ θα δώσω ένα παράδειγμα χρησιμοποιώντας το bootstrap-sass στο styling το blog μας. Υποθέτοντας ότι χρησιμοποιείτε το τροφοδοτικό, ανοίξτε τον τερματικό και περιηγηθείτε στο στατικός κατάλογο του έργου μας χρησιμοποιώντας CD εντολή. Στη συνέχεια, εγκαταστήστε bootstrap-sass χρησιμοποιώντας αυτήν την εντολή:

$ bower εγκαταστήστε το bootstrap-sass-official

Μόλις ολοκληρωθεί η λήψη, θα δείτε α bower_components στον κατάλογο που περιέχει τον στατικό κατάλογο bootstrap-sass-επίσημη.

Τώρα μεταβείτε σε αυτόν τον κατάλογο: static / css. Δημιουργήστε το αρχείο scss, δώστε το όνομα syle-bs.scss και εισαγάγετε αυτόν τον κώδικα.

 @import "... / bower_components / bootstrap-sass-επίσημη / ενεργητικά / φύλλα στυλ / _bootstrap"; 

Αυτό που κάνει ο κώδικας είναι ότι εισάγει τα πάντα από bootstrap-sass. Μόλις αποθηκεύσετε το style-bs.scss, θα δείτε το style-bs.css που δημιουργείται στον ίδιο κατάλογο που περιέχει όλα τα στυλ από το bootstrap.

Αναπτύξτε το έργο σας

Τέλος, όταν το σχέδιό σας είναι έτοιμο, μπορείτε να αναπτύξετε εύκολα το έργο σας στην ζωντανή έκδοση χρησιμοποιώντας το Amazon S3.