Wyszukiwarka - rzecz niezbędna
WordPress jako system blogowy/CMS posiadał wbudowana wyszukiwarkę dla zawartości strony po stronie klienta. W Ghost posiadamy jedynie wyszukiwarkę po stronie back-endu czyli dla administratorów i autorów. Mając jednak bardziej obszerny blog warto taką funkcjonalność posiadać tez na froncie dla użytkowników szukających jakiejś treści. Na szczęście wyszukiwarkę możemy dodać na własną rękę i nie jest to trudne.
Rozwiązanie problemu
Na sam początek potrzebujemy bibliotekę jquery.ghostHunter.min.js, którą można pobrać tutaj:
Podpinamy do default.hbs skrypt:
<script src="js/jquery.ghostHunter.min.js"></script>
Następnie dodajemy pole wyszukiwania. Ja dodałem go akurat do panelu bocznego:
<div class="szukaj">
<form>
<input type="text" id="search-field">
<input type="submit" id="szukaj" value="szukaj">
</form>
</div>
Teraz musimy dodać miejsce gdzie będą wyświetlane wyniki. Ja dodałem akurat nad listą postów:
<section id="results"></section>
Dodajemy do pliku .js skrypt odpowiedzialny za wyszukiwanie. W poniższym przykładzie mamy użyty własny szablon wyników jako tytuł do artykułu jako link. Możemy oczywiście dać tam też datę lub autora korzystając z Public API.
// Skrypt do wyszukiwarki
$("#search-field").ghostHunter({
results : "#results",
result_template : "<a href='{{link}}'><h3>{{title}}</h3></a>"
});
Teraz pozostaje nam ostylowanie elementów w CSS3, żeby wyglądem pasowały do naszej strony. Jako że u mnie panel wyszukiwania znajduje się w panelu bocznym warto zadbać o to by po kliknięciu w wyszukaj automatycznie się zamykał.
jQuery('#szukaj').click(function(){
closeDrawer();
});
Oczywiście musimy jeszcze zdefiniować co ma robić funkcja/zmienna closeDrawer() i co ma zamykać. Jest to jednak fajny dodatek.
Uwaga !! Należy pamiętać aby Public API było włączone, gdyż inaczej wyszukiwarka zawsze zwróci nam wynik "0" !!
Podsumowanie
Tym oto prostym sposobem udało nam w kilku dość prostych krokach dodać w pełni funkcjonalną wyszukiwarkę po stronie klienta. Taki dodatek będzie na pewno świetnym uzupełnieniem każdego bloga opartego o system Ghost. Mam nadzieję, że porada przyda się niejednemu z was.
