Acum câteva luni m-am familiarizat cu motorul modx. La început a fost foarte dificil, deși există suficiente tutoriale despre el. Dar unele dintre ele sunt depășite, altele erau pentru alte versiuni. Dar, în general, mi-am dat seama de funcționarea și capacitățile motorului, am vrut și să instalez frumos șablon modx , dar aici am întâlnit o problemă - nu există șabloane pentru modx ca atare. La început m-am supărat, dar apoi mi-am dat seama cât de tare este, pentru că poți atașa orice șablon html la modh și, în același timp, îl împarte în bucăți (detalii șablon) după cum vrei! În acest articol, vă voi spune cum să instalați cu ușurință un șablon modx, să îl împărțiți în părți și cum să editați șabloane modx.

Cel mai important lucru este să găsești un șablon html simplu. De preferință adaptiv - astfel încât să se deschidă diferite dispozitive cu lățimi diferite ale ecranului. Vom presupune că ați găsit unul (deși în cazul nostru absolut orice șablon html va fi potrivit). Apoi, trebuie fie să încărcați fișierele în găzduire, fie să creați pagini acolo și să copiați conținutul. Dar haideți să o luăm pas cu pas și cum o fac.

Instrucțiuni pas cu pas pentru crearea și personalizarea șablonului dvs. modx

Deci, avem un șablon - un set de html și fișiere css, poate și scenarii.

1. Accesați administratorul panoul modx, Elemente-Șabloane și faceți clic pe semnul plus.

3. Faceți clic pe Salvare. Gata, șablonul nostru este gata. Dar pentru a verifica funcționarea acestuia, trebuie să creați o pagină de testare. Pentru asta creăm noua resursa(pagina), selectați șablonul nostru nou creat și faceți clic pe Salvați. Nu uitați să bifați caseta Publicat.

Acum deschideți pagina noastră (prin introducerea manuală a adresei în browser sau adăugarea acesteia în meniu pentru comoditate). Dacă ați făcut totul corect, site-ul ar trebui să se deschidă cu dvs html noușablon instalat pe modx.

Șablon modx personalizat: imaginile și stilurile CSS nu sunt afișate

Deși, cel mai probabil, șablonul s-ar putea să nu se deschidă așa cum ar trebui prima dată. Fiți atenți la locația fișierelor. De obicei, șablonul poate „pluti” și poate fi afișat fără imagini. Totul se datorează faptului că calea către fișiere este introdusă incorect. Ele trebuie să fie analizate în fișierul șablon în sine și plasate acolo unde l-ați încărcat pe găzduire. De exemplu, am încărcat fișiere în assets/template/test_shab / folder, așa că în șablon am scris ceva de genul assets/template/test_shab/img/favicon.ico etc. Toate căile fișierelor trebuie schimbate, deoarece în mod implicit toate fișierele sunt localizate în folderul cu șablonul, dar în modx este mai bine să le încărcați undeva (dar acest lucru este mai mult pentru comoditate, pentru a nu înfunda sistemul).

Cum să afișați conținutul modx pe șablonul dvs

Dacă șablonul dvs. se deschide și toate imaginile sunt afișate, este bine. Dar asta nu este tot. Conținutul în sine, înregistrat prin panoul de administrare modx, nu este afișat. Și de ce? Pentru că nu este menționat în șablon! Tocmai am copiat tot codul din șablonul html. În loc de conținut din șablon, adăugați o bucată [[*conținut]], care este responsabilă pentru afișarea întregului conținut modx. În editorul de șabloane, va arăta cam așa:

Aici terminăm deocamdată. Dacă ceva nu merge, întreabă. Asta nu este tot, va trebui totuși să împărțiți șablonul în bucăți pentru a face mai convenabil afișarea conținutului și lucrul cu site-ul.

După Instalari CMS MODx, primul lucru de făcut este: este de a crea un subiect. Desigur, puteți folosi șablonul demo adăugându-l la instalarea CMS-ului,

dar avem o altă sarcină: do șablon unic pentru noi înșine MODx .

Pentru a face acest lucru, să mergem la Panou de administrare/elemente/gestionarea elementelor/șabloane. Iată link-ul: Șablon nou . Urmați acest link:

