Jak korzystać z modułu dodatków do pozycji menu w Drupalu 8?

Mega menu nie jest już trendem w projektowaniu, ale istotną częścią większości stron internetowych związanych z wiadomościami lub eCommerce.

Moduł Dodatki do pozycji menu dla Drupala 8 ulepsza domyślny system menu w Drupalu, umożliwiając konstruktorowi witryny dodawanie pól do pozycji menu. W ten sposób można w kilku prostych krokach stworzyć mega menu.

Śledź dalej, aby dowiedzieć się, jak korzystać z tego modułu. Zaczynajmy!

Krok #1: Zainstaluj wymagane moduły

Oprócz modułu Dodatki do pozycji menu musisz zainstalować Viewfield. Viewfield udostępnia pole, które przechowuje odwołanie do View i renderuje je za każdym razem, gdy wyświetlana jest jednostka zawierająca pole.

• Otwórz aplikację terminala na swoim komputerze.
• Typ :
  • kompozytor wymaga drupala/pola widzenia
  • kompozytor wymaga drupala/menu_item_extras

Po pobraniu włącz oba moduły.

• Kliknij Rozszerz.
• Sprawdź oba moduły.
• Kliknij Zainstaluj.

Krok #2: Utwórz system taksonomii

Być może słowo „system” nie jest zbyt odpowiednie, ponieważ stworzymy tylko jeden słownik z dziesięcioma powiązanymi terminami. Jednak ten przykład wyjaśni podstawy, dzięki czemu w przyszłości będziesz mógł pracować z bardziej skomplikowanymi systemami taksonomii.

• Kliknij opcję Struktura > Taksonomia > Dodaj słownik.
• Wpisz nazwę „Tematy” i kliknij Zapisz.
• Kliknij Dodaj termin i dodaj kolejno wszystkie terminy wyszczególnione poniżej.
  • Tematy
    • D8
    • Symfony
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Pyton
    • DevOps

Krok 3: Utwórz typy treści

Na potrzeby tego samouczka użyjemy 2 typów zawartości z następującymi polami:

• Usługi
  • Obraz usługi / Obraz / Dozwolona liczba wartości: 1
  • Tekst wstępu / Tekst (sformatowany) / Dozwolona liczba wartości: 1
  • Opis / Pole domyślne

• Blog
  • Kategoria / Termin taksonomiczny / Dozwolona liczba wartości: nieograniczona
  • Opis / Pole domyślne

Upewnij się, że podczas tworzenia pola Taksonomia wybrałeś Typ odniesienia (Tematy).

Krok 4: Utwórz treść

Zamierzamy stworzyć 3 węzły typu Service:

• Poradniki
• Filmy
• Książki

Każdy z tych węzłów będzie powiązany z elementem drugiego poziomu w mega menu. Z drugiej strony stworzymy około 10 węzłów typu Blog z różnymi terminami z nimi związanymi. Upewnij się, że dołączasz 2 z terminów (np.: D8, WP) częściej niż pozostałe.

Ekran Zawartość powinien wyglądać na końcu tego procesu mniej więcej tak, jak na poniższym obrazku.

Krok 5: Utwórz pozycje menu

Pierwszy poziom menu głównego będzie zawierał następujące pozycje menu:

• Dom
• O
• Zasoby
• Kontakt

Każda z pozycji menu będzie miała dodatkowe (dodatkowe) pole. To pole zostanie ustawione na drugim poziomie menu, czyli na każdym z elementów karty w mega menu. To pole pozwoli nam zaprezentować każdy z bloków widokowych.

• Kliknij opcję Struktura > Menu.
• Kliknij menu Edycja, aby edytować nawigację główną.

• Kliknij Dodaj łącze 3 razy, aby dodać brakujące elementy menu pierwszego poziomu.
• Kliknij Zapisz za każdym razem, gdy wpiszesz nazwę pozycji menu.

Użyj specjalnego tagu, aby wyświetlić tylko tekst linku.

Po utworzeniu i przeorganizowaniu linków w menu,

• Kliknij Zarządzaj polami > Dodaj pole, aby dodać pole do elementów menu.
• Wybierz pole typu Pole widoku.
• Nadaj mu odpowiednią nazwę i etykietę.
• Kliknij Zapisz i kontynuuj.

• Ustaw Dozwoloną liczbę wartości na Nieograniczony.
• Kliknij Zapisz ustawienia pola

Będziesz mieć możliwość połączenia widoku domyślnego z tym konkretnym polem. Zostaw te pola puste.

• Przewiń w dół i kliknij Zapisz ustawienia
• Kliknij Zarządzaj wyświetlaniem.

• Ukryj etykietę karty menu.
• Kliknij Zapisz.

Krok #6: Utwórz widoki

• Kliknij Struktura > Widoki > Dodaj widok
• Pokaż zawartość typu Usługi.
• Utwórz blok z niesformatowaną listą pól.
• Wybierz , aby pokazać 3 elementy na blok.
• Kliknij Zapisz i edytuj.

• Dodaj pole obrazu usługi
• Ustaw styl obrazu na Miniatura i połącz obraz z Treścią.
• Kliknij Zastosuj

• Dodaj również pole tekstowe Intro.
• Zmień kolejność pól.
• Kliknij Zapisz.

• Kliknij Struktura > Widoki > Dodaj widok
• Pokaż zawartość typu Blog.
• Utwórz blok z niesformatowaną listą pól.
• Wybierz , aby pokazać 1 element na blok.
• Kliknij Zapisz i edytuj.

• Dodaj pole Kategoria.
• Kliknij Dodaj i skonfiguruj pola.
• Kliknij Ustawienia wielu pól.
• Wybierz Lista nieuporządkowana.
• Ustaw liczbę wyświetlanych wartości na 3.
• Kliknij Zastosuj.

• Usuń kryterium sortowania
• Kliknij Zastosuj.
• Kliknij Zapisz, aby zapisać widok.

Krok #7: Dodaj bloki widoku do pozycji menu

• Kliknij Struktura > Menu
• Edytuj nawigację główną.
• Edytuj pozycję menu Zasoby.
• Dodaj 2 bloki utworzone w kroku 5.
• Kliknij Zapisz.

Krok 8: Style CSS

Nie będę wyjaśniał szczegółowo tego kodu, ponieważ jest on poza zakresem tego samouczka. Możesz jednak dowiedzieć się więcej na temat widoków Drupala i siatki CSS w tym artykule. Jeśli chcesz poćwiczyć więcej z mega menu, zajrzyj również do tego artykułu.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

Mam nadzieję, że podobał Ci się ten samouczek. Dziękuje za przeczytanie!