Deveniți un Superstar de ExpressionEngine în 5 zile Partea 2

Continuând de la partea 1 din această serie - unde am analizat pe scurt motivele pentru care ne-am gândit să plătim pentru o CMS, apoi a continuat să se instaleze EE și să aruncăm o privire în jur - acum vom fi mult mai adânc în ceea ce face ExpressionEngine un CMS atât de puternic. Mulți oameni sunt împiedicați de curba sa de învățare mai abruptă; tutorialul de astăzi va încerca să atenueze unele dintre aceste grijile.

Destul de înfricoșător, vreau să fac ceva bun!

Răcește-l, cowboy (sau cowgirl)! Din nefericire, trebuie să facem niște temele înainte de a ajunge la zgomotos. De departe, cea mai frecventă cauză de îngrijorare atunci când dezvoltatorii ridică ExpressionEngine pentru prima dată este terminologia utilizată de EE pentru a descrie structura și funcționalitatea acesteia. Nu sunt neapărat confuze, ele diferă foarte mult de orice altceva de pe piață. Odată ce ai luat-o pe tine dovleac dincolo de elementele de bază, sunteți pe cale să vă transformați site-urile existente xHTML / CSS valabile într-un design prietenos pentru ExpressionEngine.

Documentația EE este o resursă neprețuită. Marcați și trimiteți-le frecvent!

Weblogs - probabil nu ceea ce credeai ca sunt

Dacă sunteți deja obișnuiți cu alte sisteme de management al conținutului - în special WordPress și Joomla - șansele sunt probabil că credeți că știți ce este un blog. Ei bine, soarele, te înșeli. Un weblog ExpressionEngine nu este o descriere a tuturor informațiilor și paginile pe care sunt afișate aceste informații. Acesta este un concept foarte important pentru a vă înfășura capul.

Un "weblog" al ExpressionEngine constă pur și simplu din informații. În același mod în care ar trebui să vă separați conținutul și stilul cu privire la xHTML și CSS, EE vă permite să vă separați conținutul (blogurile) de stilul dvs. (șabloane - mai multe despre acestea în scurt timp). Trebuie să vă gândiți la un weblog ca la un container pentru informații stocate în baza de date utilizată de EE.

Documentația oficială o transmite bine - deci cine sunt eu să reinventez roata ...

Deoarece ExpressionEngine nu face presupuneri despre plasarea sau formatul conținutului unui Weblog, puteți prezenta conținutul Weblog-urilor pe paginile dvs. în mii de moduri, structurat și organizat într-un mod care face cel mai mult sens pentru conținutul dvs..

Șabloane - probabil exact ceea ce credeai că sunt

Șabloanele sunt modalitatea de afișare a datelor de către ExpressionEngine pe care le-ați stocat în blogurile dvs. web. Dacă, pentru o clipă, te gândești la zilele bune, când termenul de "criză financiară globală" sa referit la anii 1930, politicienii au făcut de fapt o muncă folositoare și paginile web ... (I digresa ...) erau statice, atunci poți să gândești a unui șablon ca pagină html statică. Chiar dacă ExpressionEngine este un CMS dinamic - nu există pagini html statice (bine, un fel de). Dacă vă gândiți la un fișier de șablon ca atare, veți începe să vedeți imaginea mai mare.

ExpressionEngine se ocupă de transformarea unui șablon într-o pagină web atunci când cineva vizitează site-ul dvs. Un șablon poate conține etichete care vă permit să "glisați în" conținutul din blogurile dvs. web (sau în altă parte, dacă este necesar).

Ajustați șabloanele

O caracteristică uriașă a EE este faptul că puteți să vă ajustați șabloanele din panoul de control. Multe CMS au această abilitate, dar pentru a fi sincer, implementarea este de obiceiîngrozitor. Modul EE de a vă permite să ajustați totul cu propriile etichete personalizate (mai multe despre acestea mai târziu) din interiorul panoului de control este, chiar sincer, minunat. Nu mai trebuie să vă deranjezi în timp ce editați un fișier, încărcați-l utilizând programul FTP ales, apoi mergeți la browser și revigorați-vă pentru a face un amendament. Panoul de control al EE și, în mod special, funcția "Editare șablon" este de primă clasă și, cred, este de neegalat. (Puteți să vă salvați șabloanele ca fișiere plate dacă doriți să le puteți edita în editorul ales, coda / dreamweaver etc. - vă vom trece prin acest proces într-un alt tutorial)

Grupuri de șabloane - Are exact ceea ce se spune pe tablă

Un ultim punct de referință cu privire la șabloane: puteți să le grupați după cum doriți. Un grup de șabloane este o colecție de șabloane asemănătoare despre care vă gândiți cel mai bine ca un dosar din sistemul dvs. de fișiere. S-ar putea să aveți un grup de șabloane care să "grupeze" toate șabloanele de pe site-ul dvs., cum ar fi informațiile din subsolul dvs., antetul și meniul. În cea mai mare parte, acestea sunt fișiere "statice" (goale cu mine aici), astfel încât să puteți apela grupul de șabloane "static_template_files" și să stocați șabloanele antetului, meniului și footerului în acel grup.

Vizualizarea unui șablon

Deoarece nu aveți de fapt pagini web fizice pe site-ul dvs., trebuie să le spuneți exact la ce doriți să vă uitați și apoi EE va determina ce șablon este afișat. Dacă o rupeți până la nucleul său, puteți accesa o anumită pagină după cum urmează:

http://www.MyWebsite.com/YourSystemFolderName/index.php/template_group_name/template_name/

Destul de simplu înainte eh? Deci, dacă aveți un grup de șabloane care este numit "Static" și doriți să vedeți șablonul dvs. "Footer", care se află în acel grup, ați căuta:

http://www.MyWebsite.com/YourSystemFolderName/index.php/Static/Footer/

Tag-uri EE - Magia începe

În cea mai mare parte, un fișier șablon arată ca o pagină HTML standard. Factorul discernământ este EE Tags: acestea vă permit să generați conținut dinamic în fișierele dvs. șablon și sunt mijloacele prin care veți putea utiliza toate caracteristicile uimitoare pe care le deține EE în șabloanele dvs. Această secțiune este destul de greu merge, vă rugăm să stick cu ea. Odată ce ați apucat elementele de bază ale blogurilor web, șabloanelor și, în sfârșit, etichetele, sunteți pe cale să deveniți un superstar de ExpressionEngine. Fiecare etichetă ExpressionEngine este conectată la un modul sau un plugin care vă permite să generați sau să afișați conținut.

Ce arata o eticheta EE?

O întrebare minunată! Elementele de bază absolută sunt după cum urmează: o etichetă este înconjurată de brațele curbate - una care arată astfel: ... - și de obicei are trei componente.

  1. Prima parte spune EE că scrieți o etichetă
  2. A doua parte este modulul la care te referi
  3. Partea a treia este funcția specifică din interiorul modulului pe care îl utilizați.

O etichetă arată astfel:

exp: weblog: înregistrări ... conținut ... / exp: weblog: înregistrări

Această etichetă îi spune ExpressionEngine să ruleze funcția "intrări" care se găsește în modulul "weblog". Destul de mult, toate etichetele au trei segmente cum ar fi acest lucru, însă, din când în când, vor exista pluginuri care au doar două. Doar gol în minte pentru moment.

Există două tipuri de etichete EE - etichete unice și perechi de etichete. Dacă urmărim analogia noastră HTML și CSS de mai devreme, ne putem gândi la etichete unice ca etichete html care se închid automat, cum ar fi o etichetă de imagine sau o regulă orizontală. Aceste etichete primesc a o singură bucată de informații și nu au o etichetă de închidere. Aceste tipuri de etichete vor fi cele mai cunoscute dezvoltatorilor WordPress, deoarece marea majoritate a codului WP se auto-închide "single" tag-uri.

