Personalizarea șabloanelor de componente

Personalizarea șablonului de componente, de regulă, are două scopuri:

  • Aduce forma formei de ieșire a datelor componente în conformitate cu proiectarea site-ului;
  • Organizarea producției datelor componente într-o formă inaccesibilă în versiunea standard.

Pe site-uri simple, de regulă, șabloanele necesită personalizare numai atunci când rezolvă prima sarcină. Pentru a schimba șablonul de sistem pentru un anumit site, trebuie mai întâi să îl copiați în folderul șablon de site. După aceasta, puteți continua să editați șablonul copiat.







În detaliu, cu personalizarea șabloanelor, puteți vedea în secțiunea Personalizarea șablonului.

Exemplu de editare a unui șablon bazat pe o componentă de meniu

Selectați codul în aspectul HTML care este responsabil pentru afișarea meniului de sus. De exemplu:

În acest cod, elementele de meniu sunt prezentate sub forma unei liste care are următoarele nuanțe:

  • Primul element de meniu ar trebui să aibă primul stil;
  • Elementul de meniu selectat trebuie să aibă stilul selectat selectat;
  • Meniul este un nivel.






Vom modifica codul de șablon din meniul gri-gri. Copiați șablonul în propriul spațiu de nume și deschideți-l pentru editare.

Codul de meniu pentru acest șablon arată astfel:

Să luăm în considerare fiecare linie a acestui șablon:

Astfel, șablonul de meniu conține:

  • zona prolog a șablonului de meniu;
  • zona corpului șablonului de meniu (ieșirea elementelor duplicate);
  • zona epilogă a șablonului de meniu.

După adaptare, șablonul va lua forma (cu verde modificările sunt evidențiate):

Deci, ce am făcut?

  • În liniile 4.5 au fost înlocuite stilurile blocului și lista.
  • Linia 5a a introdus $ cnt cu un singur scop - pentru a urmări primul element al listei - în aspect este specificat de un alt stil. Această variabilă este utilizată în linia 8d pe linia 10c.
  • În liniile 8-10, a fost adăugată condiția pentru verificarea elementului de meniu activ și a primului element de meniu.
  • Și, în cele din urmă, a eliminat specificul aspectului de 16 linii.
  • În plus, nu avem nevoie de stiluri și imagini specializate pentru acest șablon. Prin urmare, trebuie să eliminați fișierul style.css și directorul / images / din directorul /bitrix/templates/.default/components/menu/top_menu/.

Atenție vă rog! Puteți utiliza stilurile componentelor și directorul șablonului componente pentru a stoca stiluri și fișiere suplimentare. Acest lucru vă va permite să transferați șablonul de componente între proiecte.







Articole similare

Trimiteți-le prietenilor: