Odpicuj mi forum - cz. 4 - Wykorzystanie i modifikowanie gotowców

Ta część poradnika jest zupełnie przykładowa. Tak naprawdę ten etap wygląda różnie w zależności od wybranej biblioteki jQuery, którą mamy zamiar umieścić na swoim forum. Podkreślam więc jeszcze raz, że opisany poniżej sposób dotyczy stricte naszego przykładu jakim jest slick-carousel.

Nie oznacza to jednak, że każdy gotowiec jaki chcemy zastosować ma od razu nie wiadomo jakie wymogi odnośnie wykorzystania i edycji. Nie, z reguły wykonywane operacje będą bardzo podobne, lecz nie zawsze identyczne.

Zacznę może od elementu wspólnego wykorzystania i edycji gotowców na naszym forum. Mianowicie są to dobre praktyki. Pokażę jak można organizować sobie strukturę plików, aby się w tym wszystkim nie pogubić i zachować kontrolę. Prezentuję tu typowo subiektywne podejście, które uważam za słuszne (lecz nie za jedyne słuszne, a to różnica).

Dobrym pomysłem jest rozdzielenie trzech "warstw", z których składa się nasze forum, a co za tym idzie nasze gotowce:

  1. HTML – tutaj właściwie robota jest zrobiona za nas, bo pliki .html już istnieją i są fajnie podzielone i nazwane. Edytujemy więc sobie te pliki .html nie przejmując się zbytnio.
  2. CSS – arkusze stylów, odpowiadające za wygląd. Ja je po prostu umieszczam w stworzonym przeze mnie katalogu css.
  3. Javascript/jQuery – nasze skrypty, odpowiadające za logikę czyli to co się będzie wykonywać. Ja je po prostu umieszczam w stworzonym przeze mnie katalogu js.


Dodatkowo w ramach tych utworzonych katalogów dla css i js tworzę podkatalogi dla każdego używanego gotowca. I tak w katalogu css tworzę katalog slick_carousel, jak i w katalogu js tworzę katalog slick_carousel i dopiero w tych podrzędnych katalogach wrzucam moje nowe pliki z edycjami gotowca, to znaczy odpowiednio pliki my_slick_carousel.css oraz my_slick.carousel.js. Jest to uzasadnione faktem, że w ramach jednego gotowca możemy chcieć mieć kilka plików go edytujących, np. css od wyglądu na komputery, css od wyglądu na telefony. Jeszcze raz podkreślam, że wszystkie te nazwy są przykładowe i w żaden sposób nie oznaczają, że musicie stosować takie same – to wasze forum.

Całą tę sytuację obrazuje poniższy zrzut ekranu z programu FileZilla:

Obrazek

To podejście pozwala nam w łatwy i szybki sposób kontrolować i odseparować od siebie pliki. Dzięki temu jak chcemy dodawać kolejne gotowce to wystarczy, że będziemy tworzyli nowe katalogi dla każdego gotowca w folderach css i js (o ile będzie taka potrzeba, możliwe, że dodanie i skonfigurowanie gotowca obejdzie się bez dodawania własnych plików .css czy .js).

Dobra, mamy już przygotowaną strukturę, użyjmy wreszcie tego slidera. Na potrzeby tego konkretnego przypadku interesują nas 3 pliki:

  • overall_header.html – bo akurat tutaj postanowiłem slider umieścić – tutaj jest też zawartość naszego slidera. Ta konkretna biblioteka pozwala na dowolną zawartość, mogą to być obrazki, tekst, animacje czy cokolwiek.
  • my_slick_slider.js – tutaj zamieszczamy inicjalizację i opcje slidera. Z reguły trzeba będzie dodać plik .js aby skorzystać z gotowca.
  • my_slick_slider.css – tutaj zamieszczamy nasze zmiany w wyglądzie slidera. Ten krok jest opcjonalny, czasem domyślny wygląd nas będzie zadowalał albo w ogóle gotowiec nie będzie dotyczył wyglądu forum.


Aby wszystko działało, w overall_header.html między znacznikami <head></head> musimy dodać linijki do naszych plików .js i .css (żeby móc z nich korzystać oczywiście). Doklejamy więc te linijki:

<!-- INCLUDEJS js/slick_carousel/my_slick_carousel.js -->
<url rel="stylesheet" type="text/css" href="./styles/prosilver/template/css/slick_carousel/my_slick_carousel.css"/>


W phpBB3.1 pliki .js dołączamy przez specjalną dyrektywę <!-- INCLUDEJS <względna ścieżka do pliku .js> --> (jak w przykładzie). Należy tutaj zastosować dołączenie pliku .js zgodne ze swoim silnikiem forum, albo zwykłe dołączenie przez <script> (wtedy tylko trzeba pamiętać, żeby umieścić to ręcznie w stopce strony, poniżej html-a, który chcemy edytować). Przykładowo:

<script src="./styles/prosilver/template/js/slick_carousel/my_slick_carousel.js"></script>

Jest to po to, aby nasz js-owy skrypt dodał się w stopce strony, a nie gdzieś tam. Przez umieszczenie go w stopce praktycznie gwarantujemy (o ile nie wstawiamy gotowca do stopki, wtedy może się teoretycznie popsuć, ale nie powinno), że nasz kod .js będzie PONIŻEJ kodu html. A to znaczy, że będzie mógł się do niego odnosić (czyli krótko mówiąc, będzie mógł coś na naszym html-u zdziałać). Ścieżka jest względem katalogu aktualnego /template, a więc całkiem zgrabnie.

Pliki .css dołączamy zwyczajnie (czyli tak samo jak już dołączaliśmy .css z Internetu), ale niestety trzeba (CHYBA, jak ktoś umie niech mnie poprawi) podawać pełną scieżkę, czyli z wszystkimi katalogami aż od startu.

No, mamy już pliki i są ze sobą połączone, teraz tylko je powypełniać stosowną treścią. Zaczniemy od edycji naszego pliku .html. Dodajemy gdzie chcemy umieścić slider takie oto linie kodu (w moim przypadku każdy slajd to po prostu jedna cyfra) a dodałem to w linii 122 pliku overall_header.html:

overall_header.html:

<div>
     <div><h3>1</h3></div>
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
     <div><h3>5</h3></div>
     <div><h3>6</h3></div>
</div>

Zawartość slidera może być dowolna (obrazki, gify, mieszane etc.), nazwy klas na divie nadrzędnym też mogą być dowolne. Ważne, żeby były takie same jak wykorzystamy w plikach .js i .css, bo inaczej nie ma prawa działać. Oczywistym jest też, że wszystkie pliki i zmiany w istniejących plikach wrzucamy na serwer przez FTP. Po wykonaniu powyższych kroków u mnie wygląda to tak:

Obrazek

Na razie nie wygląda zbyt imponująco. Dodaliśmy naszą treść, ale nic się nie dzieje. Jest to spowodowane faktem, że jeszcze nie użyliśmy naszego gotowca. Dodaliśmy go – tak, dodaliśmy nasze pliki na wykorzystanie i modyfikację (my_slick_carousel.js), ale jest on pusty. Uzupełniamy go na przykład tak:

my_slick_carousel.js:

$('.autoplay').slick({
     slidesToShow: 3,
     slidesToScroll: 1,
     autoplay: true,
     autoplaySpeed: 2000,
});

Wziąłem to żywcem ze stronki z gotowcem (http://kenwheeler.github.io/slick/), a nazwy mówią same za siebie. Jak widzicie, biblioteki są często tak przyjazne, że nawet nie trzeba się znać samemu na programowaniu w javascript czy w jQuery (chociaż to z pewnością nie zaszkodzi). Jak widać w przykładzie ustawiliśmy, żeby pokazywały się 3 slajdy, przewijały się o 1 w sposób automatyczny i co 2000ms (czyli co 2 sekundy). Zwracam uwagę na selektor o wartości '.autoplay'. Jak widać, jest to wartość klasy, którą umieściliśmy na naszym <div> w html. Możecie to nazwać jak Wam się podoba, byleby we wszystkich powiązanych plikach konsekwentnie.

Po uzupełnieniu pliku .js i wrzuceniu go na serwer u mnie wygląda to tak:

Obrazek

I jak widać (a raczej byłoby widać na animacji) działa. Super i to tyle. W tym konkretnym przypadku wystarczyło wywołać metodę .slick() z wybranymi przez nas parametrami i nasz slider nabrał życia. Ale nie musimy na tym poprzestać, możemy go bowiem edytować do woli, ile tylko dusza zapragnie. Żeby nie przedłużać przesadnie poradnika pokażę więc jak edytować wygląd naszego slidera przy użyciu css, a konkretnie w naszym pliku my_slick_carousel.css. Uzupełniamy go na przykład tak:

my_slick_carousel.css:

.slider{
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}

.slick-prev:before, .slick-next:before {
    background:#3498db !important;
}

Css dla klasy slider skopiowałem ze stronki z gotowcem (żeby jako tako wyglądała). Natomiast warto zwrócić uwagę na drugi blok kodu, gdzie zmieniłem tło pod strzałkami slidera na niebieskie. W ten banalnie prosty sposób możemy modyfikować gotowce. Po raz kolejny nie pozostaje mi nic innego, jak odesłać do doskonałego poradnika http://www.w3schools.com/css/, który w bardzo przystępny sposób wprowadzi was w tajniki css i wtedy powyższe zapisy staną się klarowne (chociaż i bez tego pewnie można się domyślać, co oznacza atrybut 'background').

Efekt końcowy wygląda tak (pomijając fakt, że tu się nie przesuwa):

Obrazek

A także można go oglądać na moim forum testowym, na którym to krok po kroku realizowałem ten tutorial: http://tutorialjquery.cba.pl/

I to już wszystko. W analogiczny sposób możesz dodawać i dostosowywać dowolne, publicznie udostępnione i darmowe gotowce na swoje forum do woli. Ostatecznie usunęliśmy 1 plik (od jQuery, wystarczy to zrobić tylko 1 raz, więc nie ma problemu), dodaliśmy w 1 linii swoje jQuery, dodaliśmy 3 linijki do biblioteki z cdnjs i dodaliśmy de facto 1 linijkę z inicjalizacją slidera (w my_slick_slider.js). I to TYLE, jakby zrobić to wszystko w 1 pliku wystarczy 5 linijek, żeby dodać takiego rozbudowanego gotowca (+ jakieś linijki z danymi, ale to już nie jest kwestia samego użycia biblioteki). Każda następna biblioteka nie wymaga już zabawy z jQuery więc wystarczy wziąć z cdnjs 2/3 urli (o .js i .css + opcjonalny .css z tematem przewodnim) i cieszyć się bajeranckimi dodatkami na forum.

Na zakończenie jeszcze wrzucam link z moim finalnym katalogiem styles/prosilver/template (do którego de facto sprowadzają się wszystkie zmiany nie licząc jednorazowego usunięcia wbudowanego jQuery), jakby ktoś się pogubił w opisie i chciał popatrzeć jak to dokładnie powinno wyglądać (można go nawet na żywca skopiować, po uprzednim usunięciu wbudowanego jQuery z assets/javascript i powinien działać): http://www.filedropper.com/styles_2

Luxter

Additional Info

  • Data publikacji: Środa, 24 Sierpień 2016

Komentarze

  • Brak komentarzy
Dodaj komentarz