Jak utworzyć statyczny blog za pomocą Cactus [OS X]

Aktualizacja: Aplikacja Cactus została wycofana.

Jeśli nie potrzebujesz CMS i wolisz po prostu uzyskać statyczną stronę lub blog, to Jekyll jest dobrym narzędziem, z którym możesz skorzystać. Jeśli jednak wolisz narzędzie z graficznym interfejsem użytkownika, zamiast pracować z narzędziami wiersza poleceń, możesz to sprawdzić Kaktus.

Kaktus jest darmowy statyczny generator witryn wyposażony w potężne narzędzia, które mogą ci pomóc budować strony internetowe lokalnie, szybciej i łatwiej dzięki nowoczesnym technologiom internetowym. Daje ci punkt wyjścia w projekcie dzięki 4 wstępnie zaprojektowanym szablonom, dzięki czemu możesz rzucić się w wir pracy.

Podczas pracy nad projektem Cactus będzie monitoruj każdą zmianę wprowadzoną w projekcie i automatycznie odśwież przeglądarkę dzięki czemu można natychmiast zobaczyć zmiany na komputerze Mac lub urządzeniu mobilnym. Obsługuje także SASS / SCSS i Coffescript po wyjęciu z pudełka, więc każda zmiana w tym pliku jest również automatycznie generowana.

Zaczynać

Przede wszystkim musisz pobrać Cactus z jego strony głównej, a następnie uruchomić instalację. Po zakończeniu otwórz go, zobaczysz cztery przyciski: Utwórz, Rozmieść, Edytuj i Podgląd.

Aby utworzyć nowy projekt, kliknij Stwórz. Zobaczysz tam 4 szablony. W tym samouczku idziemy z szablonem blogu. Kliknij Stwórz.

Zostaniesz poproszony o podanie nazwy swojego projektu i wybranie miejsca, w którym projekt istnieje. Podaję imię “Mój niesamowity blog” dla projektu. Następnie zobaczysz swój projekt już w Cactus.

Modyfikowanie plików

Wygenerowany projekt za pomocą szablonu bloga istnieje teraz w Finderze. Sprawdzimy teraz elementy wymagane do zbudowania naszego bloga. Przejdź do katalogu, w którym przechowywane są twoje pliki. Główne katalogi, których będziemy używać, to Szablony, Strony, i Statyczny informator. Pomińmy teraz inne.

Aby zachować krótkość, oto co jest dla każdego katalogu:

• Szablony: Zawiera pliki HTML, które zachowują się jak szablon, używane przez pliki HTML na stronach do budowania.
• Strony: Zawiera wszystkie pliki HTML, które staną się stroną o tej samej ścieżce. np .: hello.html tutaj stanie się http://yoursite.com/hello.html
• Statyczny: Zawiera wszystkie statyczne zasoby, takie jak CSS, Javascript i obrazy.

Teraz edytujemy trzy główne pliki z katalogów: base.html i post.html w katalogu Templates i index.html w katalogu stron.

Wykorzystanie kaktusa Silnik szablonów Django dla języka szablonów. Dzięki temu możesz dołączać elementy HTML z innych plików HTML, dzięki czemu nie musisz duplikować kodów. Najczęściej używane funkcje to dziedziczenie szablonów i zmienna.

Aby zobaczyć, jak działają, najpierw otwórz base.html w katalogu Template.

             % blok zawartości% Główna zawartość % endblock content% ---   

base.html to prosty plik html, którego używamy jako szablonu „szkieletowego”. Zawiera wspólne elementy naszej strony. Możesz zobaczyć niektóre “Bloki” tam; użyjemy szablonu potomnego do zastąpienia tych bloków.

Teraz otwórz post.html znajduje się w tym samym katalogu co base.html.

 % extends "base.html"% % block title% title | Kaktus % endblock tytuł% % blok zawartości% --- 
 
title
 
headline 
 
 
 % blok treści% Tutaj znajduje się treść posta. % endblock body% 
 --- % endblock content% 

The post.html zawiera znaczniki na naszej stronie wprowadzania bloga. W pierwszym wierszu widać to post.html rozszerza base.html. Oznacza to, że nadpisujemy bloki base.html z blokami tutaj.

Możemy także znaleźć zmienne, takie jak title i headline. Zdefiniujemy wartości tych zmiennych w późniejszym wpisie na blogu.

Teraz spójrzmy na % blok treści% blok. Zostanie to zastąpione przez szablon podrzędny, który zawiera wpisy w naszym blogu.

Przejdź do katalogu strony / posty. Oto reszta naszych wpisów pocztowych.

 tytuł: My Post Wpisy nagłówek: My Post Headline autor: Agus data: 15-01-2015 % extends "post.html"% % block body% % filtrowania% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis wynalazca dolorem rerum et tempora sint nemo illum ab saepe, założenie, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

W wpisach wpisujemy wartość zmiennej, takiej jak tytuł, nagłówek, autor i data. Ta wartość przejdzie, gdy wywołamy nazwę zmiennej na szablonie nadrzędnym. Następnie piszemy treść naszego bloga za pomocą Markdown.

Teraz przejdziemy do strony indeksu naszego bloga, otwartej index.html w stron informator. Zawiera listę naszych wpisów na blogu i link do każdego wpisu. Główny kod wygląda jak poniżej:

 % extends "base.html"% % blok zawartości% -- 
 % dla posta w postach% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

W tym momencie mamy prosty blog z dwiema głównymi stronami strona indeksu który zawiera wpisy na blogu i strona wprowadzania bloga samo.

Przejdź do okna Cactus i kliknij przycisk podglądu, aby uruchomić serwer. Automatycznie otworzy przeglądarkę i otworzy Twoją stronę.

Stylizacja bloga za pomocą SCSS

Świetną cechą Cactus jest to, że działa z SASS / SCSS po wyjęciu z pudełka. Właśnie upuść swoje pliki .sass lub .scss w statyczny katalog i za każdym razem, gdy edytujesz i zapisujesz pliki, Cactus automatycznie wygeneruje CSS.

Tutaj podam przykład wykorzystujący bootstrap-sass do stylizacji naszego bloga. Zakładając, że używasz altany, otwórz terminal i przejdź do statyczny katalog naszego projektu za pomocą Płyta CD dowództwo. Następnie zainstaluj bootstrap-sass za pomocą tego polecenia:

$ bower zainstaluj bootstrap-sass-official

Po zakończeniu pobierania zobaczysz bower_components katalog wewnątrz katalogu statycznego zawierającego bootstrap-sass-urzędnik.

Teraz przejdź do tego katalogu: static / css. Utwórz plik scss, nadaj mu nazwę syle-bs.scss i wstaw ten kod.

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

Kod ten importuje wszystko z bootstrap-sass. Po zapisaniu style-bs.scss zobaczysz style-bs.css wygenerowane w tym samym katalogu, który zawiera wszystkie style z bootstrapu.

Wdrażaj swój projekt

Wreszcie, gdy projekt jest gotowy, możesz łatwo wdrożyć swój projekt w wersji na żywo za pomocą Amazon S3.