Bootstrap 4 w Drupal 8/9 z Bootstrap Barrio

Będziemy używać Bootstrap 4 w Drupal 8/9 z Bootstrap Barrio. Motyw Bootstrap Barrio dla Drupala 8/9 integruje Bootstrap 4 (lub Bootstrap 5, jeśli chcesz) z Twoją witryną Drupal.

Bootstrap to bardzo popularny framework do budowania stron internetowych. Zapewnia projektantom i programistom wspólny język do komunikacji, co znacznie ułatwia proces tworzenia.

Tworzenie podmotywu Barrio to prosty proces. W tym samouczku omówimy podstawowe opcje konfiguracji motywu, którymi zarządza się za pomocą pełnego graficznego interfejsu użytkownika.

Czytaj dalej, aby dowiedzieć się, jak to zrobić!

Krok 1. – Zainstaluj motyw

Zanim zaczniemy, upewnij się, że Twoja witryna zawiera co najmniej jeden artykuł, abyś mógł dokonać porównania po zmianie ustawień motywu. Umieść również blok wewnątrz paska bocznego regionu jako drugi (Struktura > Układ bloku > Umieść blok).

• Otwórz aplikację terminala systemu operacyjnego.
• Umieść kursor w katalogu głównym instalacji Drupala.
• Wpisz : kompozytor wymaga drupal/bootstrap_barrio

Spowoduje to pobranie najnowszej stabilnej wersji motywu do: /web/themes/contrib/bootstrap_barrio

Krok 2. – Utwórz podmotyw

• Umieść kursor w katalogu motywu bootstrap_barrio
• Typ :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

Spowoduje to, że skrypt o nazwie create_subtheme w folderze scripts będzie wykonywalny i również go wykona.

Skrypt poprosi o nazwę komputera i opisową nazwę niestandardowego motywu podrzędnego.

Wprowadź wartości, które najbardziej Ci odpowiadają. Pamiętaj, że nazwa komputera musi być pisana małymi literami i nie może zawierać spacji.

Ten krok jest opcjonalny:

• Otwórz katalog swojego podmotywu (/web/themes/custom/mytheme) w edytorze kodu
• Zastąp wszystkie wystąpienia `Bootstrap Barrio` słowem `Nazwa twojego motywu`
• Zapisz wszystkie pliki

Tutaj zmieniamy tylko tekst opisowy, więc nie byłoby żadnego problemu, gdybyś pozostawił to bez zmian.

Krok 3. – Ustawienia Bootstrap Barrio

• Kliknij Wygląd na zapleczu swojej witryny Drupal
• Przewiń w dół do własnego motywu
• Kliknij Zainstaluj i ustaw jako domyślną

Po zainstalowaniu motywu,

• Kliknij link Ustawienia motywu

Zobaczysz grupę pionowych zakładek po lewej stronie ekranu z następującymi opcjami:

1. Układ (aktywna karta)
2. składniki
3. Afiks
4. Przewiń Szpieg
5. Czcionki i ikony
6. Zabarwienie

Układ

Domyślnie aktywna jest karta „Układ”. Pierwsza opcja `Kontener` określa, czy elementy Twojej witryny będą miały stałą szerokość, czy wręcz przeciwnie, będą wyświetlane na całym ekranie. Pozostaw tę opcję nietkniętą do tej pory.

W sekcji `Region` możliwe jest przypisanie niestandardowych klas CSS do regionów witryny.

• Dodaj własną niestandardową klasę do określonego regionu

• Zamknij sekcję `Region`
• Otwórz `Pozycję paska bocznego`
• Zmień wartość `Pozycja paska bocznego` na Lewo
• Otwórz `Pierwszy układ paska bocznego` i `Pierwszy układ paska bocznego`
• Zmień wartości odpowiednio na 3 kolory i 2 kolory

składniki

• Kliknij pionową zakładkę `Komponenty`
• Zmień element Button na format konturowy
• Zaznacz Zastosuj styl img-fluid do wszystkich obrazów treści

Dzięki temu obrazy wstawiane za pomocą przycisku obrazu w edytorze treści będą domyślnie responsywne. Obraz zostanie zmniejszony, aby dopasować się do rozmiaru ekranu.

Sekcja `Struktura paska nawigacyjnego` zajmuje się rozmiarem kontenera paska nawigacyjnego. Musisz rozróżnić dwa paski nawigacyjne (navbar-top i navbar). Pasek nawigacyjny to główne menu nawigacyjne Twojej witryny.

• Zmień pozycję paska nawigacyjnego na Naprawiono dół i kolor łącza paska nawigacyjnego na ciemny
• Zaznacz Przesuwany pasek nawigacyjny w sekcji „Zachowanie paska nawigacyjnego”, aby wyświetlić przesuwane menu główne na małych ekranach

Ostatnie 3 sekcje opcji konfiguracyjnej `Komponenty` dotyczą pozycji wiadomości dostarczanych przez wewnętrzny system wiadomości Drupala, zakładek zadań lokalnych (takich jak zakładka edycji treści) oraz wyglądu elementów formularza. Pozostaw te opcje bez zmian.

Afiks

Za pomocą afiksu można naprawić element, tj. ustawić wartość właściwości pozycji CSS na fixed.

Szpieg przewijania

Scrollspy służy do automatycznej aktualizacji linków menu nawigacyjnego, na podstawie pozycji kursora, np. jeśli przewijasz stronę w górę lub w dół. Ten temat zostanie omówiony w przyszłym samouczku.

Czcionki i ikony

Tutaj masz opcje wyboru między różnymi kombinacjami czcionek Google Fonts dla tekstu Twojej witryny. Co więcej, możesz wybierać między zestawami predefiniowanych ikon do użycia w swoich postach.

• Wybierz kombinację czcionek i zestaw ikon według własnych upodobań

Zabarwienie

Masz tutaj opcje dostosowania koloru wewnętrznych wiadomości Drupala. Istnieją opcje dostosowywania tabel witryny, na przykład tych wygenerowanych za pomocą modułu Widoki.

Jeśli będziesz przewijać w dół, znajdziesz „Schemat kolorów” dla swojego motywu podrzędnego. Możesz dostosować kolory tekstu i tła domyślnych regionów motywu.

Możesz dostosować kolor każdego elementu do swoich upodobań i zablokować go za pomocą ikony kłódki.

Wyświetlanie elementu strony, obraz logo i favicon

Są to domyślne opcje we wszystkich motywach Drupala.

Załaduj bibliotekę

Możesz wybierać spośród wielu gotowych do użycia bibliotek Bootswatch online, aby jednym kliknięciem poprawić wygląd i styl swojego motywu. Warto sprawdzić te opcje.

Tutaj można wybrać, czy chcesz załadować Bootstrap (Bootstrap CSS i JS) lokalnie lub przez CDN. Ta konfiguracja nie powinna być tutaj zmieniana. O wiele lepiej zmienić kod w pliku .info.yml .

• Kliknij Zapisz konfigurację

Spójrz na swoją stronę. Ten samouczek nie ma na celu nauczenia projektowania interfejsu użytkownika, ale raczej wyjaśnienie możliwości dostępnych w motywie Barrio.

Jednak teraz możesz zacząć od projektu i spróbować dostosować do niego motyw.

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