Przyglądamy się Movable Type i wyjaśnijmy, w jaki sposób jego modułowa struktura ułatwia dokonywanie przekrojowych zmian na blogach.
Co budujemy? Przejrzymy podstawowe ustawienia CSS pozwalające zarządzać głównym layoutem każdego bloga i nauczymy się, gdzie i jak edytować odpowiednie pliki. Postępując zgodnie ze wskazówkami, będziemy edytować kod wykorzystywany przez Movable Type do publikacji struktury naszej strony.
Twórcy Movable Type stworzyli w pełni opensource’ową wersję projektu. To oznacza, że następne wersje oprogramowania będą pozbawione ograniczeń „do osobistego użytku”, które obecnie widnieją w licencji.
Obecnie obydwie wersje projektu są wirtualnie identyczne. W wersji opensource’owej mamy nocne wydania, natomiast kod edycji zezwalającej na osobisty użytek jest bardziej stabilny. W drugiej części poradnika, mówiącej o tym, jak budować strony z Movable Type, będę odwoływać się właśnie do niego. W poprzednim odcinku pisałem o tym, jak zainstalować Movable Type. Poruszyłem też kwestię systemu stylów – mechanizmu stosowanego do zmiany schematu kolorów i formatowania bloga. Tym razem zagłębię się w nowe funkcje Movable Type 4: modułowe szablony. Dzięki ich edycji możemy wprowadzać zmiany w strukturze strony na poziomie kodu, dodawać i usuwać funkcje, dokonywać sporych zmian w layoucie oraz zwiększać stopień dostosowania całości do naszych potrzeb.
PORADA EKSPERTA:
- Template Hammer. Jeśli używaliśmy poprzedniej wersji Movable Type, możemy czuć się odrobinę zagubieni. Wcześniejsze wersje korzystały z pojedynczych płaskich szablonów, podobnych do tych w Bloggerze, które umożliwiały budowanie layoutów stron w ulubionym edytorze. Nowy system modułowy charakteryzuje się kilkoma zaletami, umożliwiając tworzenie kodów wielokrotnego użytku, które można zastosować we wszystkich naszych blogach. Jeśli preferujemy tworzenie layoutu w starym stylu, skorzystajmy z Template Hammer, wtyczki, która konwertuje nasze szablony do pliku z płaskim HTML-em (http://plugins.movabletype. org/template-hammer).
- Podcasting. Choć podcasting nie jest już ostatnim krzykiem mody, jednak nadal to skuteczny sposób dotarcia naszych informacji do innych użytkowników. Movable Type ma wbudowane bezpośrednie wsparcie podcastingu na poziomie kodu. Będziemy jedynie potrzebować wtyczki obsługującej podcasting http://www.majordojo.com/projects/podcasting.php wraz z szablonem RSS, dostępnym na http://www.movabletype.org/documentation/examples/podcast_rss_feed.txt. Wtyczki można użyć jako odnośnika do jakiegokolwiek pliku audio w internecie – wystarczy podać prowadzący do niego adres URL.
{tlo_1}
KROK 1: powrót do stylu
Style Movable Type kontrolują cały wygląd naszej strony z blogiem. Oparto je na CSS-ach, toteż w prosty sposób umożliwiają zmianę schematu kolorów oraz formatowania (opisano to w poprzednim odcinku). Teraz wracamy do Movable Type i wybieramy Design → Styles.
{/tlo}
{tlo_0}
KROK 2: wariacje stylów
Klikamy odnośnik Default Styles, by zobaczyć listę zainstalowanych stylów. Wybieramy którykolwiek z nich i przyglądamy się znajdującemu się po prawej stronie panelowi Selected Design. Mamy tu rozwijane menu, dzięki któremu możemy wybrać wariant layoutu.
{/tlo}
{tlo_1}
KROK 3: umiejscowienie bocznego paska
Opisy takie jak 3 Columns -Wide, Thin, Thin dają mało informacji o elastyczności oferty. Przykładowo, layout Default 2 Column umożliwia zamianę pasków bocznych z prawego na lewy. Thin,Wide, Thin to klasyczny layout CMS-a z nawigacją po którejś ze stron.
{/tlo}
{tlo_0}
KROK 4: forma, treść i struktura
Owe layouty także są kontrolowane za pomocą CSS-a – globalnego pliku o nazwie base_theme.css. To część systemu modułowych szablonów Movable Type 4.1. Jeśli chcemy zmienić strukturę strony, musimy bezpośrednio edytować główne szablony.
{/tlo}
{tlo_1}
KROK 5: globalny CMS
Po raz drugi przechodzimy do menu Design i wybieramy Templates. Ujrzymy listę szablonów, które zarządzają strukturą i treścią naszej strony z blogiem, jak też jego archiwum. Globalny arkusz stylu base_theme.css znajduje się u dołu listy. Klikamy prowadzący do niego odnośnik, dzięki czemu rozpoczniemy edycję.
{/tlo}{tlo_1}
KROK 6: poprawianie szerokości
Przewijamy w dół, dopóki nie dotrzemy do komentarza /*Wide-Thin-Thin */. Każdej kolumnie przypisano stałą szerokość, którą można zwiększać do 940 pikseli, w związku z czym możemy zmienić szerokość kolumn alfa, beta i gamma tak długo, jak długo coś do nich dodajemy, aż do 940 pikseli.
{/tlo}
{tlo_0}
KROK 7: zapisujemy zmiany
Dokonaliśmy pierwszej edycji szablonu. Klikamy Save & Push, aby zastosować zmiany w blogu. Pamiętajmy, Movable Type wgrywa nasz blog jako statyczny HTML, więc jakiekolwiek zmiany, których dokonamy, muszą zostać opublikowane. Gdy zakończymy, powracamy do Design → Template.
{/tlo}
{tlo_1}
KROK 8: moduły szablonów
Zagłębiając się jeszcze bardziej w system szablonów, zauważymy, że każda sekcja stron publikowanych na Movable Type jest podzielona na cztery osobne moduły. Klikamy odnośnik Template Modules w menu nawigacyjnym Quickfilters. To tutaj znajduje się główne danie systemu szablonów.
{/tlo}
{tlo_0}
KROK 9: alternatywny pasek boczny
Otwieramy Sidebar – 2 Column Layout. Jeśli kodujemy w HTML-u, zauważymy nazwę opakowania CSS – beta. Powinniśmy ją pamiętać z CSS-ów, które wcześniej zmienialiśmy. Zagłębiając się dalej, przekonamy się, że każdy z komponentów wyświetlanych na pasku bocznym zdefiniowano za pomocą znaczników Movable Type.
{/tlo}
{tlo_1}
KROK 10: bloki kodów
Owe znaczniki wprowadzają na stronę zarówno funkcjonalność Movable Type, jak też inne szablony. Każdy jest zdefiniowany w obrębie swojego bloku.W Movable Type noszą nazwę widżetów – każdy blok kodu rozpoczyna się od definicji widżetu.
{/tlo}
{tlo_0}
KROK 11: usuwanie widżetów
Jeśli chcemy usunąć widżet wyszukiwania z panelu bocznego, zaznaczamy wszystko od {html}
{/html}. To drugie pojawienie się tego znacznika w kodzie. Ponownie publikujemy blog – funkcji wyszukiwania już niema.
{/tlo}
{tlo_1}
KROK 12: ustawienia widżetów
Zamiast niej, korzystając z funkcji Widget Sets, możemy zbudować własne moduły szablonu przy minimalnym użyciu kodu. Przechodzimy do Design → Widget Sets, aby rozpocząć. Klikamy przycisk CreateWidget Set i przechodzimy do Widget Set Editor.
{/tlo}{tlo_1}
KROK 13: tworzymy nowy zestaw widżetów
Ujrzymy dwie kolumny: jedną pustą, drugą wypełnioną nazwami widżetów. Korzystając z Ajaksa, możemy przeciągnąć i upuścić formularze widżetów z prawej kolumny do lewej – zostaną tu dodane do tworzonego przez nas modułu. Dodajemy widżety, a następnie nowy zestaw widżetów nazywamy Left Sidebar.
{/tlo}
{tlo_0}
KROK 14: zamiana bocznego paska
Zachowujemy zmiany, następnie tworzymy drugi zestaw widgetów o nazwie Right Sidebar. Już teraz rozumiecie mój chytry plan?Wymieniamy domyślną treść w paskach bocznych Movable Type. Dobrze, że mamy kopie wszystkich nieedytowanych plików, prawda?
{/tlo}
{tlo_1}
KROK 15: edycja głównych szablonów
Wracamy do Design → Templates i wybieramy Templates Modules. Ponownie otwieramy Sidebar – 2 Column Layout. Zaznaczamy cały kod między {html}
{/html}.Wciskamy klawisz Delete.
{/tlo}
{tlo_0}
KROK 16: wstawiamy nowy kod
Wmiejsce kodu, który skazaliśmy na cyfrowe zapomnienie, wpisujemy {html}
{/tlo}
{tlo_1}
KROK 17: trzykolumnowa alternatywa
Wpodobny sposób możemy edytować szablon 3 Column Layout, dodając zestawy widżetów, które utworzyliśmy wcześniej. Zestaw widżetów Right Sidebar zamienia kod między blokami CSS, rozpoczynającymi się od {html}
{/tlo}
{tlo_0}
KROK 18: zmiany przekrojowe na stronach
Modułowa natura Movable Type oznacza, że zmiana jednego szablonu i ponowne opublikowanie bloga pociąga za sobą zmiany w całym serwisie. To niedobrze, jeśli coś pójdzie źle, toteż zachowujemy kopie oryginalnych plików Movable Type na dysku.
{/tlo}
{tlo_1}
KROK 19: ustawienia firmowe
Jeśli będziemy musieli przywrócić szablon, nie ma potrzeby instalowania wszystkiego od początku. Wystarczy zlokalizować sprawiający kłopoty plik, znajdujący się w folderze default_templates w naszej kopii oprogramowania Movable Type, a następnie zamienić go na kopię bezpieczeństwa. Teraz wystarczy ponownie opublikować blog.
{/tlo}
Może Cię zainteresować:
