Noțiuni de bază cu Umbraco Partea 3

În această parte a seriei vom crea restul nodurilor noastre de conținut (pagini) și vom începe să adăugăm macrocomenzile XSLT pentru a gestiona lucruri cum ar fi construirea navigației site-ului și popularea element.

Disponibile și în această serie:

Noțiuni de bază cu Umbraco: Partea 1
Noțiuni de bază cu Umbraco: Partea 2
Noțiuni de bază cu Umbraco: Partea 3
Noțiuni de bază cu Umbraco: Partea 4
Noțiuni de bază cu Umbraco: Partea 5

Crearea restului de noduri de conținut

Mai întâi vom adăuga restul nodurilor noastre de conținut. Amintiți-vă, tipurile de documente + șabloane + noduri de conținut = pagini. Pentru a vedea back-end-ul, pervazul site-ului trebuie să fie deschis în Visual Web Developer Express (VWD). Faceți clic dreapta pe default.aspx pagina din mâna dreaptă Soluție Explorer și alegeți Vizualizați în browser. Pagina de start a site-ului trebuie apoi încărcată. Pentru a accesa back-end-ul, înlocuiți-l default.aspx în bara de adrese cu umbraco, ar trebui să vă duceți la ecranul de conectare și apoi la back-end după ce ați introdus datele dvs. de acreditare.

Toate paginile dintr-un site ar trebui să fie create ca noduri copii ale paginii de pornire pentru ca XSLT-ul să funcționeze corect. Faceți clic dreapta pe Acasă nod în panoul din stânga sus al spate-end și alegeți Crea din meniul drop-down. Acest lucru ne va da Crea dialog; în Nume introduceți câmpul Despre noi. Alegeți Tip document caseta de selectare ar trebui să fie deja completă cu primul tip de document disponibil - Conţinut - acest lucru este bine, faceți clic pe Crea butonul din partea de jos și noul nod va fi creat ca un nod al copilului Acasă nodul:

Introduceți un text în textarea, apoi treceți la Proprietăți fila și introduceți Totul despre noi în Titlul paginii , apoi salvați noul nod folosind pictograma disc din bara de instrumente. Apoi vom crea Lista de știri pagină; faceți clic dreapta pe Acasă nod și alegeți Crea din nou. introduce Știri ca nume și alegeți Lista de știri Introduceți documentul în caseta de selectare. Această pagină nu are proprietăți personalizate (va fi construită utilizând o macrocomandă), astfel încât nodul se va deschide pe Proprietăți tab. introduce Știri de companie în Titlul paginii și faceți clic pe pictograma de salvare și publicare.

În continuare putem crea câteva știri; de data aceasta faceți clic dreapta pe Știri nod și alegeți Crea. Adăuga Articolul știri 1 în Nume câmp și faceți clic pe Crea (tipul de document corect va fi deja selectat). Mai avem câțiva câmpuri pentru a finaliza acest timp; mergeți și alegeți o dată, adăugați o Titlu si Story Text. De asemenea, am putea să adăugăm o altă imagine în biblioteca media și să o selectăm utilizând selectorul media (deși imaginea nu este obligatorie cu Articole de știri). Adăugați, de asemenea, a Titlul paginii pe Proprietăți tab. Odată ce acest lucru este făcut creați un altul Articol de știri, și completați din nou câmpurile. Asigurați-vă că există o cantitate decentă de text în zona de text pentru fiecare poveste de știri, deoarece vom trage unele din fiecare Articol de știri in pentru a construi Lista de știri pagină.

Deci, acum am creat o Pagina de conținut, Lista de știri pagina și câteva Articole de știri. Tot ce rămâne este să creezi niște Panouri Hero pentru a fi afișate pe pagina de pornire. Faceți clic dreapta pe Acasă nod, apoi adăugați Panoul 1 ca nume al noului nod, și alegeți Grupul eroilor Tipul documentului. Utilizați textarea pe nodul nou creat pentru a adăuga un anumit text panoului. De asemenea, ar trebui să ne asigurăm că trecem la Proprietăți și bifați Umbraco ascunde în navigație Caseta de bifat. Creați mai multe panouri în acest fel, poate folosind un text diferit sau ceva de diferențiere între diferitele panouri. În acest moment, back-end-ul nostru ar trebui să apară după cum urmează:

Crearea unui macro

Acum, că paginile noastre au fost create, putem începe să scriem macrocomenzile XSLT care vor construi aspecte mai complexe ale site-ului, cum ar fi navigația, lista de știri etc. Dacă deschidem BasePage.master fișier în VWD, primul elementul pe care îl găsim este titlul paginii macro. Vom construi acest lucru primul, deoarece este destul de direct înainte și ar trebui să ofere o introducere de bază pentru XSLT.

În back-end-ul Umbraco, mergeți la Dezvoltator secțiune, faceți clic dreapta pe folderul XSLT și alegeți Crea. În dialogul care apare adăugați titlul paginii dupa cum Nume de fișier și lăsați caseta de selectare setată la Curat. Rețineți că Creați macro caseta de selectare este deja bifată. Apasă pe Crea buton. Va fi creat noul fișier XSLT și macrocomanda acestuia. Selectați macrocomanda (va fi găsită în macrocomenzi folder în copacul nodului) și schimbați Alias din macro de la Titlul paginii la titlul paginii (pentru consistență).

Acum, reveniți la VWD și deschideți fișierul XSLT în Soluție Explorer la dreapta. Noul fișier XSLT pe care l-am creat în Umbraco ar trebui să fie listat. Desigur, putem adăuga codul XSLT direct prin Umbraco, totuși, din motive Intellisense, este util să-l scriem în VWD. Deschideți fișierul XSLT, în jurul mijlocului fișierului va exista un comentariu care spune , eliminați acest comentariu și înlocuiți-l cu următorul cod:

Salvați fișierul XSLT. În esență, XSLT este folosit pentru a transforma XML în oricare alt tip de XML sau în alte formate XML, cum ar fi XHTML. Datele introduse în câmpurile din back-end-ul Umbraco sunt stocate în bază de date ca XML, astfel încât să putem folosi XSLT pentru a procesa acest XML și transforma-l în (X) HTML pentru a fi afișat pe paginile noastre. Înainte de a intra în detaliu despre ceea ce face codul de mai sus, trebuie doar să ne uităm la câteva concepte de bază pentru lucrul cu XSLT.

Mai întâi de toate, imediat după există un parametru XSL () numit element pagina curenta. Aceasta va fi setată la oricare pagină care "apelează" fișierul XSLT, astfel încât dacă un vizitator vizionează pagina de pornire a site-ului, pagina curenta parametrul va fi setat la Acasă nod din spate. Dacă o pagină de conținut, cum ar fi Despre noi pagina este vizualizată pagina curenta parametrul va fi setat pe acea pagină.

Pe următoarea linie avem șablonul XSL (), care este setat să se potrivească / ceea ce înseamnă că ar trebui să se potrivească tuturor elementelor și atributelor XML din document (reprezentarea XML stocată a nodului din back-end).

Acum, să ne uităm la codul pe care l-am adăugat la element. Mai întâi folosim element pentru a testa dacă pagina curenta (în parametrii XSLT trebuie să înceapă cu $ caracter) conține o valoare pentru titlul paginii element. Acesta este titlul paginii element în nodul paginii noastre, nu în titlul paginii macro apropo. Dacă conține o valoare, următoarea linie, ne permite să selectăm conținutul titlul paginii proprietate. Apoi folosim element pentru a specifica o cratimă de utilizat ca separator.

În cele din urmă, folosim element din nou pentru a selecta numele domeniului proprietate. În acest element folosim o etapă XPath care constă din axă strămoș-sau auto- pentru a selecta toate nodurile strămoșilor din pagina curenta la fel de bine ca pagina curenta, si :: * nodetest pentru a selecta toate atributele strămoșilor selectați. Am restrâns acest lucru în special la numele domeniului proprietatea pe care am stabilit-o pe Acasă folosind nodul /numele domeniului predicat.

