Blog

Ghost CMS: Podstawy Tworzenia Własnego Tematu. Odsłona Trzecia.

Ostatnia część tutoriala, w którym staram się przedstawić zasady rządzące budową własnego tematu dla Ghost CMS.

Ghost CMS: Podstawy Tworzenia Własnego Tematu. Odsłona Trzecia.

Dzisiejszy post zamyka cykl wpisów na temat Ghost CMS, choć zapewne w przyszłości będzie jeszcze okazja wrócić do tego rozwiązania. Tym bardziej, że już teraz mam przynajmniej dwa pomysły na teksty zawierająca zagadnienia, które w tym kontekście warto byłoby omówić. Niestety seria, która dzisiaj dobiega końca, od samego początku była pomyślana jako wprowadzenie do Ghosta i szczerze powiedziawszy nie spodziewałem się, że rozrośnie się do takich rozmiarów. Mam jednak nadzieję, że dzisiaj będzie krócej i bardziej treściwie niż mam to w zwyczaju, tym bardziej, że obecnie szykuję się do odpalenia kolejnego bloga opartego właśnie o tego CMS-a, więc czasu mam wciąż za mało, a plany podbicia polskiego Internetu stają się coraz ambitniejsze.


Dzisiaj de facto skupimy się li tylko i wyłącznie na przygotowaniu szablonu do prezentacji treści pojedynczego bloga. Tym niemniej zanim przejdziemy do odpowiedniej edycji wcześniej przygotowanego pliku post.hbs musimy poczynić dodatkowe przygotowania, co w pewnym sensie zostało zasygnalizowane w poprzednim wpisie. Otóż by możliwe było wyświetlenie w sposób prawidłowy treści naszego blogowego wpisu, musimy załadować pliki zawierające kod CSS i JS, jakie dostarcza domyślny motyw dla Ghost. Wynika to z faktu, że tag “content” dostępny dla kontekstu “post” (lista tych znaczników omówiona był w poprzednim wpisie), który używać będziemy do wyświetlania treści wpisów, zwraca zawsze odpowiednio spreparowany kod HTML, który odwołuje się do odpowiednich klas CSS. Jeśli tych ostatniej nie załadujemy do naszego projektu, to zupełnie rozjedzie się nam formatowanie strony, no chyba że nas wpis zawiera wyłącznie tekst bez grafiki czy innych udziwnień.

W związku z tym do katalogu assets w naszym projekcienależy skopiować zawartość tego samego folderu z tematu/motywu Casper. Oczywiście następnie pozostaje jeszcze wskazać w naszym nadrzędnym szablonie (plik default.hbs) odpowiednie odwołanie do tej nowej zawartości. Całość powinna wyglądać tak:

<!DOCTYPE html>
<html lang="{{@site.lang}}">
 
<head>
 
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="description" content="">
 <meta name="author" content="">
 
 <title>{{@site.title}}</title>
 
 <link href="{{asset "vendor/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
 <link href="{{asset "vendor/fontawesome-free/css/all.min.css"}}" rel="stylesheet" type="text/css">
 <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
 <link href="{{asset "css/clean-blog.min.css"}}" rel="stylesheet">
 <link href="{{asset "built/screen.css"}}" rel="stylesheet">
 
</head>
 
<body class="{{body_class}}">
 
 {{navigation}}
 
 {{{body}}}
 
 {{>footer}}
  <script src="{{asset "vendor/jquery/jquery.min.js"}}"></script>
 <script src="{{asset "vendor/bootstrap/js/bootstrap.bundle.min.js"}}"></script>
 <script src="{{asset "js/clean-blog.min.js"}}"></script>
 <script src="{{asset "/build/js/bundle.js"}}"></script>
 
</body>
 
</html>

W tym momencie pozostaje już nam jedynie zabrać się za szablon stanowiący widok dla pojedynczego wpisu. W dużej mierze będzie to powtórka tego co dotychczas robiliśmy w przypadku pliku index.hbs, bo nawet header dorzucimy ten sam. W tym zafiksowaniu się na strategii kopiuj/wklej pójdziemy nawet dalej, ponieważ zawartość między znacznikami “post” pożyczymy z dokumentacji Ghosta nieco ją podrasowując poprzez wrzucenie całości w kontener oraz wyśrodkowanie część zawartości. 

{{!< default}}
 
<!-- Page Header -->
 <header class="masthead" style="background-image: url('{{asset 'img/home-bg.jpg'}}')">
   <div class="overlay"></div>
   <div class="container">
     <div class="row">
       <div class="col-lg-8 col-md-10 mx-auto">
         <div class="site-heading">
           <h1>Clean Blog</h1>
           <span class="subheading">A Blog Theme by Start Bootstrap</span>
         </div>
       </div>
     </div>
   </div>
 </header>
{{#post}}
 
<main class="container" role="main">
   <article class="{{post_class}}">
 
       <header class="post-header">
           <h1 class="post-title text-center display-2">{{title}}</h1>
           <section class="post-meta text-center text-muted">
               by {{authors}} on <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
           </section>
       </header>
 
       <section class="post-full-content">
               <div class="post-content">
                   {{content}}
               </div>
       </section>
 
   </article>
</main>
 
{{/post}}

Oczywiście zachęcam wszystkich do eksperymentowania z dostosowywaniem wyglądu tej strony do własnych potrzeb, choćby przy użyciu arkusza stylów Bootstrapa. Tym niemniej uczulam przed zbytnią dowolnością, ponieważ niektóre tagi (jak w przypadku {{content}} ma to miejsce) mogą zwracać odpowiednio “przystrojony” kod HTML i wówczas efekt może być daleki od naszych oczekiwań. Niestety nie udało mi się namierzyć w dokumentacji dla Ghost, gdzie kwestie arkuszy stylów użytego w tym CMS były jakoś szerzej lub chociaż trochę opisane. Jedyny wpis, który coś o tym wspominał był z 2014 i co gorsza odwoływał się do nieistniejącej obecnie podstrony.

To właściwie byłoby na tyle, jeśli chodzi o moją skromną osobę, a bardziej wpisy mojego autorstwa na temat Ghosta. Tak jak wyżej wspominałem moją ambicją nie było omówienie wszystkiego, co wiąże się z personalizacją naszego wymarzonego bloga zbudowanego na bazie tego CMS. Od tego wszak jest dokumentacja – w przypadku Ghost trzeba przyznać, że nie najgorsza, choć ja przed momentem wskazałem nie bez ewidentnych braków (z mojej perspektywy rzecz jasna). Gdyby mimo wszystko była pilna potrzeba uzupełnienia informacji w jakimś zakresie, to zawsze możecie mi dać znać, pisząc maila czy chociażby zostawiając komentarz pod tym czy innym wpisem.