În această filă, vom crea un nou șablon unic pentru site CMS MODx.

Deci, avem patru câmpuri pentru a introduce o descriere a șablonului MODx:

• Câmp de nume șablon. Deoarece creăm pagina principală, denumește șablonul index_1 .
• Descrierea șablonului. Scrie nume scurt Site-ul dvs., voi avea asta: Cel mai bun CMS gratuit Internet .
• Categoriile existente. Aici puteți selecta categorii: Conținut, conținut demonstrativ, autentificare, formulare... Selectați o categorie Conţinut .
• Camp categorie noua. Lăsăm acest câmp gol.

După cum ați observat deja, în această filă toate câmpurile sunt goale, iar cel mai important câmp: Cod șablon (HTML) MODx, este de asemenea gol, trebuie să îl umplem cu cod HTML. Nu vă faceți griji, abilități lingvistice marcare hipertext Nu ne va fi de folos; nu vom scrie manual cod HTML. Pentru a crea un șablon MODx vom folosi un program special.

Pentru a scrie un șablon HTML, vom folosi un editor HTML vizual creație rapidă site și pagini web:

Deci, să începem să creăm o pagină folosind programul: FrontPage 2003.
După instalarea și lansarea programului, deschideți fila: Fișier/creare, veți vedea un meniu care arată astfel:

Dă click pe link: Creați o pagină goală. Apare codul HTML pagină goală- acestea sunt etichetele necesare fără de care pagina nici măcar nu va fi afișată goală.
În colțul din stânga jos, puteți comuta modul de afișare a paginii, sunt disponibile următoarele moduri:

• Constructor- modul de creare a paginii, modul de proiectare vizuală.
• Cu separare- modul de creare a paginii cu o împărțire într-o jumătate a modului de proiectare în cealaltă jumătate;
• Cod- modul de creare a paginii folosind HTML.
• Vedere- modul de afișare a paginii în browser.

Pentru a crea o pagină Web, vom descompune pagina pe care o creăm în părțile sale componente:

Acum, înțelegem vizual din ce constă paginile părți și putem crea propria noastră pagină.

Să trecem la modul: Constructorși creați tabele în acest mod în conformitate cu structura pe care am desenat-o:

Editați | ×: dimensiunile tabelului, fundalul, lățimea chenarului, împachetarea textuluiși multe altele, folosind fila: Tabel/Proprietăți tabel/Tabel:

După crearea tabelelor, completați-le cu conținutul corespunzător:

• Antet pagină - imagine pentru antet.
• Meniu orizontal - link-uri catre alte pagini ale site-ului.
• Conținut - articole și imagini.
• Meniu vertical - link-uri catre alte pagini ale site-ului.
• Subsolul paginii - vizitați contoare și bannere.

Selectați tabelul antet și folosind fila: Inserați/Desenați/Din fișier... Să încărcăm o imagine de antet pregătită în prealabil în tabel:

Acum, să creăm meniu orizontal. În fiecare celulă de tabel scriem numele elementelor de meniu, iar după aceea schimbăm fundalul tuturor celulelor tabelului. am in în acest exemplu el este negru:

Să atașăm un hyperlink la fiecare element de meniu. Acest lucru se face prin evidențierea elementului de meniu și făcând clic tasta dreapta soareci:

În meniul care apare pentru adăugarea de hyperlinkuri, introduceți adresa hyperlink:

Meniul vertical se realizează exact în același mod ca și meniul orizontal. În câmpul de conținut scriem un articol ilustrat cu imagini. Apropo, folosind programul, este foarte ușor să creezi un meniu flash.

Pentru a afișa contorul „subsol” al vizualizărilor de pagină în tabel, adăugăm în tabel Java - Script de la serviciul furnizat de Yandex.

După ce ați completat toate tabelele, accesați modul de vizualizare a paginii: Cod. Copiați pe cel creat în vizual Editor HTML- codificați și inserați acest cod în câmpul: Cod șablon (HTML) .

Și nu uitați de toate imaginile (imagini, anteturi), trebuie să le transferați în găzduire și să reintroduceți calea către imagini în șablon. De obicei pe un server sub fisiere grafice creați un director numit imagini. În acest caz, calea către imagine va avea http://site-ul dvs /images/image.png- acesta este doar un exemplu ilustrativ, al tău poate fi diferit.

În câmp: Introduceți numele șablonului - Șablonul meu, iar în domeniu: Descriere - Cel mai bun gratuit Internet CMS . Apăsați tasta: Salvați. Așa că am creat un șablon unic pentru CMS MODx.

Când toți pașii pregătitori sunt finalizați, să trecem la analiza șablonului descărcat, evidențiind principalele părți repetate din acesta, cum ar fi antetul, subsolul, meniul, meniul din stânga, dacă există unul și trageți-le pe CMS Modx. La urma urmei, ne-am adunat aici pentru a ne da seama cum să ajungem șablon gratuit pentru Modx. Mai întâi de toate, deschideți șablonul Arbitrary, pe care l-am descărcat în articolul anterior și uitați-vă la ce fișiere html sunt acolo. Fișierele despre, contact, galerie, index, servicii sunt importante pentru noi. Fișierul de coduri ne interesează puțin, deoarece conține diverse unități tipografice și funcționale și trebuie accesat după cum este necesar. Vedem că subsolul, antetul și meniul paginilor sunt practic aceleași, doar pagina principală este diferită, deoarece Are un glisor sub meniu, așa că să începem cu el.

ÎN Administrator Modx accesați fila Elemente-Șabloane, vedeți șablonul BaseTemplate, redenumiți-l Acasă. Lăsăm conținutul șablonului după cum urmează:

[[$head]]




[[$header]]
[[$slider]]



[[$footer]]

[[$scripts]]

Acest cod va deveni baza pentru viitorul șablon principal, l-am împărțit în astfel de elemente componente pentru un motiv; Iată principalele părți care nu se schimbă de la o pagină la alta. Singurul element specific inerent celui principal este glisorul. Acum să creăm fiecare bucată în ordine și să ne dăm seama ce va conține și cum să-și adaptăm conținutul pentru Modx. Sper că toată lumea știe ce este o bucată cod html, care poate fi folosit de mai multe ori pe site-ul nostru. Pentru a evita copierea aceluiași cod de mai multe ori, sunt create astfel de bucăți.

Să începem cu capul. Să creăm mai întâi trei câmpuri TV pentru SEO, acestea sunt câmpurile seokeyw, seodesc și seoh1. Aceste câmpuri sunt necesare pentru a completa informații SEO despre paginile site-ului nostru. Folosind keyw ca exemplu, vă voi spune cum să creați un câmp și apoi urmați analogia. Accesați Câmpuri suplimentare - Câmp suplimentar nou, nume seokeyw, semnătură Cuvinte cheie, lăsați parametrii de intrare ca text implicit, disponibil pentru șabloane, marcați Acasă, nu există încă altele, dar aceste câmpuri ar trebui să fie în toate tipurile de șabloane. În continuare, creăm restul de 2 câmpuri și pentru ele categoria SEO, Câmpuri suplimentare - Categorie nouă. Acum să marchem chiar această categorie pentru câmpurile create.

Sa trecem peste. Accesați Elemente - Bucăți - Bucăți noi. Numele este head, apoi copiem acolo tot ce conține între etichetele head din șablonul nostru descărcat. Dar asta nu este tot, trebuie să rescrieți căile către fișiere, să puneți scripturile într-o bucată separată de scripturi înainte de eticheta de închidere a corpului și să adaptați titlul, cuvântul cheie și descrierea la Modx. Adăugăm active/ la toate căile, pentru că Ne amintim că imaginile, css și js au fost încărcate în acest folder. Apoi adaugam structura:

Este necesar pentru afișarea corectă a link-urilor site-ului și CNC. Apoi, ștergeți conținutul titlului și introduceți următoarea construcție:

[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]

Înseamnă că, dacă valoarea longtitle este goală, atunci scoatem pagetitle, în in caz contrar titlu lung. Acestea sunt câmpuri standard Modx pe care le are fiecare resursă. Sper că toată lumea știe care sunt aceste domenii. Apoi, prin analogie, introducem o construcție care implică câmpurile SEO pe care le-am creat deja, dacă valorile acestora sunt goale, atunci se va afișa titlul paginii standard, dacă este completat, apoi date noi;

Acum să mutăm toate scripturile (cu excepția jquery.min.js, deoarece aceasta este inițializarea jquery) într-o nouă bucată de scripturi, care se află înaintea etichetei body de închidere, acest lucru îmbunătățește viteza de încărcare a paginii, deoarece scripturile sunt trase în sus. puțin mai târziu, iar pagina nu se va „îngheța” mult timp inestetic. Ca rezultat, obținem conținutul fragmentului Head:

[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]





addEventListener("încărcare", function() ( setTimeout(hideURLbar, 0); ), false); funcția hideURLbar())( window.scrollTo(0,1); )

Și conținutul fragmentului de Scripturi:

nou WOW().init();

Următorul pas este crearea porțiunii de antet. Prin analogie cu porțiunea head, creăm o bucată și îi dăm numele antetului, apoi copiem conținutul blocului cu clasa antet din șablonul nostru Modx în el. ÎN acest șablon Nu există imagini în antet pentru care căile să fie rescrise, logo-ul conține text. Să schimbăm conținutul acestui logo cu cuvântul Test și să punem o bară oblică în link, acesta va merge la pagina principală. Următorul pas este crearea unui meniu pe Modx. Pentru aceasta puteți folosi Wayfinder sau pdoMenu, să luăm ultima varianta. A genera meniu simplu, ca într-un șablon, va fi suficient să folosim un apel foarte simplu, dar avem un anumit aspect pentru elementele de meniu, așa că folosim și șabloane pentru design. Și vom primi următorul cod pentru a ne afișa meniul:

[[!pdoMenu?
&parinti=`0`
&tplOuter=`@INLINE

[[+wrapper]]

Nu am pus șabloanele în bucăți separate pentru a economisi timp, dar acest lucru nu este interzis, atunci în parametrii de apel va trebui să introduceți doar numele necesare ale bucăților. Documentația completă despre PdoMenu este disponibilă la link, există o mulțime de parametri pentru ieșire, potriviti pentru aproape orice caz, dacă aveți întrebări, puteți oricând să cereți ajutor. Ca rezultat, obținem conținutul fragmentului de antet:

Comutare navigare




Test

[[!pdoMenu?
&parinti=`0`
&tplOuter=`@INLINE

[[+wrapper]]

Vă voi spune cum să faceți un slider pe Modx și să proiectați un subsol în lecția următoare, pentru a nu prelungi acest articol.

CMS MODX este un sistem prietenos cu dezvoltatorii, deoarece este un CMF (Content Management Framework) de încredere. În special, MODX este potrivit și pentru designeri:

WanChai este o temă MODX pentru responsive portofoliu de o pagină, construit pe Bootstrap 3 cu un design curat și modern. Are o secțiune de portofoliu personalizabilă cu o vizualizare extinsă și animație de glisare CSS3:

Șablon CMS MODX de o pagină bazat pe grilă () pentru agenții digitale, studio foto, afaceri mici sau liber profesioniști. Caracteristicile STYZO includ cod HTML5 și CSS3 corect, personalizare completă în Sistemul MODX , animații personalizate, portofoliu personalizat, plugin Cube Portfolio, AjaxForm, blog, lista de prețuri și Plugin JQuery Ciclu:

Design lucios, colorat, atrăgător de o pagină, care se ocupă de cele mai multe variabile șablon MODX și opțiuni de temă. Construită pe Bootstrap 3.0 și dezvoltată cu LESS, această temă vine cu un set de opțiuni care vă permite să controlați fiecare aspect al site-ului dvs. din partea serverului:

Șablonul ClubCube este alegerea perfecta pentru un club de noapte. Designul său modern, atrăgător atrage imediat atenția.

Acest șablon pentru un site pe MODX CMS folosește extraordinar, culori deschiseși elemente care sunt ideale pentru industria divertismentului.

ClubCube este un șablon HTML5 receptiv bazat pe grilă (Twitter Bootstrap Grid System). Vă permite să implementați funcționalități care vor:

• raportează evenimente;
• publica reportaje foto;
• Fă o rezervare;
• vizualizare meniu:

Neat este o temă MODX curată, cu încărcare rapidă, construită cu fișiere Sass modulare pentru rapid și configurare ușoară interfața cu utilizatorul. Tema folosește puternic partea de server MODX cu o cantitate mare parametri și câmpuri personalizate:

Tema are 3 șabloane, câmpuri de imagine personalizate, fișiere css/js/image și este ambalată în transport.zip. Acceptă meniurile Wayfinder și Formlt pentru fragmente de formular părere. Tema are două meniuri: primul este un meniu de derulare pentru un site cu o singură pagină, iar al doilea este pentru un site cu mai multe pagini (fragment de formular):

Este un profil/temă personală modernă de o pagină pentru MODX CMS CMF, construită pe Bootstrap 3, cu multe opțiuni de personalizare. Are o secțiune de CV cu aspect curat și grafică animată, o secțiune de portofoliu și o secțiune de catalog. Împreună cu fragmentele care vin cu șablonul, este ușor de creat propriul continut care se potrivește cu stilul temei:

TREDD STUDIO este un șablon MODX receptiv de o pagină bazat pe o grilă (Twitter Bootstrap Grid System) pentru agenții digitale, studio foto, afaceri mici sau liber profesioniști. Caracteristicile TREDD STUDIO includ: cod HTML5 și CSS3 corect, personalizare completăîn sistemul MODX, portofoliu personalizat, listă de prețuri, plugin JQuery Cycle:

Șablon de evoluție CMS MODX bazat pe grilă (Twitter Bootstrap Grid System) pentru muzică și grupuri muzicale. Include caracteristici și grafică excelente:

Tema are câmpuri personalizate pentru imagini atât în ​​secțiunea portofoliu, cât și în echipă, Formular de contact Suport pentru meniul Formlt și Wayfinder. Această temă este excelentă pentru site-uri web de portofoliu, pagini de destinație, aplicații web și prezentări ale organizațiilor creative. Caracteristici uniceȘi design modern. Cel mai bun pentru startup-uri:

Temă MODX multifuncțională de o pagină pentru pagina de destinație aplicație sau demonstrație de produs.

Construit cu cadrul Bootstrap 3, care include un responsiv, ușor de utilizat dispozitive mobile, sistem grilă. În consecință, se scalează la 12 coloane pe măsură ce dimensiunea ferestrei de vizualizare crește:

Este o temă CMS MODX curată, plată și elegantă „site în curs de dezvoltare”, cu un formular de abonare la știri funcțional pentru a construi un public. Puteți personaliza aproape orice aspect folosind panoul de setări ale temei MODX pagina noua. Vedeți captura de ecran de mai jos:

Temă modernă de portofoliu MODX, receptivă, de o pagină. Este potrivit pentru orice tip de afacere care trebuie să-și prezinte portofoliul.

Fișierele și imaginile principale se încarcă mai întâi (ecranul de încărcare), urmate de miniaturi (pagina încărcată) și apoi imagini mari de portofoliu (pagina complet încărcată).

Aspect complet receptiv care se adaptează perfect la rezoluțiile dispozitivelor mobile, tabletelor și PC-urilor:

Constă dintr-un șablon, câmpuri personalizate pentru cea mai mare parte a conținutului, fișiere css/js/image și ambalate într-un fișier transport.zip. Acceptă fragmentele Wayfinder și Formlt (meniu și formular de contact):

Aceasta este o temă CMS MODX complet receptivă, cu un design curat și minimal, care este potrivită pentru orice tip de creație și uz comercial. Baza este optimizată pentru dispozitive mobile și calculatoare personale, construit pe cadrul Bootstrap 3.

Cu siguranță, cei care au lucrat deja cu acest sistem știu că aproape orice șablon poate fi instalat pe acest motor.

O caracteristică distinctivă este că MODx folosește cele mai obișnuite șabloane html și există zeci de mii de ele pe Internet și, în plus, majoritatea sunt complet gratuite. Deci, dacă ați ales acest motor pentru proiectul dvs., atunci nu ar trebui să existe probleme cu designul.

Deoarece această serie de lecții este dedicată creării unui site web de cărți de vizită pe MODx, am încercat să selectez un șablon mai modern, care să fie universal și ușor de personalizat pentru companii din diverse direcții.

Vom dezvolta un site web bazat pe șablonul Retina - șablon gratuit de la producător - șablonuri de ciocolată. Îl puteți descărca de pe acest link - link către șablon.

Am ales versiune gratuită acest șablon, dar pentru a-l folosi trebuie să lăsați dreptul de autor al producătorului. Dar acest lucru nu este atât de important pentru noi. sarcina principală– învață să lucrezi cu șabloane.

Arhiva include următoarele fișiere.

Index.html – nu avem nevoie de acest fișier, dezvoltatorii l-au creat pentru a demonstra cum funcționează șablonul pe diferite dispozitive.

Și folderul „implicit”, la rândul său, are un director imbricat.

Dosarul „css” stochează stilurile și imaginile utilizate în această temă (dosarul „imagini”).

Dosarul „js” conține fișiere biblioteci jquery, precum și scripturi pentru conectarea glisorului la pagina principala site-ul.

Fișierul Home.html – principal fișier html Acesta este șablonul pe care îl vom folosi.

După cum puteți vedea, aici nu există gata făcute pagini interne, dar cu siguranță vă voi arăta cum să le adăugați în lecțiile următoare. Deocamdată, să ne ocupăm de principalul lucru.

După ce înțelegeți structura șablonului, puteți începe să lucrați cu sistemul. Toate șabloanele pentru MODx sunt stocate în folderul /assets/templates/, unde trebuie să încărcăm folderul cu șablonul. Voi numi directorul „Retina”. În acest folder încărcăm toate fișierele care se află în directorul „implicit”. Ar trebui să obțineți următoarele.

Acum accesați panoul administrativ al site-ului din secțiune și conectați-vă. Puteți face acest lucru la http://yoursite.com/manager.

Acum există un șablon cu date demonstrative, nu îl vom atinge, dar chiar dedesubt există un șablon numit „Șablon minim”. Acesta este ceea ce vom începe să guvernăm.

Completați două câmpuri:

• Nume șablon;
• Descriere.

Puțin mai jos, în câmp - „Cod șablon HTML", trebuie să introduceți codul paginii index.html, care se află pe serverul dvs. la adresa - /assets/templates/retina/home.html.

Iată cum am făcut-o.

Apoi faceți clic pe butonul „Salvați” din colțul din dreapta sus. Și mergem pe site să vedem ce am făcut.

După cum puteți vedea, structura site-ului este conectată, stilurile și scripturile nu sunt conectate. Faptul este că calea către toate aceste fișiere s-a schimbat. Vom repara asta acum.

Pentru a face acest lucru, accesați din nou panoul de administrare din secțiunea „Elemente” – „Gestionarea elementelor” – fila „Șabloane” și faceți clic pe editați șablonul „Acasă”.

Mai întâi, între etichete, scriem calea de bază pentru șablon, acest lucru se face folosind acest cod:

De asemenea, este necesar să corectați toate căile fișierelor din cod: stiluri, scripturi, imagini. Trebuie să verificați cu atenție toate elementele pentru ca șablonul să se conecteze.

O mică digresiune - pe CMS MODx, va trebui să lucrați mult cu codul, așa că vă sfătuiesc să instalați editorul Notepad++, este perfect pentru editarea șabloanelor.

Deci, de exemplu, dacă imaginea din șablonul original este conectată astfel.

Apoi, în MODx, trebuie să îl schimbați la acest design.

Adică, în toate căile adăugăm prefixul:

/active/şabloane/retina/

Dacă ați denumit folderul șablon în mod diferit, atunci „retina” trebuie schimbat în numele dvs.

Pentru a vă ușura munca, puteți utiliza editorul Notepad++ pentru a căuta cuvântul „src”. În acest fel puteți verifica dacă toate elementele sunt conectate.

După ce munca s-a terminat, salvăm șablonul „Acasă” și mergem pe site pentru a vedea rezultatul. Dacă ați făcut totul corect, ar trebui să vedeți următoarea imagine.

Asta e tot pentru astăzi, designul este conectat, dar vom înăspri toate celelalte elemente de design în lecțiile următoare.

Abonează-te la actualizări pentru a nu pierde nimic.