Bootstrap 4 în Drupal 8/9 cu Bootstrap Barrio

Vom folosi Bootstrap 4 în Drupal 8/9 cu Bootstrap Barrio. Tema Bootstrap Barrio pentru Drupal 8/9 integrează Bootstrap 4 (sau Bootstrap 5 dacă doriți) cu site-ul dvs. Drupal.

Bootstrap este un cadru foarte popular pentru construirea de site-uri web. Oferă designerilor și dezvoltatorilor un limbaj comun pentru a comunica, facilitând mult procesul de dezvoltare.

Crearea unei subteme pentru Barrio este un proces simplu. Acest tutorial va explora opțiunile de bază de configurare ale temei, care sunt gestionate printr-o interfață grafică completă cu utilizatorul.

Continuați să citiți pentru a afla cum!

Pasul # 1.- Instalați tema

Înainte de a începe, asigură-te că site-ul tău are cel puțin un articol, astfel încât să poți face o comparație după modificarea setărilor temei. De asemenea, plasați un bloc în interiorul barei laterale a regiunii al doilea (Structură > Aspect bloc > Plasați bloc).

• Deschideți aplicația terminală a sistemului dvs. de operare.
• Plasați cursorul în rădăcina instalării Drupal.
• Tip : compozitorul necesită drupal/bootstrap_barrio

Aceasta va descărca cea mai recentă versiune stabilă a temei pe: /web/themes/contrib/bootstrap_barrio

Pasul # 2.- Creați o subtemă

• Plasați cursorul pe directorul de teme bootstrap_barrio
• Tip :

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

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

Acest lucru va face executabil scriptul numit create_subtheme din folderul de scripturi și, de asemenea, îl va executa.

Scriptul va cere un nume de mașină și un nume descriptiv pentru subtema personalizată.

Introduceți valorile care vi se potrivesc cel mai bine. Rețineți că numele mașinii trebuie să fie cu litere mici și să nu conțină spații.

Acest pas este opțional:

• Deschideți directorul subtemei dvs. (/web/themes/custom/mytheme) într-un editor de cod
• Înlocuiește toate aparițiile „Bootstrap Barrio” cu „Numele temei tale”.
• Salvați toate fișierele

Aici, schimbăm doar textul descriptiv, așa că nu ar fi nicio problemă dacă l-ați lăsa așa cum este.

Pasul # 3.- Setările Bootstrap Barrio

• Faceți clic pe Aspect pe backend-ul site-ului dvs. Drupal
• Derulați în jos la tema personalizată
• Faceți clic pe Instalare și setați ca implicit

Odată ce tema a fost instalată,

• Faceți clic pe linkul Setări ale temei

Veți vedea un grup de file verticale în partea stângă a ecranului cu următoarele opțiuni:

1. Aspect (filă activă)
2. Componente
3. Afix
4. Defilare Spion
5. Fonturi și pictograme
6. Culori

Aspect

În mod implicit, fila „Layout” este activă. Prima opțiune `Container` specifică dacă elementele site-ului dvs. vor avea o lățime fixă ​​sau, dimpotrivă, vor fi afișate pe toată dimensiunea ecranului. Lăsați această opțiune neatinsă până acum.

În secțiunea `Regiune`, este posibil să atribuiți clase CSS personalizate regiunilor site-ului.

• Adăugați propria clasă personalizată într-o anumită regiune

• Închideți secțiunea „Regiune”.
• Deschideți „Poziția barei laterale”.
• Schimbați valoarea „Poziția barelor laterale” la Stânga
• Deschideți `Bara laterală primul aspect` și `Bara laterală primul aspect`
• Schimbați valorile la 3 coloane și, respectiv, 2 coloane

Componente

• Faceți clic pe fila verticală „Componente”.
• Schimbați elementul Button în format de contur
• Bifați Aplicați stilul img-fluid la toate imaginile de conținut

Acest lucru va face ca imaginile pe care le introduceți prin butonul de imagine al editorului de conținut să fie receptive în mod implicit. Imaginea se va reduce pentru a se potrivi cu dimensiunea ecranului.

Secțiunea `Navbar structure` se ocupă de dimensiunea containerului navbar. Trebuie să faceți diferența între două bare de navigare (navbar-top și navbar). Navbar este meniul principal de navigare al site-ului dvs.

• Schimbați poziția Navbar la Fixed fund și Navbar link color la Întuneric
• Bifați Sliding navbar în secțiunea `Navbar behavior`, pentru a afișa un meniu principal glisant pe ecranele mici

Ultimele 3 secțiuni ale opțiunii de configurare `Componente` se referă la poziția mesajelor livrate de sistemul de mesaje intern al Drupal, filele pentru sarcinile locale (cum ar fi fila de editare a conținutului) și aspectul elementelor de formular. Lăsați aceste opțiuni neatinse.

Afix

Cu afix, este posibil să se fixeze un element, adică să se stabilească valoarea proprietății de poziție CSS la fix.

Scrollspy

Scrollspy este folosit pentru a actualiza automat legăturile unui meniu de navigare, în funcție de poziția cursorului, adică dacă derulați în sus sau în jos pe site. Acest subiect va fi tratat într-un tutorial viitor.

Fonturi și icoane

Aici aveți opțiuni de a alege între diferite combinații de fonturi Google Fonts pentru textul site-ului dvs. În plus, puteți alege între seturi de pictograme predefinite pentru a le folosi în postările dvs.

• Alegeți combinația de fonturi și setul de pictograme pe placul dvs

Culori

Aveți aici opțiuni pentru a personaliza culoarea mesajelor interne Drupal. Există opțiuni de personalizare a tabelelor site-ului, de exemplu, cele generate cu modulul Vizualizări.

Dacă continuați să derulați în jos, veți găsi „Schema de culori” pentru subtema dvs. Puteți personaliza textul și culorile de fundal ale regiunilor tematice implicite.

Puteți personaliza culoarea fiecărui element după bunul plac și îl puteți bloca, folosind pictograma de lacăt.

Afișare element de pagină, imagine siglă și favicon

Acestea sunt opțiuni implicite în toate temele Drupal.

Încărcați biblioteca

Puteți alege între mai multe biblioteci online Bootswatch gata de utilizare pentru a îmbunătăți aspectul temei dvs. cu un singur clic. Aceste opțiuni merită verificate.

Este posibil să alegeți aici dacă doriți să încărcați Bootstrap (Bootstrap CSS și JS) local sau printr-un CDN. Această configurație nu trebuie modificată aici. Este mult mai bine să schimbați codul din fișierul .info.yml .

• Faceți clic pe Salvare configurație

Aruncă o privire pe site-ul tău. Acest tutorial nu intenționează să vă învețe designul UI, ci mai degrabă să explice posibilitățile disponibile cu tema Barrio.

Cu toate acestea, acum puteți începe de la un design și puteți încerca să adaptați tema la acesta.

Sper că v-a plăcut acest tutorial. Multumesc pentru lectura!