Blog

Ghost CMS: poprawiamy nasz blog

Ostatnie szlify naszego bloga budowanego na bazie Ghost CMS.

Ghost CMS: poprawiamy nasz blog

Swego czasu obiecałem, że jeszcze jakieś wpisy na temat Ghosta pojawią się z całą pewnością na moim blogu. Jako że sposobię się do cyklu wpisów na temat używania Office Scripts pomyślałem, że to dobry moment na taki przerywnik. Tym bardziej, że zanim poświęcę się wspomnianej tematyce, chcę wreszcie pożegnać się z WordPressem i tym samym czeka mnie migracja na Ghosta właśnie, choć od wielu tygodni jakoś nie potrafię się do niej zebrać, ponieważ – jak już wspominałem niedawno – mój zapał do zagadnień związanych z tworzeniem stron czy aplikacji internetowych znacząco osłabł, na co nałożyła się wzbierająca w siłę niechęć do JavaScript za sprawą pewnych “dziwactw” dla niego charakterystycznych takich jak chociażby mimowolna koercja typów, swobodne podejście do sprawdzania liczby argumentów podanych przy wywołaniu funkcji czy wreszcie “twórcze” podejście do obiektowości. Oczywiście można zaradzić jako większości tych problemów w ramach narzędzi dostępnych dla samego JS, ale chyba nie o to chodzi.

Wracając jednak do meritum, czyli sposobów na usprawnienia naszego bloga, dzisiejszy tekst poświęcony zostanie dwóm zagadnieniom, czyli dodania możliwości komentowania popisów na naszym blogu oraz utworzenie nawigacji, która pozwoli nam na poruszanie się po liście naszych wpisów.

Dodanie możliwości komentowania (Disqus)

Twórcy Ghosta nie dodali o dziwo tej fundamentalnej – zdawałoby się – opcji do własnej platformy blogowej, więc użytkownik musi o to sam zadbać. Oczywiście staje on wówczas przed wyborem docelowego rozwiązania: z jednej strony może zaimplementować – o ile potrafi – własny mechanizm oparty na bazie danych albo skorzystać z gotowych rozwiązań takich jak chociażby Disqus właśnie. Ja osobiście tworząc bloga z moją pociechą podążyłem właśnie tą drugą ścieżką.

Całość jest banalnie prosta i sprowadza się do dodania krótkiego kodu JS w pliku post.hbs. Z resztą autorzy Ghost starają się nawet tutaj odrobinę pomóc, ponieważ wskazują miejsce, gdzie ten fragment kodu należy umieścić.

<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = "{{url absolute="true"}}"
        this.page.identifier = "ghost-{{comment_id}}"
    };
    (function() {
    var d = document, s = d.createElement('script')
    s.src = 'https://EXAMPLE.disqus.com/embed.js'
    s.setAttribute('data-timestamp', +new Date())
    (d.head || d.body).appendChild(s);
    })();
</script>

Jedyne co musimy zmienić to podać skróconą nazwę naszej strony na potrzeby obsługi przez Disques w tej linijce:

s.src = 'https://EXAMPLE.disqus.com/embed.js';

Tę wartość wstawiamy w miejsce “EXAMPLE”. By wygenerować tę nazwę musimy założyć odpowiednie konto na Disqus, które na nasze szczęście jest bezpłatne. Tym niemniej później już trzeba się zdecydować, czy chcemy ponosić odpowiednie koszta związane z utrzymywaniem tego rozwiązania na naszej stronie, czy zamiast tego pozwolić Disqus monetyzować popularność naszego bloga poprzez wyświetlanie dla naszych odwiedzających reklam w sekcji komentarzy. 

Opcja stronicowania wpisów

Jak może pamiętacie z jednego z moich pierwszych wpisów o Ghost, w konfiguracji naszego tematu (plik package.json)  wskazujemy liczbę postów, które mają się wyświetlać się na jednej stronie. Domyślnie jest tam wstawiona liczba 25, czyli całkiem sporo, choć oczywiście wiele zależy od sposobu prezentacji i ułożenia tego zestawienia. W przypadku bloga nudziarze-dwa.pl zdecydowałem się zmniejszyć tę liczbę do 5-ciu. Niestety wówczas pozostaje problem nawigacji pomiędzy stronami zawierającymi listę kolejnych 5 wpisów. W tym celu należy dodać odpowiedni mechanizm w pliku index.hbs. Na szczęście twórcy Ghost wspierają nas w tym zakresie przygotowując odpowiednie rozwiązanie. W przypadku wspomnianego wcześniej blogu wygląda on jak niżej (za moment napiszę więcej na ten temat). W moim przypadku wyrzuciłem go do oddzielnego komponentu (katalog partials) o nazwie pagination.hbs. Sugerowałbym właśnie w ten sposób postępować, by uniknąć przykrych niespodzianek z niedziałającym stronicowaniem. Wówczas wystarczy wywołać ten komponent w odpowiednim miejscu kodu dla pliku index.hbs poprzez użycie {{pagination}}.

<div class="col text-center">
   <nav>
       <ul class="pagination">
           {{#if prev}}
           <li class="page-item">
               <a class="page-link" href="{{page_url prev}}">Poprzedni</a>
           </li>
           <li class="page-item"><a class="page-link" href="{{page_url prev}}">{{prev}}</a></li>
           {{/if}}
           <li class="page-item active" aria-current="page">
               <a class="page-link" href="{{page_url}}">{{page}}</a>
           </li>
           {{#if next}}
           <li class="page-item"><a class="page-link" href="{{page_url next}}">{{next}}</a></li>
           <li class="page-item">
               <a class="page-link" href="{{page_url next}}">Następny</a>
           </li>
           {{/if}}
       </ul>
   </nav>   
</div>

Kluczową wartością dla tego kodu jest page, która zwraca nam numer bieżącej strony, czyli wyznacza nam punkt wyjścia dla dalszych działań. Jeśli chodzi instrukcje warunkowe, które występują przed i za nią nie są on konieczne, ale z drugiej strony po co renderować pola nie posiadające wartości lub sugerować akcję (tutaj pola “Poprzedni” oraz “Następny”), które do niczego nie prowadzą. Dlatego  ten warunek sprawdza, czy dla strony, na której obecnie się znajdujemy jest jeszcze jakaś poprzedzająca (pierwszy warunek #if prev) albo następna z kolei (drugi warunek #if next).

Czymże jest owe next i prev? Otóż są to numery stron, które odpowiednio następują po tej, na której się znajdujemy, albo ją poprzedzają. Jeśli jesteśmy na pierwszej stronie, wówczas rzecz jasna nie zostanie nam zwrócona żadna wartość i tak samo będzie się działo w sytuacji, gdy jesteśmy na ostatniej stronie z wpisami blogowymi.

Użycie tagu {{page_url}} pozwala zaś na prost nawigowanie między stronami. Jeśli dodamy do niego wartość next (czyli {{page_url next}}) to zwrócony nam zostanie adres strony z kolejnymi wpisami (o ile rzecz jasna jest taka strona, czyli nie jesteśmy na ostatniej). Tak samo ma się sprawa z {{page_url prev}}.