Prawdopodobnie słyszałeś o Duch nowa platforma blogowania, która podbiła świat blogów; to proste, jest eleganckie, seksowne; ma to podgląd na żywo. Czego nie lubić?
Idę do Duch , jak wielu projektantów stron internetowych, z tła WordPress. Ale zanim faktycznie udało mi się owinąć głowę WordPress "funkcje szablonu, wypróbowałem dziesiątki, a może setki opcji CMS. Niektóre z bardziej pamiętnych należą ExpressionEngine , Textpattern , nieszczęśliwego FrogCMS , zadzwonił stary, stary skrypt CuteNews , i wiele więcej.
Przez długi czas WordPress zapewniał mi wszystko, czego potrzebowałem: zaawansowane funkcje szablonów; niekończąca się dostawa wtyczek; właśnie widząc, co mogę zrobić.
Ale WordPress jest od jakiegoś czasu czymś więcej niż mechanizmem blogowania. W pewnym sensie przesuwa się ona stopniowo w stronę sfery. Ramy wydawnicze, jeśli chcesz.
Doszedłem do punktu, w którym chcę oprogramowania, które bloguje i to wszystko. Chcę napisać moje posty w Obniżka cen , wpisz kilka słów kluczowych, dodaj obraz lub dwa, a następnie publikuj, a potem zapomnij o całej sprawie.
Okazuje się, że nie jestem sam w moim pragnieniu nieumarłych platform blogowych. Twórcy gry Ghost dołożyli wszelkich starań, aby pozbawić wszystkich możliwości, które dodaliśmy do procesu blogowania, i zbudować prostą, szybką platformę publikacyjną, która wykona zadanie. To zupełnie inna bestia.
Opiera się na filozofii, że CMS do blogowania powinien zrobić jedną rzecz i zrobić to dobrze. Nie zobaczysz żadnych czasopism uruchomionych na tej platformie bez wielu dostosowań. To blog, a przekształcenie go w cokolwiek innego mogłoby w pewien sposób zniweczyć jego cel.
Wtedy jest fakt, że jest zbudowany na nowych technologiach. Duch jest zbudowany Node.js , który wykonuje kod JavaScript na serwerze, a nie w przeglądarce. Jest kochany przez tych samych ludzi, którzy kochają hosting PaaS, i wszystkie te nowe systemy, które ludzie tacy jak ja usiłują zrozumieć. W pewnym sensie jest on odporny na przyszłość od samego początku. Jest to część pierwszej generacji nowej generacji CMS.
Z perspektywy bloggerów uważam, że jest to prosty interfejs do blogowania. Z punktu widzenia użytkownika końcowego nic się nie zmieniło, chyba że domyślny motyw blogu wygląda nieco "płasko". Ale pod maską widzimy coś zupełnie nowego i to dobrze.
Instalacja Ghosta w łatwy sposób.
Zazwyczaj musisz zainstalować komponent lub dwa osobno, aby Ghost został zainstalowany i uruchomiony na komputerze lokalnym. Będziesz musiał zainstalować Node.js, a następnie będziesz musiał wejść i zainstalować kilka dodatkowych pakietów Node ręcznie z wiersza poleceń.
Zgadza się, typowa konfiguracja dla Ghosta wymaga użycia wiersza poleceń. Dla osób bardziej przyzwyczajonych do "pięciominutowej instalacji" WordPressa z bazami danych MySQL i instalatorem graficznym może to być niewygodne.
Może to być ból w szyi, jeśli nie jesteś przyzwyczajony do korzystania z linii poleceń na komputerze Mac lub Linux.
Na szczęście życzliwi ludzie Bitnami wykonane instalatory graficzne dla systemów Windows, Mac i Linux.
Oto wszystkie kroki, które musisz wykonać:
Ponieważ instalator zapewnia wszystkie potrzebne komponenty, takie jak Node.js i mini-serwer, katalog plików nie jest dokładnie taki.
Musisz otworzyć folder, w którym zainstalowałeś Ghost, a następnie przejść do aplikacji / ghost / htdocs / . To faktyczna instalacja Ghosta.
Tematy znajdują się w apps / ghost / htdocs / content / themes / .
Motywy duchów są dość łatwe do wykonania, o ile znasz HTML i CSS. Wiedza programistyczna jest pomocna, ale nie jest bezwzględnie konieczna. System szablonów Ghosta jest prosty, a nawet dość intuicyjny, jeśli stworzyłeś już wcześniej motywy dla WordP ... ahem, innych CMSów.
Wiem wiem. Porównanie z WordPress jest stare. Ale ta odrobina oprogramowania zdominowała rynek już od lat - podobnie jak w przypadku Photoshopa dla obrazów - porównania są nieuniknione. W tym przypadku są one nawet przydatne.
Osoby, które stworzyły motywy WordPress, znajdą trochę struktury plików i języka szablonów, które będą znajome, choć znacznie prostsze. Funkcje PHP WordPress zapewniają dużą elastyczność; ale także komplikują proces kodowania tematycznego.
Ghost's szablon (zbudowany z Kierownice ), jest semantyczny, potężny i dużo bardziej czytelny niż surowe funkcje PHP, z którymi jesteśmy przyzwyczajeni. Osobiście uważam, że jest o wiele łatwiejsze w użyciu.
Z drugiej strony jest to przeznaczone wyłącznie do budowania blogów. Nie będziesz budować hybrydowej strony z wiadomościami / sieci społecznościowej / forum z tą rzeczą. Prostsze, ale ograniczone. To kompromis związany z całą platformą.
Tworzenie podstawowej kompozycji dla Ghosta.
Teraz, jeśli obejrzałeś film (naprawdę powinieneś), poznasz podstawy. Będziesz miał swoją instalację Ghosta w trybie programowania i będziesz miał bardzo ograniczony temat do pracy.
Podsumowując, technicznie potrzebujesz tylko trzech plików, aby stworzyć motyw Ghost:
index.hbs (This template will list your posts)post.hbs (This will display a single post)package.json (This contains theme information)
Istnieją jednak inne podstawowe szablony, które prawdopodobnie chcesz uwzględnić. Możesz oczywiście tworzyć niestandardowe szablony stron, postów, autorów, tagów i innych elementów. Z czasem to wszystko osiągniemy.
Na razie chcę skupić się tylko na podstawach: strukturze motywów, rozszerzaniu plików szablonów i miejscu umieszczenia całego kodu HTML. Oznacza to dodanie do naszego motywu Ducha dodatkowych plików i folderów. Rzućmy okiem na poprawioną strukturę:
default.hbsindex.hbspage.hbspost.hbspackage.jsonassets/css/images/javascript/partials/ (Just examples, here. Not required.)navigation.hbsloop.hbs
default.hbs będzie stanowić podstawę twojego motywu. Twój ,
, i tagi trafią tutaj. Każdy inny szablon będzie renderowany "w środku" tego. Teraz nie musisz tego robić w ten sposób; ale jest to standardowa praktyka i jest wysoce zalecane przez samych Ducha.page.hbs to dokładnie to, o czym sądzisz, szablon dla stron statycznych. Folder aktywów jest dość oczywisty.
Folder partials / to miejsce, w którym można przechowywać bity i fragmenty kodu, których używasz więcej niż raz, na różnych szablonach. Na przykład navigation.hbs może zawierać nazwę / logo witryny i główną nawigację. loop.hbs może wyświetlać listę postów z ogólnym kodem HTML i stylem. To może być używane w wielu miejscach na stronie.
Pokażmy więc, jak proste może być szablonowanie. Najpierw skonfigurujemy plik default.hbs :
{{! 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}}
Teraz utwórzmy szablon navigation.hbs , ponieważ będzie to na każdej stronie:
{{! This should be fairly self-explanatory. }} {{@blog.title}}
{{! Each post excerpt will be displayed with this same markup. }}{{#foreach posts}}» {{/dla każdego}}{{! Linki do następnych i poprzednich stron linków. Możesz zdefiniować, ile linków znajduje się na każdej stronie w panelu administracyjnym. }}{{paginacja}}
Teraz połączymy to wszystko z szablonem index.hbs , który będzie również działał jako strona główna, chyba że postanowisz inaczej. Kod tego, widząc, jak podzieliliśmy i zorganizowaliśmy większość kodu HTML w innym miejscu, jest bardzo prosty:
{{!< 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}}
I to wszystko. Powiedziałem, że to było proste!
Jeśli masz problemy, sprawdź domyślny motyw Ghosta i dokumentacja . Graj za pomocą HTML, baw się z systemem szablonów i zacznij stylizować swój motyw.
Następnym razem będziemy kopać trochę głębiej. W międzyczasie baw się dobrze!
Wyróżnione zdjęcia wykorzystują Obraz ducha przez Shutterstock.