Jeśli masz już zainstalowany i skonfigurowany system sterowania, nadszedł czas, aby znaleźć ładny szablon i „wyciągnąć” go na MODx. W poszukiwaniu szablonów dla modów wkrótce pojawi się osobny artykuł, ale na razie możesz pobrać dowolny ciekawy szablon CSS. Można go znaleźć w wyszukiwarkach dla żądań „darmowych szablonów css” lub czegoś podobnego.
Jak uzgodniliśmy w jednej z pierwszych lekcji, rozpoczniemy badanie MODx na temat produkcji wizytówki. W tym celu wybrałem już interesujący wzór w stylu europejskim (obecnie nazywany „standardem” w Internecie). Pobierz szablon dla MODx . To archiwum zawiera 3 foldery i 3 pliki:
- Strona główna galerii jQuery
- wewnętrzna strona dwóch kolumn z dodatkową nawigacją
- strona od jednej kolumny do pełnej szerokości szablonu
Logika przechowywania plików usług szablonów jest prosta:
Folder skryptów zawiera skrypty, obrazy przechowują obrazy szablonów, a katalog stylów zawiera pliki CSS.
Pliki HTML, które również znajdują się w archiwum, to nasz znacznik HTML, niezbędny do poprawnego wyświetlania każdego z trzech typów stron:
- index.html (domyślnie) - strona główna,
- style-demo.html - wewnętrzna strona z dwiema kolumnami z dodatkową nawigacją,
- full-width.html - strona jednokolumnowa dla całej szerokości szablonu.
Teraz możesz zacząć integrować projekt.
Wszystkie szablony niezbędne do pracy z modami najlepiej przechowywać na stronie http://www.site.ru/ assets / templates
Nie dotykaj folderu menedżera, w przeciwnym razie panel administracyjny nie zostanie wyświetlony. Dlatego najlepiej jest utworzyć nowy folder, nazwać go w jakiś sposób i rozpakować tam archiwum.
Po rozpakowaniu przejdź do panelu administracyjnego witryny, zaloguj się i przenieś: Elementy → Zarządzanie elementami → Szablony
Tutaj zarządzamy naszymi szablonami i, jeśli to konieczne, tworzymy nowe. Aby usunąć lub edytować, kliknij łącze z nazwą szablonu.
Najpierw zaimplementujmy stronę główną witryny. Kliknij „nowy szablon” i wypełnij:
- nazwa szablonu (dostępna w języku rosyjskim)
- opis (nie mylić, jeśli jest dużo szablonów)
- kod szablonu - kod html żądanego szablonu.
Ponieważ teraz tworzymy szablon strony głównej, otwórz plik index.html, który był w projekcie i skopiuj cały kod w to pole. Nie zapomnij się wytrwać 
Oto przykład wypełnionego kodu.
A jeśli teraz otworzymy stronę, zobaczymy taki horror
Nic strasznego się nie stało, ponieważ w szablonie mamy inne ścieżki do stylów. Dlatego ponownie otwieramy szablon w celu edycji i wykonujemy następujące czynności:
- Rejestrujemy podstawowy adres URL witryny (aby ścieżki względne nie zostały utracone). W tagu <head> </ head> piszemy konstrukcję <base href = "[(site_url)]" />
- Zarejestruj ścieżki do szablonu (na przykład assets / templates / default-design). Zarejestruj się dokładnie tak, jak nazywają się foldery na hoście.
- Konieczne jest naprawienie wszystkich sposobów, w jakie istnieją style, skrypty i obrazy
Następnie zapisz szablon i spójrz na stronę ponownie. Jeśli wszystkie ścieżki zostały poprawnie zmienione, zobaczysz bardzo ładną stronę główną witryny.
W zasadzie to wszystko, udało nam się zintegrować projekt w MODx. Opisałem to dłużej niż ty.
Jak tam wszystko? A wewnętrzne strony również przepisują, czy co?
Nie spiesz się z wprowadzeniem innych stron witryny - w końcu nie jest interesujące przepisywanie części kodu wiele razy. Nieco później (w następnej lekcji) będę mówił o czymś takim jak kawałki - z nimi integracja szablonu pójdzie jeszcze szybciej.
Poprzednie lekcje:
Jak tam wszystko?A wewnętrzne strony również przepisują, czy co?
