Acest site este destinat, în primul rând, celor care doresc să facă web-development. Vă puteți familiariza cu materialele de pe site-ul clădirii, de la proiectarea designului, structura și finisarea promovării site-urilor gata făcute. În curând, site-ul ar trebui să devină o colecție vastă de materiale utile, sfaturi, lecții, servicii și linkuri pentru a ajuta atât un dezvoltator web experimentat, cât și un începător.
Citiți mai multe despre acest blog
Curând, blog-ul meu va fi serie de articole „Crearea unui site de la zero“, „Asigurați-flexibil blog funcțional“, „Internet-magazin de pe CMS / CMF MODx» și multe altele. Nu treceți.
Urmăriți apariția de articole noi pe site. RSS feed.
În lecția de astăzi voi descrie în detaliu modul de afișare a anunțurilor de note de blog cu o defalcare pe pagină, în timp ce în practică vom lua în considerare funcționarea unor extensii MODx suplimentare.
Atenție: cei care își încep cunoștința cu MODx, va fi util să citiți mai întâi câteva lecții din cursul precedent cu privire la lucrarea fragmentului Ditto și la implementarea navigării paginilor. Din aceste lecții, veți afla mai multe despre lucrarea fragmentelor Ditto și dittoSplitPagination în detaliu prin crearea unui flux de știri cu o paginare. Aceste abilități vă vor fi utile în trecerea acestei lecții. De asemenea, va fi util pentru începători să citească despre parametrii TV în MODx.
Astfel, după executarea consecventă a acțiunilor indicate în aceste nouă puncte, vom avea ca rezultat rezultatele anunțurilor articolelor de blog cu funcționalitatea și designul necesar.
Să facem o descriere detaliată a fiecăruia dintre pașii de mai sus.
Creați eticheta fragmentuluiLinks și etichetele pentru parametrii TV
Efectul de ieșire dinamic al etichetelor pentru un articol din MODx Evolution este convenabil să fie implementat cu ajutorul tagLinks pentru fragmente. Acest fragment va afișa o listă de etichete pentru notă ca referință, care va fi înscrisă cu o virgulă când se editează resursa în parametrul TV. Pentru a utiliza tagLinks, trebuie mai întâi să creați un parametru TV cu tipul de introducere de text.
Creați un tag numit TV. Pentru aceasta, mergeți la fila Elemente → Gestionare elemente → Setări (TV) → Setare nouă (TV).
Când creați un parametru TV, completați următoarele câmpuri:
Numele parametrului este etichetele.
Titlu - etichete.
Descriere - Listă de etichete pentru note din blog. Separă cu virgule.
Tipul de intrare - text.
Accesul la șablon - Pagina internă. Atenție: asigurați-vă că bifați șablonul, care poate utiliza acest parametru (TV).
După ce creați etichetele pentru parametrii TV, începem să creăm un nou tagLinks pentru fragment. Accesați fila Elemente → Gestionare elemente → Fragmente și faceți clic pe linkul "Fragment nou".
La crearea se completează următoarele câmpuri:
Numele fragmentului este tagLinks.
Descriere - etichete de ieșire în postări.
Codul fragmentului (php) - aici copiem conținutul acestui fișier. De asemenea, puteți descărca codul fragmentului la sfârșitul lecției în secțiunea cu fișiere pentru lecție.
Apelul la fragmentul creat va apărea în șablonul ieșirii anunțului, pe care îl vom crea ulterior. Apoi voi descrie parametrii principali ai acestuia.
Instalați plug-in-ul TVimageResizer și creați imaginea postului TV
Completați următoarele câmpuri atunci când creați un televizor:
Numele parametrului este imagine-post.
Titlu - Imagine.
Descriere - Imagine pentru note.
Tipul de intrare - imagine.
Componenta vizuala este imaginea. Atenție: când selectați această componentă vizuală, veți avea câmpuri suplimentare pentru specificarea atributelor de imagine. Vă recomandăm să completați imediat câmpul Text alternativ, pentru a nu lăsa golul atributului altul la ieșirea imaginii, deoarece caz în care codul dvs. nu se va potrivi standardelor web. Propun să scriu acolo [+ pagetitle +], adică În atributul alt pentru eticheta IMG, se va preciza titlul paginii.
Accesul la șablon - Pagina internă. Nu uitați să includeți acest marcaj.
După crearea imaginii postului TV, vom instala plug-in-ul TVimageResizer.
Înainte de a crea un plug-in în sistemul de management, trebuie să copiați fișierele plug-in în folderul corect. În directorul assets / plugins / /, creați folderul tvimageresizer și despachetați conținutul arhivei în el.
Să determinăm ce trebuie să folosim pluginul TvimageResizer în cazul nostru particular și ce vrem să obținem la ieșire.
Să presupunem că avem nevoie pentru a crea miniaturi automat două proporții și dimensiuni diferite: 500x200px - pentru anunțuri și note 40x40px - pentru utilizare în derivarea note aleatorii din coloana din dreapta a site-ului. Aceasta înseamnă că pentru fiecare imagine atașată la televizor vor fi create două miniaturi, care vor fi plasate în foldere diferite.
După ce ați copiat conținutul arhivei în dosarul cu pluginul, vom crea un plugin în zona administratorului site-ului. Elemente → Gestionare elemente → Plug-inuri → Creați un plug-in.
Când creați un plugin nou, completați câmpurile:
Numele pluginului este TVimageResizer.
Descriere - Plugin pentru crearea de miniaturi ale imaginilor atașate utilizând parametrii TV.
Codul Plugin (php) - necesită MODX_BASE_PATH.'assets / plugins / tvimageresizer / TVimageResizer.inc.php '; (adică, utilizând această linie, specificați locația fișierului TVimageResizer.inc.php)
Mergeți la următoarea filă "Configurare" și în câmpul "Configurarea plug-in-ului" și copiați următorul model.
tv_ids = ID-uri TV; șir; dirs = dosare Thumb; string; mediu
După aceasta, veți avea un tabel cu o listă de parametri și valorile specificate ale acestor parametri.
Să trecem prin principalii parametri descriși în documentația pluginului, care se află în dosarul cu plugins / plugins / tvimageresizer / docs / readme_en.txt.
ID-uri TV - identificatori ai parametrilor TV pentru care aveți nevoie de capacitatea de redimensionare (dacă există mai multe, apoi introduceți o virgulă).
În sensul acestui câmp, introduceți ID-ul postului imagine nou creat. Asigurați-vă că ați specificat corect codul, altfel pluginul cu imaginile dvs. nu va funcționa. Puteți vedea codul de identificare al oricărui televizor din fila Elemente → Gestionare elemente → Setări (TV). Numărul indicat în paranteze de lângă numele parametrului este codul său.
Dosarele miniatură - dosarul în care va fi încărcată copia imaginii. Puteți specifica mai mult de un separator "
mini, cele mai tari sunt numele dosarelor în care vor fi plasate miniaturi de diferite dimensiuni. Plugin-ul creează automat dosare cu numele respective.
Lățimea - lățimea miniaturii create. Puteți specifica mai mult de un separator "
40, adică miniatură creată care va fi plasată în mediul de folder, lățimea va fi de 500 de pixeli, iar miniatura care merge în directorul mini va avea o lățime de 40 de pixeli.
Înălțime - înălțimea imaginii create. Puteți specifica mai mult de un separator "
40, indicând astfel înălțimea pentru miniaturile care se găsesc în medii, respectiv în mini-foldere.
Decupare - imagini cu culturi (creați exact pe dimensiunile specificate fără reducere). crop_resized - reduce + culturi; fill_resized - reduc proporțional, umplând câmpurile cu culoarea (Culoarea fundalului).
Colțul procentului de tăiere - colțuri rotunde (dimensiunea unghiului în procente). Puteți specifica mai multe pentru diferite imagini prin separatorul "
Caietul de imagini pe hârtie (png) - suprapuneți filigranul (calea către imaginea PNG). Puteți specifica mai multe pentru diferite imagini prin separatorul "
Salvați numai numele - salvați numai numele fișierului imagine în câmp.
Calitate - calitatea imaginii.
Culoarea fundalului - culoarea de fundal (este luată în considerare la rotunjirea colțurilor).
Redenumiți imagini - redenumiți imagini. Toate imaginile vor fi redenumite cu data: d.m.y_H.i.
Oglinda - efectul reflexiei oglinzilor.
Actualizați toate imaginile - actualizați toate imaginile făcând clic pe butonul "Ștergeți memoria cache".
După ce ați completat configurația pluginului, accesați fila următoare "Evenimente sistem" și selectați 2 evenimente de sistem pe care pluginul ar trebui să le monitorizeze. Bifăm OnSiteRefresh și OnBeforeDocFormSave.
Creați datearus fragment
Completați următoarele câmpuri:
Numele fragmentului este datarus.
Fragment de cod (php) - aici am plasat conținutul acestui fișier. De asemenea, puteți descărca codul fragmentului la sfârșitul lecției în secțiunea cu fișiere pentru lecție.
În acest stadiu, am instalat principalele extensii de care avem nevoie atunci când creăm un șablon pentru afișarea de note.
Înregistrați etichete pentru note de blog și atașați imaginea utilizând parametrii TV
Pentru a putea vedea versiunea completă a anunțului articolelor, trebuie să completați o listă de etichete pentru fiecare articol din blog și să atașați imaginea. Realizăm editarea resurselor din arborele de documente MODx pentru a umple parametrii TV liberi.
După umplerea parametrilor TV "Imagine" și "Etichete", vom crea un șablon de ieșire Ditto.
Creați un șablon de ieșire Ditto
Să ne creați un nume bucată, de exemplu, minipost și puneți-l într-o structură făcută pe baza de aspect HTML bucată principale folosind etichete speciale MODX, parametrii de ieșire TV și invocați fragmentele create anterior.
Puneți în bucata de minipost următorul cod:
[+ pagetitle +]
[[TagLinks? id = `[+ id +]` tv = "tag-uri" separator = `,` element = `span` fap = `1` calea = `index.html` etichetă = ``]]
[+ imagine-post +]
[+ introtext +]
În acest șablon, se utilizează următoarele etichete speciale MODx:
[+ pagetitle +] - numele resursei înscrise în câmpul "Header", care este completat când se editează resursa.
] - Adresa URL a paginii.
[+ introtext +] - o scurtă descriere a paginii, conținutul câmpului "Abstract (introduction)", pe care îl completezi la editarea resursei.
[+ author +] - numele utilizatorului care a creat nota. Pentru a afișa numele sau pseudonimul de care aveți nevoie în mod implicit, faceți clic pe fila Utilizatori → Gestionați managerii și completați câmpul "Nume complet" la editarea profilului managerului. Conținutul acestui câmp va fi afișat pe pagina de Internet.
Rețineți că în tag-uri speciale de ieșire șablon MODX numit de [+ TAG_NAME +] design, în timp ce pe pagină, în „Conținutul resursei“ și site-ul șabloane pentru a apela MODX etichete speciale folosite pentru constructii [* TAG_NAME *].
În locul unde vor fi plasate etichetele pentru notă, apelul la legătura de etichetă nou creatăLinks este plasat:
[[TagLinks? id = `[+ id +]` tv = "tag-uri" separator = `,` element = `span` fap = `1` calea = `index.html` etichetă = ``]]
În loc de o imagine stub de 500 cu 200 de pixeli, introducem un apel pentru parametrii TV. Așa cum ne amintim, folosind plug-in-ul TVimageResizer pe baza parametrului de imagine atașat la acest televizor, va fi creată automat o miniatura de dimensiuni necesare.
[[Datarus? MyDate = `[+ pub_date +]`]]
[[Ditto? tpl = `minipost` rezuma = "7" adâncime = `5` ascundeFoldere = `1` paginate = `1` dateSource = `pub_date` sortBy = `pub_date` dateFormat = `..% m.% y în% H:% M` tagData = `tag-uri ' tagDelimiter = `,`]]
Parametrii trecuți din apelul pentru fragmente:
tpl = `minipost` - trimiteți fragmentul numele bucății în care este stocat șablonul de ieșire generat;
paginate = `1` - permite paginarea înregistrărilor;
tagData = `tags` este numele parametrului TV în care sunt stocate etichetele pentru articole;
tagDelimiter = `,` este un caracter care va fi un delimiter între etichete.
Creați fragmentul dittoSplitPagination
Avem nevoie de acest fragment pentru a rupe lista cu o elipsă cu un număr mare de pagini. " “.
Mergem la fila Elemente → Gestionare elemente → Fragmente → Fragment nou.
Completați câmpurile următoare
Numele fragmentului este dittoSplitPagination.
Descriere - fragment pentru paginare.
Codul fragmentului (php) - aici copiem conținutul acestui fișier. De asemenea, puteți descărca codul fragmentului la sfârșitul lecției în secțiunea cu fișiere pentru lecție.
Crearea unei pagini de navigare
După crearea fragmentului, vom edita fragmentul principal în care am plasat apelul Ditto și adăugăm următorul cod imediat după structura apelului pentru fragmente:
Ca rezultat, partea principală ar trebui să aibă următoarea structură:
Pentru a verifica modul în care funcționează fragmentările de paginare, puteți introduce temporar parametrul rezuma un număr mic în apelul pentru fragmente, de exemplu, 1.
Ie înregistrarea anunțurilor articolelor abordate de tipul de care avem nevoie. Rămâne să corectăm câteva puncte.
Acum vom edita fișierul CSS pentru a înregistra stilurile pentru înregistrare pe pagina de navigare și etichete de pagină.
Adăugați stiluri în fișierul assets / templates / blog / css / coolblue.css pentru a crea navigarea prin pagini (să prescrieți culorile de fundal și text, cadrele de afișare, dimensiunile fontului, liniuțele și alte stiluri CSS).
Acum, să prescrieți stilul pentru marcare. Descoperim stilurile coolblue.css din CSS cu descrierea clasei post-info.
și înlocuiți acest cod cu următoarele:
Aici atribuim culoarea, mărimea fontului, indentsul, stilurile atunci când treceți peste link și adăugăm un fundal cu imaginea etichetei.
Fișierul CSS modificat pe care îl puteți descărca la sfârșitul lecției în secțiunea cu fișierele din lecție.
Am citat stilurile CSS ca un exemplu, dar puteți face un design de stil pentru oricine vă va plăcea. Principalul lucru este să ai abilități CSS de bază.
Rezultatul lecției
Fișierele pentru lecție
Articole similare
Trimiteți-le prietenilor: