The platforma blogów Ghost Ostatnio wiele uwagi poświęcono niedawnemu przejściu z wersji beta do publicznej (jeśli jeszcze o tym nie słyszałeś, siądź tutaj i przeczytaj).

Podobnie jak inne platformy, Ghost obsługuje "motywy" innych firm. W tym artykule zaprojektujemy prosty, responsywny i oparty na treści blog. Następnie zakoduj go w pełni funkcjonalnym motywie dla Ghosta.

Projektowanie

Domyślny motyw dla Ghost, "Casper", jest bardzo czysty. Najpierw umieszczają treści, pokazując typografię za pomocą nowoczesnej palety kolorów, aby skupić się na pisaniu.

Podążymy za tym tropem, więc nasz proces projektowania musi rozpocząć się od zrozumienia, jak działa Ghost i co jest dostępne dla użytkownika w back-end. Istnieją 4 główne elementy, które będziemy mogli wykorzystać na zapleczu podczas projektowania tematu (oprócz samych artykułów / postów), które są:

• Tytuł bloga
• Opis bloga
• Logo blogu
• Okładka bloga

Wszystko to można ustawić na karcie Ustawienia w Ghost. Wskazują one projekt w oczywistym kierunku na baner na górze strony, który zawiera tytuł, logo i opis oraz zdjęcie na okładce jako tło.

Strona główna

Musimy więc zaprojektować tylko dwie strony, czyli stronę główną, na której znajdują się wszystkie najnowsze posty i poszczególne strony postów. Ponieważ projekt jest stosunkowo prosty, najpierw pokażę ukończoną stronę, a następnie ponownie przejrzę szczegóły. Oto strona "główna", która wyświetla najnowsze posty:

Jak widać, kolorowe podkreśla, a także prosty i czysty design. Ponownie omówmy szczegóły. Mamy więc nagłówek, który zawiera logo (tutaj zrobiłem mały kostium dla ducha), nazwę bloga i opis.

Jeśli więc użytkownik wybierze zdjęcie na okładkę, umieścimy go tutaj jako obraz tła o pełnej szerokości. Jeśli nie, wybieramy solidny niebieski kolor, który będzie naszym kolorem podświetlenia jak wyżej.

Następnie mamy pewne pola zawartości, w których pokażemy wszystkie informacje o każdym poście (tytuł, opublikowana data, autor, tagi) i fragment.

Na koniec tworzymy prosty link do stronicowania i stopkę. W polu udostępniania artykułu, w stopce i na całej stronie używamy niestandardowej czcionki ikony Fontello i czcionkę Otwórz Sans z Google Web Fonts. Które zobaczymy później.

Pojedyncza strona postu

Ten wzór jest bardzo podobny do strony głównej. Z wyjątkiem bloku, w którym zamieściliśmy poprzedni fragment, teraz rozciągamy całą wysokość i pokazujemy całą zawartość. Dodatkowo dodamy pole autora na dole.

A więc wszystko tak samo, poza niektórymi liniowymi stylami tekstu, które przejdziemy na etapie rozwoju. A oto nowe pudełko autora:

Rozwój

Okay, więc teraz projekt został przejrzany (i oczywiście dostosuj go do własnych preferencji). Czas zacząć rozwój. Po pierwsze, jeśli jeszcze tego nie zrobiłeś, poświęć chwilę i przeczytaj oficjalnego Ducha dokumentacja dotycząca tworzenia motywów. Są bardzo jasne i zwięzłe na temat tego, co jest potrzebne, a struktura plików i tak dalej. Zasadniczo dla tego samouczka możemy podzielić projekt na dwa etapy. Treść i styl. Podobnie jak podstawowa relacja między HTML a CSS, sprawimy, że motyw będzie działał, a następnie sprawi, że będzie wyglądał jak nasz projekt.

Struktura pliku

Na początek musisz zainstalować Ghosta lokalnie na swoim komputerze. Jest to stosunkowo proste do wykonania, a teraz są nawet automatyczne instalatory (np ten ). Po zainstalowaniu i uruchomieniu musisz znaleźć folder ghost o nazwie "ghost-version.number" (w chwili pisania jest to ghost-0.3.2). Po zlokalizowaniu przejdź do "treści / motywów", tam będziesz chciał utworzyć nowy folder z nazwą motywu. Tak więc w tym przypadku nazwiemy to "arkuszem". W tym folderze zrobimy 2 pliki, które są niezbędne dla motywu Ghost. To jest "index.hbs" i "post.hbs", jeśli przeczytałeś dokumentację Ghost (lub użyłeś Handlebars gdzie indziej), rozpoznasz format pliku ".hbs", co oznacza, że ​​możemy użyć tak zwanych "handlebars" : {{}} w naszym szablonie.

Następnie dodamy kolejny plik o nazwie "default.hbs" i strukturę folderów dla naszych zasobów i plików częściowych. Postępuj zgodnie z tą strukturą pliku:

W "asset / css / fonts" umieścimy pliki czcionek ikon dla implementacji @ font-face. Do tego projektu wybrałem tylko 6 ikon: Facebook, Twitter, Google, RSS, Tagi, Kalendarz.

Poza tym pozostałe pliki są dość oczywiste. Teraz przejdźmy do kodu. Najpierw przyjrzymy się dwóm kluczowym plikom w motywie.

"Index.hbs" i "post.hbs"

Jeśli chodzi o projekty, najpierw podaję całą zawartość pliku, a potem podzielimy ważne fragmenty. Przede wszystkim plik "index.hbs":

{{!< default}}{{> header}}
{{#foreach posts}}
{{autor}}
  {{format daty = "DD MMM RRRR"}} 
  {{excerpt words = "100"}} ... Czytaj więcej
  {{/ foreach}} {{# if pagination}} 
  {{{paginacja}}} 
  {{/gdyby}} 
 {{> footer}} 

So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}

{{!< default}}

So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}

{{> header}}

So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}

So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}

{{#foreach posts}}

So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}} So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}

So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}