Tworzymy stronę z blogiem cz. 1

Potężna platforma blogowa Movable Type powraca ze zmienionymi modułami szablonów, własnymi stylami oraz ulepszonym panelem administracyjnym.

Co budujemy? Movable Type to potężna aplikacja, hybryda PHP i CGI, najbardziej znana ze swojej mocy publikowania blogów. Zaczniemy od instalacji oprogramowania, następnie utworzymy nowy motyw dla bloga na bazie pakietu stylów, które są dostarczane wraz z aplikacją. W efekcie otrzymamy profesjonalnie wyglądającą stronę, gotową, by zacząć życie.

Movable Type, gdzie byłeś? Kiedyś platforma do publikowania była ulubionym narzędziem prawdziwych miłośników formy, jednak zniknęła z blogosfery wraz z pojawieniem się wersji 3. Stało się tak, gdy Six Apart, ludzie stojący za pakietem zmienili system udzielenia licencji i trzeba było płacić, gdy publikowaliśmy wiele blogów. Po proteście fanów ograniczenia usunięto, jednak szkoda została wyrządzona. Konkurencyjna platforma WordPress przejęła palmę pierwszeństwa kosztem Movable Type.

Ale oto MT wraca! Wersja 4 jest bezpłatna do osobistego użytku, można w niej tworzyć wiele blogów, interfejs całkowicie przebudowano, a system szablonów opracowano w formie modułów. Z Movable Type pracuje się tak prosto, jak z Bloggerem, jednak jej możliwości są tak potężne jak WordPressa z wbudowanym wsparciem dla modułowych przekształceń szablonów, obsługą wielu użytkowników i zarządzaniem wpisami.

Zanim pokażę, jak przystosować platformę do naszych wymagań i utworzyć styl Movable Type, zmieniając wygląd i layout stron z naszym blogiem, przedstawię kilka sztuczek przydatnych w trakcie instalacji.

ZASOBY ONLINE

Movable Tweak http://movabletweak.com Gotowy? Zajrzyjmy na tę stronę w poszukiwaniu sztuczek i porad, jak przystosować stronę do naszych potrzeb.

Oficjalny serwis http://movabletype.com Strona główna Movable Type. Kompletna, zawierająca najnowsze dostępne pliki do pobrania.

{tlo_1}

KROK 1: wypakowujemy MT

Movable Type nie jest najprostszym skryptem do instalacji, ale starałem się uprościć ten proces tak, jak to tylko możliwe. Zaczniemy od wypakowania Movable Type z archiwum zip (mt401-en.zip) na komputer.

{/tlo}

{tlo_0}

KROK 2: ustawienia folderów

Po rozpakowaniu mamy folder o nazwiemt401-en oraz podfolder o tej samej nazwie. Otwieramy go. Łączymy się z naszym serwerem za pomocą FTP-a i odnajdujemy folder skryptów CGI (zazwyczaj jest to cgi-bin). Tworzymy w nim nowy folder i nazywamy gomt. Wgrywamy do niego wszystko, oprócz mt-static.

{/tlo}

{tlo_1}

KROK 3: FTP-em na nasz serwer

Gdy wszystko jest już gotowe (przesyłanie plików może potrwać chwilę), za pomocą FTP-a przesyłamy foldermt-static do głównego katalogu dokumentów na naszym serwerze. Obok niego tworzymy następny nowy folder o nazwie content. Ustawiamy dla niego uprawnienia na 777.

{/tlo}{tlo_1}

KROK 4: przyznanie uprawnień

Upewnijmy się, że wszystkie pliki w katalogu cgi-bin/mt/ kończące się .cgi mogą uruchamiać wszyscy (których uprawnienia ustawiono na 755).W większości klientów FTP, takich jak przedstawiona na zrzucie przykładowa FileZilla, możemy zaznaczyć wiele plików jednocześnie, kliknąć je prawym klawiszem myszy i za jednym zamachem przyznać uprawniania wszystkim.

{/tlo}

{tlo_0}

KROK 5: gotowe do instalacji

W naszej przeglądarce nawigujemy do folderu mt. Adres powinien przypominać http://www.naszadomena.com/cgi-bin/mt/mt.cgi. Po sprawdzeniu serwera, kreator instalacji przypomni o wprowadzeniu ustawień i połączeniu z bazą danych, w którym skorzystamy z danych, które zanotowaliśmy, zanim zaczęliśmy.

{/tlo}

{tlo_1}

KROK 6: szybkie podpowiedzi

Reszta powinna być prosta, jednak gdy dojdziemy do formularza Create Your First User, zauważymy, że URL bloga i ścieżka publikacji są tworzone automatycznie. Wyedytujmy katalog BLOG-NAME w tych ścieżkach, by odczytać folder content. To folder, który utworzyliśmy wcześniej.

{/tlo}

{tlo_0}

KROK 7: witamy w MT.

Wszystko poszło zgodnie z planem? Powinniśmy znajdować się teraz w dashboardzie Movable Type. To tutaj możemy konfigurować, podkręcać, wprowadzać blogi i zarządzać użytkownikami. Przechodzimy do Preferences → Blog Settings → General, gdzie wprowadzamy opisy naszych nowo utworzonych blogów..

