Czas zacząć korzystać z Gantry 5 i budować strony internetowe.

Najlepszym sposobem na poznanie struktury jest praca z nią, dlatego w tym samouczku pokażę, jak zbudować prostą stronę Joomla za pomocą Gantry 5.

 Krok 1. Instalacja

 

Instalacja jest łatwa:

 

Przejdź na stronę gantry.org/downloads i pobierz komponent Gantry Component oraz Hydrogen.

Przejdź do Menedżera rozszerzeń Joomla i zainstaluj oba, tak jak w przypadku każdego innego rozszerzenia: Pierwszy komponent Gantry, a następnie szablon Hydrogen .

Przejdź do Rozszerzenia> Szablony, zobaczysz zainstalowany szablon Hydrogen.

Przy okazji można również uzyskać dostęp do konfiguracji szablonu za pomocą Komponenty> Motywy Gantry 5 lub poprzez ikonę Szybkiego uruchamiania tematów Gantry 5 w Panelu sterowania. Ale bądźmy teraz spokojni i pracujmy teraz w Menadżerze szablonów:

 

 

Możesz zauważyć kilka rzeczy tutaj:

  • Widzisz 2 wystąpienia szablonu.
  • Gantry również sam zainstalował szablon (Gantry nazywa to konturem). Ten kontur jest teraz przypisany do strony głównej, co tworzy osobny układ strony głównej w porównaniu z resztą witryny.

Szablon zainstalował także kilka innych przykładowych danych, w tym małe menu. W tym samouczku zamierzam zignorować przykładowe dane, aby zachować prostotę. 

Krok 2. Konfiguracja szablonu - Podstawowy zarys

Po pierwsze, musisz zrozumieć, w jaki sposób jest tworzony wyświetlacz tematyczny.

Zasadniczo mamy konfigurację najwyższego poziomu nazywaną "Podstawowym - Konturem". To definiuje konfigurację "globalną". Wszystko, co tu zdefiniujesz, liczy się dla wszystkich innych konturów motywów, chyba że zostaną zastąpione.

  • W Menedżerze szablonów Joomla kliknij domyślny styl wodoru, aby uzyskać dostęp do szablonu. Zauważ, że zawsze najpierw wpisujesz konfigurację Theme - Outline, w tym przypadku dla Hydrogen - Default Outline.
  • Aby przejść do Bazy - Kontur, kliknij menu w lewym górnym rogu, które pokazuje teraz Wodór - Domyślnie i wybierz Podstawowy - Kontur:

 

Zauważ, że dla "Base-Outline" mamy tylko karty "Style" i "Ustawienia". Zakładki "Układy" i "Zadania" są dostępne tylko dla Motywów - Kontury.

Być może zauważyłeś, że na stronie frontowej serwisu mamy zielony szablon. Wynika to z aktywnego ustawienia Presetu. Zmieńmy to na niebieski preset, zwany Preset 2.

 

 

 

Możemy również dalej to spersonalizować, korzystając z ustawień w dolnej części strony. Zróbmy małą zmianę w kolorze obszaru nawigacyjnego: 

 

Możesz zmienić więcej ustawień. Możesz zmienić więcej kolorów, a także czcionki i punkty przerwania dla wyświetlaczy mobilnych, ulubionych, itp. Pamiętaj, aby zapisać zmiany.

Teraz przejdź do zakładki Ustawienia. Możesz zmienić swoje ustawienia, takie jak ustawienia praw autorskich, ustawienia logo, kod Google Analytics itp.

Jeden element może wymagać zmiany, ponieważ może to dezorientować. Aktualnie aktywnym menu nie jest Menu główne, ale menu Motyw wodorowy. W ustawieniach menu ponownie przełącz do menu głównego:

 

  • Przejdź do menu> Menu główne i ustaw pozycję główną w menu głównym na domyślną stronę główną.

 

Krok 3. Konfiguracja szablonu - kontury motywów

Zauważyliśmy, że szablon ma 2 style lub Kontury są aktywne (Home i Default dla pozostałych).

Aby zachować prostotę tego pierwszego postu, najpierw usuniemy Hydrogen - Home Outline ze strony głównej, aby najpierw uzyskać spójny wygląd całej witryny.

Aby przełączać się między konturami, można użyć przycisku rozwijanego w lewym górnym rogu, tak jak wcześniej, aby przejść do podstawy - kontur lub użyć przycisku konturów w prawym górnym rogu.

  • Kliknij przycisk "Kontury" w prawym górnym rogu:

To pokazuje nam aktualnie zdefiniowane Kontury Motywów, obecnie 2 (plus niektóre kontury systemowe).

  • Kliknij ikonę edycji Home-Outline:

 

  • Przejdź do zakładki Przydziały.
  • Usuń przypisanie tego konspektu ze strony głównej. Teraz wszystkie strony są przypisane do użycia Default - Outline.

 

Krok 4. Konfigurowanie domyślnego - Kontur

 

Używamy teraz opcji Default-Outline dla całej witryny.

Kiedy spojrzysz na ustawienia Default - Outline, zobaczysz, że wyglądają podobnie do tych w Base - Outline. Jedyna różnica polega na tym, że wydają się nieco wyszarzone i mają przy sobie małe pole wyboru. Jeśli coś jest wyszarzone, oznacza to, że odziedziczone ustawienie z bazy jest nadal aktywne. Jeśli klikniesz pole, które chcesz zmienić, zaznaczysz, że pole wyboru jest zaznaczone, a pole nie jest już wyszarzone: 

 

Moja rada polega na utrzymaniu prostoty: zachowaj swoje ustawienia w Bazie - Kontur tak bardzo, jak to tylko możliwe.

Jeśli podążyłeś tak daleko, twoja strona powinna być mniej lub bardziej podobna do mojej tutaj (zwróć uwagę, że dla celów demo dodałem drugi element menu do Menu głównego):

Krok nr 5. Korzystanie z układów

Teraz rzućmy okiem na kartę Układy i zobaczmy, co aktualnie tam jest.

Po lewej stronie widzimy wszystkie przedmioty, które moglibyśmy ewentualnie dodać do Układu. W głównym obszarze widzimy aktualnie aktywny układ. Aby to zrozumieć, musisz wiedzieć, które elementy mogą być zawarte:

  • Pozycje modułów
  • Instancje modułów
  • Zawartość strony i zawartość systemu
  • Cząstki
  • Atomy
  • Przekładki

Wszystkie te zostaną omówione bardziej szczegółowo w następnym samouczku z tej serii. Na razie przyjrzyjmy się bieżącemu układowi i zobaczmy, czy możemy uzupełnić go o więcej treści: 

Jeśli klikniesz na małą ikonę koła zębatego dla dowolnej pozycji układu, zobaczysz, jakiego rodzaju jest pozycja. Aby podać 2 przykłady:

 

  • Przykład 1 : Pozycja logo to ustawienie, które możesz już zauważyć na karcie Ustawienia. Jest to element typu Particle, a ustawienia, które widzisz, są dziedziczone z zakładki ustawień Konturu (stąd wyszarzanie i znacznik wyboru), który z kolei dziedziczy z Bazy - Konturu. Oznacza to, że jest to Particle, a ustawienia pochodzą z szablonu - konspektu (chyba że nadpisałeś je tutaj), dlatego są wyszarzone i mają pole wyboru obok nich.

 

 

  • Przykład 2 : Pozycja nagłówka jest typu Pozycja, co oznacza, że ​​jest to normalna pozycja Joomla, którą możesz skonfigurować z Menedżera modułów Joomla:

 

Widzisz, że prawie nie ma tutaj żadnych ustawień, poza zmianą nazwy i stanu.

 

  • Przejdź do Extensions> Modules.
  • Kliknij Nowy i utwórz niestandardowy moduł HTML.
  • Wpisz fajny slogan, np. "Gantry 5 rocks!"
  • Przyporządkuj moduł do pozycji Nagłówek.
  • Twój nowy moduł zostanie pokazany na stronie frontowej, po prawej stronie logo:

Podobnie możesz przypisać moduł Breadcrumbs do pozycji Breadcrumbs i dodać moduł Joomla dla pozycji Footer.

Wszystkie inne istniejące ustawienia bieżącego układu to Gantry Particles and Atoms (oprócz głównej treści oczywiście).

 

W następnym wpisie w tej pięcioczęściowej serii zamierzamy rozszerzyć tę dyskusję o opcje układu, omawiając szczegółowo te możliwości.