Mybb Template Editor - edycja stylów i szablonów w Sublime Text 3

1 Wstęp

Jeśli tworzyłeś lub edytowałeś dowolny styl MyBB, napotkałeś się pewnie z paroma irytującymi przeszkodami, mam rację? Pierwsza z nich to wbudowany edytor do edycji arkuszy i szablonów, powiedzmy sobie szczerze - o ile w wersji 1.8 edytor uległ zdecydowanej poprawie w stosunku do tego z wersji 1.6, o tyle nadal jest to nieprzyjemne na dłuższą metę narzędzie. 
Druga sprawa to zapisywanie szablonów i arkuszy do bazy danych zamiast na serwerze. Ma to swoje oczywiste plusy i minusy, jednak fakt, że uniemożliwia to skorzystanie z desktopowych edytorów i edycję plików bezpośrednio na serwerze mocno utrudnia sprawę. 
Na szczęście, lekarstw na te dolegliwości nie brakuje, a jednym z nich jest ciekawa wtyczka o wdzięcznej nazwie Mybb Template Editor. 
W poradniku przedstawiona jest obsługa wtyczki w oparciu o Sublime Text 3 i serwer lokalny. 

Wiele elementów zostanie podlinkowanych do źródeł, gdzie znajduje się pełny i dokładny opis instalacji poszczególnych komponentów. Koło zostało już wynalezione i chciałbym, by tak zostało. 

2 Wymagania

• Serwer lokalny (localhost)
  
• Sublime Text 3
  
• Zainstalowane forum MyBB i dostęp do bazy danych
  
• Sublime Text 3 Package Control - opcjonalnie
  
• MyBB Template Editor
  
• Umiejętność posługiwania się wyszukiwarką
  

3 Sublime Text 3 & MyBB Template Editor

Wtyczka, o której mowa bynajmniej nie jest wtyczką do skryptu MyBB, zamiast tego jest to plugin do popularnego edytora tekstowego Sublime Text 3. Dodatek łączy się z bazą danych naszego forum i pobiera z niej listę szablonów i skórek, a następnie wysyła zmienione pliki z powrotem do bazy. 

Zakładam, że masz już zainstalowany edytor Sublime Text 3, jeśli nie - zrób to teraz. Następnie czas zainstalować naszą wtyczkę, co można zrobić na dwa sposoby: manualnie i automatycznie. Jako że lubię ułatwiać sobie życie, gdy jest to możliwe, skorzystam z instalacji automatycznej za pomocą innego dodatku - Package Control. Na podlinkowanej stronie znajdziecie pełny opis instalacji tejże wtyczki. 

Do Package Control wchodzimy za pomocą konsoli (ctrl + shift + p), gdzie wpisujemy package control instal.

Potwierdzamy klawiszem Enter. Teraz nastąpi załadowanie dostępnych paczek, co może chwilę potrwać. Następnie wpisujemy nazwę naszej wtyczki. 

Raz jeszcze potwierdzamy akcję i czekamy na zakończenie instalacji. 

Gratuluje, wtyczka została zainstalowana. 

4 Konfiguracja Mybb Template Editor

Przyszedł czas na etap właściwy, tj. konfigurację wtyczki tak, aby obsługiwała ona nasze forum. W Sublime Text 3 przechodzimy do Preferences -> Package Settings -> Settings User. W moim przypadku gotowa treść wygląda tak:

{
"css_set": "3",
"css_update_url": "http://localhost/mybb/updatecss.php",
"dbname": "mybb",
"dbport": 3306,
"default_path": "/mybbTemp",
"encoding": "utf8",
"host": "localhost",
"mybb_version": "1870",
"mysql_executable": "G:/xampp/mysql/bin/mysql.exe",
"passwd": "",
"table_prefix": "mybb_",
"tpl_set": "2",
"user": "root"
}

Pola typu dbname, host, table_prefix, user, passwd prawdopodobnie i w twoim wypadku są takie jak u mnie, jeśli stosowałeś się do tego poradnika, w przeciwnym razie musisz sam dojść do tego, jakie są dane do Twojej bazy danych - bez tego plugin nie zadziała. 

Na szczególną uwagę zasługują dwie linie:

"css_update_url": "http://localhost/mybb/updatecss.php",

Odpowiada za pobieranie i zapisywanie arkuszy CSS naszego stylu. Należy pobrać plik updatecss.php i wkleić go do dowolnego folderu na naszym serwerze. Ważne, by ścieżka do pliku się zgadzała.

"mysql_executable": "D:/xampp/mysql/bin/mysql.exe",

Pełna ścieżka do pliku mysql.exe. Upewnij się, że jest ona poprawna.

5 Tworzenie arkuszy i szablonów przez ACP

Zbliżamy się do końca poradnika, teoretycznie wtyczka już działa i możemy edytować pliki przez Sublime Text 3, jednak warto przed tym dodać nową paczkę ze stylem w ACP i pracować na niej. 

Najpierw przechodzimy do zakładki z szablonami i dodajemy nowy zbiór szablonów tak jak na zrzucie poniżej:

Następnie przechodzimy do zakładki Themes (Style) i tworzymy nowy styl.

Nowy styl został utworzony, teraz pozostaje już tylko połączyć go z odpowiednimi szablonami. Wchodzimy w nasz nowo utworzony styl i w polach Edytuj właściwości stylu szukamy pola Template Set, w którym wybieramy nasz wcześniej utworzony zbiór szablonów. 

Nowe style przed ich modyfikacją domyślnie dziedziczą z Mybb Master Style. Jeśli spróbujemy dobrać się do arkuszy stylu w Sublime Text 3 prawdopodobnie nie zdołamy tego uczynić. W tym celu warto ze edytować dowolny arkusz nowego stylu. W rezultacie arkusze się przekopiują i skończymy z dziedziczeniem. 

6 Edycja w Sublime Text 3

Jeśli wszystko zrobiliśmy poprawnie powinniśmy już być w stanie korzystać ze wtyczki. 

W edytorze ponownie otwieramy konsolę klawiszami Ctrl + Shift + P i wpisujemy "mybb". 

 

Wybranie dowolnej opcji spowoduje otwarcie podobnego okienka, tym razem z listą dostępnych stylów. Wybieramy utworzony wcześniej styl i potwierdzamy akcję. Kolejne komunikaty potwierdzamy i w efekcie widzimy listę naszych szablonów bądź arkuszy. 
Na początku możemy poczuć się trochę oszukani, jako, że całość jest biała - nie ma kolorowania składni. Zaradzimy temu poprzez otworzenie dowolnego szablonu i w menu programu wybranie domyślnego kolorowania dla tego typu pliku. 

W przypadku arkuszy .css powtarzamy akcję, tym razem wybierając CSS zamiast HTML. 
Gotowe! Dowolna zmiana i zapisanie pliku spowoduje natychmiastową akcję na naszym forum.

7 Instalacja i obsługa wtyczki w wersji video (ang)

[video=youtube]https://www.youtube.com/watch?v=HlUxKx8A-Xk [/video]