{/tlo}

{tlo_1}

KROK 8: podgląd stylu domyślnego

Movable Type 4 zbudowano na mocniejszych fundamentach niż poprzednia wersja, z modułowym systemem szablonów i mnóstwem wbudowanych motywów. Przyjrzyjmy się domyślnemu motywowi klikając ikonę View Site. Nie jest zbyt zajmujący, jednak już wkrótce go zmienimy..

{/tlo}

{tlo_0}

KROK 9: zmieniamy projekt

Wracamy do panelu z narzędziami i wybieramy Design → Styles. Klikamy Default Styles i z okna podglądu wybieramy nowy motyw. Gdy już go wybierzemy, z rozwijanego menu Layout możemy wybrać typ layoutu. Aby zobaczyć zmiany, klikamy View Site..

{/tlo}

{tlo_1}

KROK 10: tworzymy własny styl

Wracamy do rozpakowanego archiwum Movable Type, które nadal znajduje się na naszym komputerze. Przechodzimy do mt-static/themes/, w którym znajdziemy wszystkie style dostarczane wraz z aplikacją. Wybieramy cityscape-paris. Przytrzymujemy klawisz Ctrl i przenosimy folder, aby uzyskać jego kopię.

{/tlo}

{tlo_0}

KROK 11: zaglądamy do środka

Zmieniamy nazwę tego folderu na Broken-English i otwieramy go. Niespodzianka! To zestaw obrazów o standardowych nazwach, powiązanych ze sobą za pomocą pliku CSS. Zajrzyjmy do jakiegokolwiek folderu stylu Movable Type, a ujrzymy ten sam zestaw nazw obrazów i ten sam plik CSS..

{/tlo}{tlo_1}

KROK 12: przygotowany wcześniej plik

Jeśli zamienimy te obrazy na własne, zostaną one wyświetlone w layoucie. Wcześniej utworzyłem zamiennik dla pliku header.png. Przeciągamy go na folder Broken-English, podmieniając stary plik header.png.

{/tlo}

{tlo_0}

KROK 13: dodatki Firefoksa

Teraz możemy pobawić się niektórymi elementami w pliku CSS. Uruchamiamy Firefoksa i instalujemy Web Developera (http://www.addons.mozilla.org/firefox/addon/60) oraz ColorZillę (http://www.iosar.com/firefox/colorzilla). Gdy rozszerzenia zostaną zainstalowane, przechodzimy do głównej strony naszego blogu..

{/tlo}

{tlo_1}

KROK 14: prosta edycja

Web Developer dodaje do Firefoksa narzędzia umożliwiające edycję plików CSS. Na pasku narzędziowymWeb Developera, który teraz powinien być widoczny w Firefoksie (lub stosujemy kombinację klawiszy Ctrl+Shift+E), przechodzimy do CSS → Edit CSS. Z okna informacyjnego wybieramy Display ID and Class Details..

{/tlo}

{tlo_0}

KROK 15: atak na CSS

Po lewej stronie powinno być okno tekstowe z zakładkowym edytorem tekstu, po prawej blog z oznaczonymi elementami bloku CSS. Klikamy zakładkę screen.css w celu edycji motywu CSS. Etykietki mówią nam, że nagłówki paska bocznego są stylizowane z wykorzystaniemklasy widget-header..

{/tlo}

{tlo_1}

KROK 16: wybieramy kolor

Przewijamy w dół w celu znalezienia wpisu widget-header w naszym dokumencie CSS. Jest ich obecnie kilka, jednak tylko w jednym został zdefiniowany kolor tła. Dwa razy klikamy ikonę ColorZilli znajdującą się w dolnym lewym rogu w przeglądarce i wybieramy główny kolor..

{/tlo}

{tlo_0}

KROK 17: zapisujemy zmiany

Wybrany kod szesnastkowy wklejamy w miejscu, gdzie znajduje się obecny atrybut, a strona aktualizuje się, by uwzględnić zmiany. W ten sposób możemy w layoucie zmieniać kolory, wygląd i rozmiary czcionek. Klikamy Save i zachowujemy lokalnie edytowany plik jako screen.css..

{/tlo}

{tlo_1}

KROK 18: przesyłamy motyw FTP-em

Wedytorze tekstowym otwieramy zapisany plik CSS i zmieniamy nazwę motywu na Broken English. Zapisujemy go w folderze Broken English, który wcześniej utworzyliśmy, zamieniając znajdujący się tam plik screen.css. Teraz za pomocą FTP-a przesyłamy cały folder /mt-static/themes/ na nasz serwer..

{/tlo}

{tlo_0}

KROK 19: stosujemy nasz styl

Opuszczamy dashboard Movable Type, a następnie wracamy do niego. Przechodzimy do Design → Styles, gdzie na liście Default Styles powinniśmy zobaczyć zmieniony przez nas styl. Wybieramy go i klikamy Apply Design, a następnie, gdy zostaniemy o to poproszeni, publikujmy ponownie blog. Layout zostanie zaktualizowany i nasze style zostaną zastosowane.

{/tlo}