Să ne imaginăm că avem un șablon HTML gata pe care trebuie să-l folosim în CMS Made Simple. Am luat șablonul gratuit pentru clasa de masterat. Puteți să-l descărcați. dacă doriți să exersați sau să vedeți cum arată. Dacă știți elementele de bază ale HTML și CSS, atunci pașii următori nu ar trebui să vă prezinte probleme. Mergem la panoul administrativ CMS Made Simple.
În lista de șabloane, vedem un nou șablon. Să facem 1) șablonul implicit și 2) să îl setăm pentru toate paginile. Șablonul implicit se va aplica automat tuturor paginilor noi. Faceți clic pe link-ul Instalare pentru toate paginile. Atribuiți acest șablon tuturor paginilor existente.
Dacă vă uitați acum la pagina dvs. din browser, veți vedea că pagina utilizează deja codul HTML al șablonului nostru, însă, desigur, încă nu avem suficiente stiluri și dinamici. Deci, mai întâi să mergem în stiluri.
În panoul administrativ, în meniul principal, faceți clic pe Aspect »Stiluri și apoi pe linkul Adăugați stil. Specificați orice nume pentru stil și, în câmpul Conținut, copiați conținutul fișierelor style.css și menu.css. adică toate stilurile care sunt utilizate în șablon fără modificări. Faceți clic pe butonul Trimitere. Stilul este adăugat la lista de stiluri.
Acum trebuie să atașați acest stil la șablonul nostru. Pentru a face acest lucru, în lista de stiluri, faceți clic pe butonul albastru cu inscripția CSS la sfârșitul liniei cu numele stilului. În fereastra următoare, selectați șablonul HTML din meniul derulant și faceți clic pe Atașați la acest șablon.
În interfață, nimic nu sa schimbat încă, deoarece șablonul nostru static este încă folosit acolo. Este timpul să-l însuflețiți. În meniul principal, selectați Executare »Șabloane și faceți clic pe șablonul nostru pentru al deschide pentru editare.
Noțiuni de bază cu Smarty. Smarty este o limbă specială pentru șabloane, care vă permite să introduceți etichete în bretele curbate în locuri unde ar trebui localizat conținutul dinamic. Când pagina este apelată în interfață, etichetele Smarty vor fi transformate și modificate în funcție de conținutul nostru. În primul rând, înlocuim apelul în stil static cu eticheta. Căutați un model pe linie:
Și înlocuiți-le cu eticheta Smarty. Faceți clic pe Aplicați și urmăriți rezultatul în interfață. Puteți vedea că stilul pe care l-am creat în panoul administrativ și atașat la șablon este acum încărcat automat pe pagină. Dacă vă uitați la sursa paginii, asigurați-vă că în locul unde ați folosit eticheta a apărut o etichetă de legătură obișnuită, CMS Made Simple generat automat.
Acum, să înlocuim titlul paginii și conținutul acesteia. Pentru titlul paginii folosim eticheta. ci pentru conținutul etichetei.
În șablon căutăm acele locuri în care trebuie înlocuit titlul paginii. Sunt două dintre ele. Găsiți liniile din șablon, unde trebuie să înlocuiți titlul:
și înlocuiți anteturile statice cu etichetele Smarty:
Faceți clic pe Aplicați și urmăriți rezultatul în interfață. Titlul din browser și din pagină s-au schimbat. Acum căutăm un loc în șablon în care trebuie afișat conținutul paginii și înlocuim tot conținutul static al șablonului cu eticheta:
Adăugarea unui meniu
Rămâne de dinamizat meniul. Pentru aceasta găsim în șablon un meniu static:
Toate acestea trebuie înlocuite cu un meniu dinamic, care va fi format din paginile de primul nivel. Pentru meniu, folosim eticheta. Să înlocuim mai întâi întreaga ieșire a meniului static de mai sus cu această etichetă. Meniul a fost adăugat, dar oferă pagini de toate nivelurile, astfel încât designul se pierde. Pentru a configura mai bine eticheta, folosim parametrii acestei etichete. Parametrii Smarty sunt foarte asemănători cu atributele din HTML. Acestea sunt adăugate direct în coarde curbate ale etichetei Smarty, pot avea orice secvență și constau dintr-un parametru și valoarea sa separată de semnul egal. De exemplu, dacă vrem să afișăm pagini de numai primul nivel, configurați eticheta după cum urmează:
Efectuat. Dacă într-un alt loc al șablonului trebuie să utilizați meniul de la al doilea nivel, adăugați în acest loc
Da, puteți utiliza o etichetă cu diferiți parametri oriunde în șablon, precum și în pagina de conținut ori de câte ori doriți.
Adu-ți aminte
Sunt mai multe detalii. În CMS Made Simple, puteți (și trebuie să utilizați) metaetichete individuale pentru fiecare pagină, deci trebuie să eliminați etichetele statice din șablon. Căutăm toate etichetele meta:
Și înlocuiți-o cu eticheta Smarty. Acest loc va afișa etichete globale pe care le veți găsi în secțiunea Administrare site »Setări generale în câmpul Metadate globale. precum și pagini individuale de metadate pe care le puteți seta la editarea unei pagini. Conținut »Pagini. deschideți pagina pentru editare, accesați fila Opțiuni și setați etichetele meta din câmpul Meta pentru această pagină.
Ați observat că imaginea a dispărut? Această imagine a fost încărcată cu stiluri și acum stilul nu o poate găsi. Cea mai simplă opțiune. În panoul administrativ, accesați Conținut »Gestionați imaginile și încărcați imaginea containerright-image.jpg la CMS Made Simple. Acum adăugați calea spre imagine în stil. Înregistrare »Stiluri. faceți clic pe stilul nostru și căutați linia
înlocuiți această linie cu
Această linie utilizează, de asemenea, eticheta Smarty, dar din moment ce stilurile au deja bretele curbate, în stiluri folosiți paranteze pătrate duble. [[root_url]] va fi automat înlocuită cu adresa URL a paginii dvs.
Acesta a fost cel mai simplu exemplu de implementare a unui șablon HTML în CMS Made Simple. Deoarece aici lucrați cu HTML, CSS și Smarty, nu pot exista limite de proiectare. Vă pot asigura că în CMS Made Simple puteți implementa orice șablon scris în HTML și CSS.
Următoarea clasă de master va descrie în detaliu modul de implementare a unui meniu de complexitate în CMS Made Simple. Ne abonați. dacă este interesat.