Vedeți acum pagina de pornire a site-ului, iar titlul paginii ar trebui să fie automat setat la valoarea pe care am introdus-o numele domeniului proprietate. Dacă vedem pagina despre noi (doar adăugați /about-us.aspx până la sfârșitul adresei URL localhost din bara de adrese), vom constata că titlul este setat la Totul despre noi - Compania. Numele paginii - numele site-ului este formatul preferat pentru titlurile SEO.

În acest exemplu, paginile care nu au titlul paginii setul de proprietăți va reveni pur și simplu la numele domeniului proprietate. Unii autori macro adaugă un nivel suplimentar de protecție și dacă titlul paginii nu este setat cădea înapoi la nodeName in schimb. Acest lucru este util dacă clientul va uita să setați titlul paginii atunci când adaugă noi pagini pe site, dar înseamnă că titlul paginii ar putea ajunge în nume de fișiere de tip camel. Există argumente pentru și împotriva acestei metode. Voi lăsa la latitudinea dvs. să decideți dacă acest lucru este necesar sau nu.

Adăugarea mai multor macrocomenzi

Să adăugăm mai multe macrocomenzi; apoi ar trebui să construim navigația pentru site, astfel încât să fie mai ușor să se miște între pagini. Această macrocomandă va fi mult mai complexă decât titlul paginii maco pe care tocmai ne-am uitat la. Am lăsat o anumită marjă în BasePage.master fișier, aceasta este structura pe care o vom termina odată ce am terminat. Eliminați acest lucru din pagina principală și adăugați-o element în locul său:

Acum creați un nou fișier XSLT (și, prin urmare, un macro) numit topNav. În VWD, deschideți noul fișier XSLT și adăugați următorul cod imediat după pagina curenta parametru:

Apoi, adăugați următorul cod la element:

     pe    
     ultimul     pe

Salvați fișierul. Mai întâi, am setat o variabilă care se potrivește cu nodul rădăcină al site-ului, care este pagina principală. Pentru a selecta numai pagina de pornire, navigăm din pagina curenta (folosind $ currentPage parametru) prin toți strămoșii folosind strămoș-sau auto- axa și :: * nodetest și predicat, verificând dacă nodul are @isDoc (acest lucru este adăugat tuturor nodurilor de pagină de către Umbraco) și că este la nivelul 1 (un alt atribut adăugat de Umbraco). Acest lucru ne va aduce nodul rădăcină al site-ului, care este pagina de pornire.

Apoi, în interiorul creați mai întâi containerele exterioare pentru meniul nostru de navigare, în special

și

element și primul element de ancorare. Am setat href a ancorei folosind Umbraco NiceUrl funcția bibliotecă, care acceptă un document id ca argument. Furnizăm id a nodului rădăcină, folosind funcția noastră $ rootNode variabile (cum ar fi parametrii, variabilele sunt prefixate cu $ caracter. Atributele sunt prefixate cu @ în XSLT). NiceUrl funcția va returna adresa URL stocată pentru nod.

Atunci verificăm dacă id din $ rootNode se potrivește cu id din $ currentPage folosind un afirmație; dacă știm că pagina de pornire este cea în curs de vizualizare și adăugați-o pe clasă la ancora. Apoi selectăm numele nodului ( Nume dat nodului din back-end-ul Umbraco, care este afișat pe Proprietăți pentru nod) pentru a fi utilizat ca titlu atributul elementului de ancorare și textul acestuia, ambele folosind pentru a selecta valorile.

Apoi, trebuie să navigăm prin fiecare nod al paginii sub pagina de pornire, utilizăm un pentru selectarea și procesarea tuturor nodurilor care sunt copii ai $ rootNode și sunt, de asemenea, documente, dar care în plus nu au umbracoNavHide căsuța de bifare este bifată. Acest lucru împiedică afișarea panourilor Hero în meniul de navigare de pe întregul site, ceea ce, în mod clar, nu vrem!

Pentru fiecare copil al familiei $ rootNode, noi creăm un nou
element. Facem un test rapid pentru a vedea dacă procesăm ultimul nod din set, pe care îl realizăm, verificând dacă poziţie al nodului din setul de noduri este egal cu ultimul. Dacă este, adăugăm numele clasei ultimul la
.

Deși nu este absolut necesar în acest exemplu, aceasta este încă o tehnică incredibil de utilă pentru a vedea că nici IE6, nici IE7 (care reprezintă încă un procent mare din publicul unui număr nefericit de site-uri) pot utiliza ultimul copil Selector CSS.

Apoi creăm un nou în cadrul
și setați-o href folosind NiceUrl funcționează încă o dată, trecând de această dată în id atributul actualului nod. Am setat titlul și textul ancorei la fel ca înainte. Adăugăm și un pe dacă pagina în curs de vizualizare este aceeași cu pagina în curs de procesare. Deoarece suntem deja în contextul unui nod, nu mai trebuie să folosim $ currentPage parametru, folosind-o numai atunci când verificăm @id din actualul nod împotriva @id din pagina curentă.

Odată ce link-ul pentru nav a fost creat facem un alt test (din nou folosind condițional) pentru a vedea dacă nodul curent are noduri copil care sunt documente. Dacă se întâmplă acest lucru, vom crea un sub-nav folosind un imbricat
- și
  pentru fiecare copil, până la maxim 5. Acesta este în element, care este echivalent cu dacă parte din dacă? altfel. Când nu procesăm NewsItems, noi doar creăm un subnav pentru toate elementele (în element, care este echivalent cu altfel parte a unui dacă? altfel.)
  
  Aceasta este în esență; dacă salvăm acest lucru acum și vom reveni la pagina de pornire a site-ului (pagina principală actuală vizualizată într-un browser, nu nodul Acasă din back-end) și reîmprospătarea acestuia, ar trebui să constatăm că nivelul nostru de top nav este creat automat pentru noi:
  
  Apoi, putem crea navul pentru subsolul site-ului; acest lucru este aproape identic cu cel de top cu excepția faptului că nu are subnavuri. Creați noul fișier XSLT în același mod ca înainte și apelați-l footerNav. Adăugați în fișier următorul cod:
```
     pe       
     ultimul     pe       
  
 
```
  Acest fișier XSLT va trebui, de asemenea, să definească rootNode variabilă în partea de sus, la fel ca în cazul topNav, și nu uitați să adăugați element la BasePage.master fişier:
  Acestea sunt toate macrosurile de care avem nevoie BasePage.master fişier. Home.master fișierul are numai macro-ul panoului Hero, pe care îl vom adăuga într-o altă parte a seriei și Content.master fișierul nu are macros în el deloc. Următorul fișier la care trebuie să adăugăm o macrocomandă este NewsList.master pagină; vom adăuga acest lucru în următoarea parte din serie.
  
  rezumat
  
  În această parte a tutorialului, am început să scriem fișierele XSLT care construiesc diferite părți ale site-ului pe baza nodurilor de conținut create. Acesta este locul unde site-ul începe într-adevăr să se reunească și să se simtă ca un site web pe deplin de lucru.
  
  XSLT și XPath sunt limbi puternice pentru lucrul cu documente XML și elementele conținute în documentele respective. Dacă aceasta a fost prima dvs. expunere la XSLT, unele dintre ele s-ar putea simți puțin străin, mai ales dacă sunteți obișnuit să lucrați cu limbi mai intuitive, cum ar fi HTML și CSS. Dar nu vă faceți griji, XSLT și XPath sunt ușor de preluat cu puțină practică și sunt limbi care merită învățate, de exemplu, jQuery folosește XPath pentru a selecta elemente din paginile (X) HTML.
  
  În următoarea parte a seriei vom adăuga fișierele XSLT care vor construi pagina cu lista de știri și meniul de navigare pentru știri și apoi vom continua să ne uităm la modul în care putem adăuga .Net Controls de la Umbraco pentru funcții și mai personalizate.
  Cod