Celălalt tip de etichete EE sunt perechi de etichete. Din nou, urmând analogia noastră anterioară, o pereche de etichete este aproape identică cu etichetele standard html, cum ar fi etichetele de titlu, paragraf sau div - aveți o etichetă de deschidere, un conținut și apoi o etichetă de închidere. Perechile de etichete sunt destinate să returneze mai multe informații. Exemplul de mai sus este o pereche de etichete - funcția "intrări" din cadrul modulului "weblog" are rolul de a returna mai multe înregistrări din blogul dvs. web (de fapt, în formatul său actual returnează toate informațiile din blogul dvs. web - variabilele corecte sunt în vigoare) - Veți folosi acest lucru, într-o formă sau alta, o mulțime când creați propriile șabloane (și vom vedea mai târziu în această serie atunci când vom crea propriile șabloane).

Variabile EE Tag

Cele mai multe perechi de etichete vor conține variabile - vă puteți gândi la acestea ca la o singură bucată de informații care este recuperată utilizând funcția invocată atunci când ați deschis perechea de etichete. Pentru acei dezvoltatori WordPress de acolo, vă puteți gândi la variabile în exact același fel în care lucrează în WordPress ... introduceți numele variabilei și informațiile pe care le-ați solicitat sunt afișate în șablonul dvs. Cel mai simplu exemplu pentru a înțelege acest lucru este utilizarea funcției weblog: intrări - pe care o vom folosi în forma sa cea mai de bază, astfel:

exp: weblog: înregistrări weblog = "filme" 

titlu


dacă rezumat
  rezumat
/dacă

corp

/ Exp: weblog: intrările

Aici am introdus câteva lucruri noi - Parametrii și Variabile condiționate. Vom descompune linia de cod de mai sus și vom explica ce se întâmplă.

exp: weblog: înregistrări weblog = "filme"

Am atașat un parametru la sfârșitul părții de deschidere a acestei perechi de etichete. Am spus companiei ExpressionEngine să invocăm funcția "intrări" din modulul "weblog" și apoi am spus că vrem să încărcăm blogul "filme". Aceasta înseamnă că numai informațiile stocate în blogul "filme" vor fi afișate între aici și sfârșitul perechii de etichete de închidere. Funcția "intrări" (și modulul weblog) pot lua mulți parametrii și le veți folosi pe cele mai multe dintre template-uri. Documentele oficiale pentru acest modul listează toți parametrii disponibili la adresa http://expressionengine.com/docs/modules/weblog/parameters.html și după cum puteți vedea, puteți "filtra" ceea ce doriți să fie afișat într-o mare măsură . Această pagină este, probabil, demnă de un marcaj prea!

titlu

Acum am ales blogul nostru, putem obține informații de la el - aici i-am spus lui ExpressionEngine să scoatem titlurile intrărilor pe care le avem în blogul "filme". Acesta este un exemplu de utilizare a unei variabile.

dacă rezumat
  rezumat
/dacă

Acest cod de cod, pentru mine și mulți alți dezvoltatori, evidențiază unul dintre punctele forte ale EE. Aceasta se numește a Variabila condiționată. După cum puteți vedea, am spus EE că, dacă există un rezumat pentru intrare, atunci ar trebui să îl afișăm. Variabilele condiționate sunt extrem de utile (și sunt unul dintre cele 3 tipuri de variabile disponibile în EE - celelalte două fiind Variabile singulare și Perechile variabile pe care o vom atinge mai târziu în această serie).

corp

Aceasta este similară cu variabila title de mai sus - dar în schimb suntem de ieșire corpul principal al intrării.

/ Exp: weblog: intrările

Acesta este sfârșitul perechii de etichete - nu trebuie să includeți parametrul, doar închidem eticheta respectivă - îi spunem EE că nu mai dorim să folosim funcția de intrări în modulul weblog.

Dar unde fac toate aceste lucruri interesante?

OK, deci acum știm cum arată anumite aspecte ale codului EE și avem o înțelegere a principiilor care stau la baza afișării informațiilor pe care le dorim. Dar cum să facem acest lucru într-un exemplu real al lumii? Să facem tocmai asta. Să ne creăm propriul șablon care afișează doar informațiile pe care le dorim!

Prima etapă este să vă conectați la panoul de control - facem acest lucru navigând la dosarul nostru de sistem. În prima parte a acestui tutorial am redenumit folderul de sistem "NotTheSystemFolder", așa că trebuie să mergem la http://www.MyWebsite.com/NotTheSystemFolder/ (oriunde ați instalat ExpressionEngine în partea 1) - aceasta va aduce accesul la autentificare pagină. Introduceți acreditările dvs. și veți fi la "tabloul de bord".

Dați clic pe "Șabloane" și vi se va afișa pagina de gestionare a șabloanelor. Această pagină este uimitor de utilă, dar la prima vedere este destul de complicată.

În stânga față avem grupurile de șabloane (amintesc-le?) - avem în prezent * site- și căutare în lista noastră (aceasta este dacă nu ați făcut nici o ajustare a setării standard). * site- este evidențiată și putem vedea șabloanele disponibile în prezent în acest "grup" spre mijlocul ecranului. Dacă faceți clic pe "căutare" în grupul de șabloane, șabloanele disponibile se modifică. Așa cum probabil ați ghicit, acest grup de șabloane afișează toate șabloanele folosite ori de câte ori cineva caută ceva pe site-ul nostru. Cele trei care sunt utilizate în prezent sunt "index", "rezultate" și "search_css" - dând clic pe titlul oricăruia dintre acestea afișează ecranul de șablon de editare. Cu toate acestea, pentru moment, nu faceți asta - vrem să ne întoarcem la grupul de șabloane * și să examinăm câteva dintre șabloanele de acolo - deci faceți clic pe * site-ul și șabloanele se schimbă din nou.

Între lista de grupuri de șabloane (cu site-ul și căutarea) și lista de nume de șabloane veți vedea o coloană numită "site" (atâta timp cât aveți selectat * grupul de șabloane de site) - meniul cu "Preferințe, Modificați grupul, ștergeți grupul și exportați șabloanele "este cel pe care îl dorim ... pe măsură ce creăm un nou șablon, în mod firesc vrem să dăm clic pe" Șablon nou "

Trebuie să denumim numele șablonului nostru - toate un singur cuvânt (linkurile și sublinierile sunt permise) - vom apela unul din noi "testTemplate" În continuare trebuie să selectați ce tip de șablon este - caseta derulantă afișează mai multe opțiuni, cum ar fi Web Pagină, pagină RSS, foaie de stil CSS, Javascript, statică și XML. Cele mai multe dintre acestea sunt destul de auto-explicative, dar vom trece prin unele dintre acestea într-un tutorial mai târziu. Deocamdată, creăm o nouă pagină web, așa că vom lăsa selectată ca aceasta (este implicită). Apoi, de asemenea, dați apoi opțiunea de a popula noul dvs. șablon cu date deja existente sau una din biblioteca dvs. Pentru claritate, vom selecta valoarea implicită care este "None - creați un șablon gol".

Acum sunteți readus la pagina de gestionare a șabloanelor cu un mesaj mic care spune că "Template Created" și veți vedea în listă că între șabloanele numite "Smileys" și "Trackbacks" este cea numită "testTemplate". Acum trebuie să faceți clic pe titlul acesteia pentru a fi aduse la pagina "Modificați șablonul". Veți vedea că (deoarece am spus EE să facă acest lucru) că șablonul este în prezent gol - nu există nimic în caseta "Editare" - dacă am fi selectat să umpleți șablonul cu date dintr-un alt șablon, atunci ați fi văzut un cod aici.

Veți vedea spre partea dreaptă sus faptul că există un buton verde mare care spune "Vizualizați șablonul redat" - făcând clic pe faptul că în acest moment este puțin inutil, deoarece veți obține doar un ecran mare gol. Cu toate acestea, când avem ceva codat, vom putea folosi acest buton pentru a examina șablonul nostru. Sub acest buton veți vedea caseta derulantă Istoric revizuiri - când salvați șabloanele dvs., veți avea o listă cu amendamentele pe care le-ați făcut aici, astfel încât să puteți reveni la un punct din trecut, dacă faceți o boob.

Sub caseta de editare (și chiar deasupra butoanelor "Actualizare" și "Actualizare și terminată") veți vedea o bară care afișează "Note despre șabloane" - este în prezent înrăutățită, dar dacă apăsați pe pictograma + bar, de fapt) veti avea o alta cutie deschisa - aceasta este o zona destul de utila pentru a face cateva note pentru acest model (mai ales daca colaborati la lucru pe un proiect).

Mai puțin vorbind! Mai mult!

Destul de tare, am făcut o mulțime de lucrări preliminare, să mergem în jos și murdar. Prima parte este destul de dreaptă, trebuie să creați o pagină HTML standard, cu anteturile normale și conținând elemente pe care le-am avea în aproape toate site-urile noastre standard.

    ExpressionEngine Template   

Deci, nimic nou aici - bogat standard xHTML pagină strictă cu un container div. (Notă: pentru scurtcircuit, nu am inclus o versiune completă a antetului meu standard cu metataguri etc.) Acum trebuie să obținem conținut într-un container astfel încât să punem împreună ceea ce tocmai am învățat mai sus, să folosim unele EE etichete pentru a trage informații din blogul nostru curent:

 
exp: weblog: înregistrări weblog = "default_site"

titlu

Acum autor relative_date

corp

Ultima editare: edit_date format = "% Y% m% d"


/ Exp: weblog: intrările

OK, deci avem destul de multe informații aici, dar trebuie să rămânem cu ea doar puțină vreme. Mergeți mai departe și copiați-l în ecranul "Modificați șabloanele" (faceți clic pe "testTemplate" din meniul "Șabloane" din tabloul de bord) și apoi butonul "Actualizare" urmat de butonul mare "Vizualizați șablonul" tocmai ați terminat.

Nu este exact cel mai frumos lucru pe care l-ai creat vreodată, mi-aș fi imaginat însă că lucrează acum. Ați tras o mulțime de informații din baza de date utilizând mai multe etichete EE și variabile unice (inclusiv permalink, title, email, relative_date și edit_date) și afișați, de asemenea, intrarea reală. În prezent, blogul nostru web (dacă nu l-ați modificat încă de la instalare) conține doar o postare, de aceea există o singură intrare afișată pe această pagină. Deci, ce se întâmplă dacă avem mai multe intrări în blogul nostru? Să aflăm - vom crea mai multe intrări de exemplu și vom fi obișnuiți cu ecranul de creare / editare în timp ce suntem la el.

Crearea și editarea

Ochii de vultur dintre voi vor fi observat că, în codul de mai sus, am folosit blogul "default_site" atunci când am fost tras în intrarea noastră folosind modulul weblog. Nu este nevoie de un om de știință de rachete pentru a determina că blogul care este instalat în mod implicit se numește "default_site" - așa că din panoul de control, când plasăm cursorul peste "Publish" (din stânga sus), vedem și "Weblog implicit" ca "Edit Weblogs" - acest lucru are sens perfect! Deocamdată, nu ne vom deranja de blogurile de editare (vom ajunge la asta relativ curând), așa că dați clic pe "Site-ul Web implicit" și vom fi la ecranul "Publicați o nouă intrare".

Acum, trebuie să mergem mai departe și să completați toate casetele de intrare - titlul, rezumatul, corpul și textul extins - să includă textul care vă va permite să identificați această intrare ca fiind prima pe care am creat-o (poate că poate un titlu de " Prima noastră intrare "de exemplu) - în acest fel vom putea vedea ordinea de afișare puțin mai târziu.

Către partea de sus a acestei pagini veți vedea un meniu cu 7 opțiuni (Formular de publicare, Data, Categorii, Opțiuni, Trackback-uri, Ping-uri, Afișare totală) - trebuie să fiți relativ familiarizat cu acestea din prima parte a acestui tutorial. Dați clic pe Categorii și vi se va afișa! Dacă veniți dintr-un alt CMS, veți fi familiarizați cu aceste categorii, dacă nu, categoriile sunt în esență un "container" pentru intrările dvs. - acestea oferă o scurtă descriere a ceea ce este vorba despre noua dvs. înregistrare. Categoriile implicite, după cum veți vedea, sunt "Blogging", "News" și "Personal". Selectați "Personal" pentru această intrare și apoi faceți clic pe "Trimitere" (care este lângă "Previzualizare" și "Salvare rapidă" în partea dreaptă). Ar trebui să fiți întâmpinați de un mesaj "New Entry Submitted" și de o versiune redată a ceea ce ați tastat (cunoscut sub numele de "Vizualizare intrare".

Atunci, să vedem ce ai făcut! Fie mergeți la "Șabloane> testTemplate> Vizualizați șablonul redat" sau într-o filă nouă de browser (utilizați un browser activat în tab-uri, nu?) Mergeți la http://www.myWebsite.com/NotTheSystemFolder/index .php / site / testTemplate / - ar trebui să puteți vedea intrarea dvs. nou introdusă peste valoarea implicită! Minunat!

Hei! Unde este textul meu extins

Buna observatie! "Rezumatul" a dispărut de asemenea. Cred că îi vrei înapoi? Să terminăm acest tutorial mamut, descoperindu-ne cum să facem asta. După cum probabil ați ghicit, rezumatul și textul extins nu au "dispărut" - este doar faptul că șablonul nostru nu spune EE să le afișeze când îl vedem. Deci, să navigăm la ecranul Editare șablon (Șabloane> testTemplate) și să facem câteva modificări minore după cum urmează:

 
exp: weblog: înregistrări weblog = "default_site"

titlu

Acum autor relative_date

rezumat
corp extins

Ultima editare: edit_date format = "% Y% m% d"


/ Exp: weblog: intrările

Deci, nimic important aici - semantica nu este exact la fața locului, dar am pus în acele etichete suplimentare doar pentru a evidenția ceea ce am făcut. Deci, dacă salvăm și vizualizăm acest lucru, veți vedea acum că pentru articolul pe care l-am creat, rezumatul și textul extins sunt afișate! Perfect! Un ultim lucru care ne va ajuta mai târziu în această serie este pentru noi să afișăm ce categorie se află intrările noastre. Eticheta categoriilor în EE este unică, pur și simplu datorită faptului că o înregistrare poate fi în mai multe categorii - este o etichetă pereche și conține o singură variabilă în interiorul lor, astfel:

 categories category_name / categories

Deci, puteți folosi acest cod de cod oriunde doriți - o să-l deschid la sfârșit, înfășurat într-un link astfel încât dacă un utilizator face clic pe numele categoriei, aceștia sunt duși la o pagină care le arată toate intrări care se încadrează în această categorie, ceea ce înseamnă ceva asemănător:

 
exp: weblog: înregistrări weblog = "default_site"

titlu

Acum autor relative_date

rezumat
corp extins

Ultima editare: edit_date format = "% Y% m% d"

Postat în: categories category_name / categories


/ Exp: weblog: intrările

S-a terminat? Spune-mi că sa terminat!

Bine, sa terminat. Acesta este un tutorial epic, dar când vom trece prin exact ceea ce sa realizat, cred că veți fi foarte mulțumiți, am:

  • A discutat o anumită terminologie EE
  • Cum să vizualizați șabloanele
  • Magia etichetelor EE
  • A creat un șablon foarte simplu
  • Folosit mai multe variabile EE, perechi de etichete și parametri
  • Creat un conținut din Panoul de control
  • A făcut mai multe cești de cafea

Ce urmează?

Mai avem încă multe de făcut în celelalte trei zile - șablonul actual este un pantaloni foarte buni, așa că ar trebui să-l mătrăm puțin (o mulțime). De asemenea, trebuie să învățăm cum să creăm un șablon complet; modificați setările din panoul nostru de control; aflați cum să utilizați corect alte module; și vorbește despre unele dintre caracteristicile cu adevărat utile pe care le posedă EE. De asemenea, vom explora unele dintre modulele și alte caracteristici care nu sunt disponibile în versiunea gratuită "de bază" a EE - deci stați la dispoziție în cursul următoarelor trei postări! Vă mulțumim pentru lectură; vă rugăm să aveți întrebări în comentariile de mai jos.

  • Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.


Cod