În această parte, vom începe să adăugăm un alt fișier XSLT (pentru paginile cu articole de știri), apoi să ne îndreptăm pentru a vedea cum putem integra standardul .Net Controls pentru utilizatori la Umbraco.
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
Adăugarea newsList Macro
Creați un nou fișier XSLT (și macro) în back-end și sunați-l newsList. În acest fișier XSLT vom folosi o entitate non-standard, care este entitatea HTML & \ Mdash;. Pentru a folosi această entitate trebuie să o definim în lista entităților în declarația de tip XSLT doctype din partea de sus a fișierului. Pentru a adăuga entitatea mdash, adăugați următorul cod în parantezele pătrate direct după entitatea spațială definită:
Vom salva o variabilă pentru a putea accesa cu ușurință newsList nod pentru a-și obține nodurile copilului. Imediat după pagina curenta param în noul fișier XSLT, adăugați următoarea variabilă:
Acum, în cadrul adăugați următorul cod:
ultimul
? Citeste mai mult
Mai întâi vom crea o nouă variabilă care este setată să indice direct nodul de știri părinte. Putem apuca orice nod direct prin specificarea lui id proprietate ca argument pentru GetXmlNodeById () metoda bibliotecii umbraco. id de utilizare poate fi obținut prin căutarea id câmp pe Proprietăți fila din orice nod; aceasta este o altă proprietate adăugată la nod în mod automat de către Umbraco:
Apoi, folosim această variabilă pentru a procesa fiecare nod copil sub părintele de știri, care se găsește pe pagina cu lista de știri. Pentru fiecare nod care este un copil al paginii listă, creați mai întâi un element. Apoi testăm dacă avem de-a face cu ultimul nod din set și, dacă suntem, adăugăm numele clasei ultimul la element. Acest lucru se face exclusiv din motive de stil; cele mai multe browsere susțin, desigur :ultimul copil filtru, dar aceasta poate fi o tehnică utilă care să fie utilizată pentru a satisface browserele mai vechi.
Apoi creăm un element conținând a si un pentru a vă conecta la pagina de știri completă. Pentru a decora link-ul vom folosi din nou Umbraco NiceUrl () funcţie. Am setat titlul și conținutul de text al ancorei folosind titlu proprietate de la back-end. Apoi afișăm data la care a fost postată pagina de știri și creatorul articolului de știri. Pentru a afișa data, putem folosi Umbraco FormatDateTime () , furnizând numele câmpului de selectare a datei din back-end și formatul în care dorim să apară data. Pentru a afișa autorul paginii, pur și simplu obțineți creatorName atribut. Rețineți că atributele paginii (spre deosebire de proprietățile mapate la elementele de intrare) sunt menționate cu @ prefix.
În cele din urmă, vom crea un nou container
și afișați o previzualizare a știrilor; pentru a face acest lucru putem folosi doar. Net subșir funcția, furnizarea de text din editorul text bogat, caracterul de la care începe și caracterul de terminat ca argumente. După previzualizarea textului, adăugăm o elipsă și un link mai citit, care indică, de asemenea, povestea completă.
Când accesăm newsList pagină în browser acum, nodurile copilului din newsList nodul va fi agregat în pagina de listă:
newsNav XSLT
Treceți la Dezvoltator în tab-ul Umbraco, faceți clic dreapta pe directorul XSLT Files din copacul nodului din stânga și alegeți Crea. introduce newsNav ca nume a dosarului și să se asigure că Curat este selectat în șablon selectați caseta și Creați macro este bifată caseta de validare.
Odată ce fișierul a fost creat, reveniți la Visual Web Developer Express (VWD) și deschideți fișierul XSLT. Vom folosi o variabilă pentru a face referire la newsList nod care conține nodurile individuale de știri ca și noi newsList Fișier XSLT din ultima parte a acestei serii:
Apoi pur și simplu procesăm fiecare nod de știri într-un XSLT pentru buclă și a construit navul pe baza titlului:
Acesta este codul de care avem nevoie. Pur și simplu permite vizitatorului să navigheze direct între știri fără a fi nevoit să se întoarcă la pagina de listă. Acesta este tot XSLT-ul de care avem nevoie acum; tot trebuie să scriem macroul care va genera panourile eroilor, dar vom reveni la asta mai târziu. Pentru moment, putem trece mai departe să vedem cum putem folosi Controlul utilizatorului într-un site Umbraco.
Crearea unui control de utilizator
Putem decide în acest moment că ceea ce dorim ca site-ul să aibă este o pagină de contact, în care vizitatorii pot completa un formular și pot trimite un e-mail administratorului site-ului. Aceasta ne prezintă o problemă; într-un site .Net standard, am putea să adăugăm un set de câmpuri de formular pe o pagină de contact și să adăugăm logica pentru a trimite e-mailul proprietarului site-ului în fișierul cod-behind. Dar, cu Umbraco, nu există fișiere cu cod în spate pentru pagini sau chiar pagini pe care să se adauge câmpurile de formular.
Ce putem face în schimb este crearea unui Control de utilizator, deoarece aceste tipuri de fișiere pot avea coduri în spatele cărora să se adauge logica de trimitere a e-mailurilor de care avem nevoie. Putem crea User Control în VWD; faceți clic dreapta pe usercontrols dosar în Soluție Explorer în partea stângă a aplicației și alegeți Adăugați un element nou.
În caseta de dialog care apare, selectați Controlul utilizatorilor web în coloana centrală și modificați numele fișierului la contactform.ascx. Asigurați-vă că Plasați codul în fișier separat bifați caseta de validare și apăsați butonul Adăuga buton. Adăugați următorul cod imediat după declarația de control care este adăugată automat la fișier:
<
Mulțumiri!
Mesajul dvs. a fost trimis și va fi citit în scurt timp. Ne vom întoarce cât mai curând posibil.
Acest lucru ar trebui să fie suficient pentru această demonstrație de bază. Am adăugat două elemente ale paginii; prima conține formularul, iar al doilea conține un mesaj de mulțumiri care va fi afișat odată ce formularul a fost trimis.
Panoul de formular conține o suprafață exterioară element ca un container logic și obligatoriu element. Apoi avem o serie de controale de server inclusiv elementele care vor fi convertite în elementele standard de etichetare HTML, câteva intrări de text și textarea, precum și câteva valori de bază pentru a se asigura că câmpurile obligatorii nu sunt lăsate necompletate și că este introdusă o adresă e-mail validă.
Deci acesta este codul pe care îl vom folosi pentru a afișa formularul. Nu vom adăuga, de fapt, codul care va trimite e-mailul ca și cum ar implica instalarea și configurarea unui server SMTP, ceea ce s-ar abate prea puțin de partea Umbraco a lucrurilor. Tot ce vom face este să comutați între cele două elemente. Putem face acest lucru cu următorul cod adăugat în cadrul clasei în fișierul codebehind:
Vom schimba vizibilitatea celor două panouri într-un handler pentru clic element în formă.
Adăugarea controlului utilizatorului la o pagină Umbraco
Acum, când avem controlul utilizatorului, îl putem adăuga la o nouă pagină în Umbraco; pe Dezvoltator în tab-ul din spate faceți clic dreapta pe macrocomenzi dosarul și alegeți Crea din meniu. În caseta de dialog introduceți Formular de contact ca nume și apoi faceți clic pe Crea.
Principalul panou din partea dreaptă se va actualiza odată ce macro-ul a fost creat. Prima actualizare Alias la Formular de contact astfel încât să fie în concordanță cu aliasurile pentru alte macrocomenzi pe care le-am creat. În a doua secțiune există o intrare cu eticheta sau .Controlul utilizatorilor NET; extindeți caseta de selectare de lângă câmpul de introducere și alegeți usercontrol pe care l-am creat. Asigurați-vă de asemenea Utilizați în editor căsuța de bifare este bifată:
Înapoi înapoi la Conţinut în back-end-ul Umbraco și creați o nouă pagină numită Contacteaza-ne dând clic dreapta pe Acasă pictograma și alegerea Crea. Această pagină ar trebui să utilizeze standardul Conţinut Tipul documentului. Pentru a adăuga macro-ul în pagină, putem folosi butonul portocaliu din partea dreaptă a barei de instrumente (pictograma este o fereastră de aplicație care conține >). În dialogul care apare asigurați-vă Formular de contact este selectat și apăsați butonul O.K buton. Acest lucru va introduce conținutul utilizatoruluicontrol în textarea. Salvați și publicați pagina.
Când vizualizăm reîmprospătarea paginii de pornire a site-ului, ar trebui să constatăm că meniul nav a fost actualizat automat cu noua pagină Contactați-ne și când navigăm la pagină, ar trebui să vedem noul nostru formular de contact pe pagină. Odată ce formularul a fost completat (lăsând fie câmpul de nume, fie e-mailul necompletat trebuie să aibă ca rezultat afișarea mesajelor de validare), ar trebui să putem face clic pe buton pentru a dezvălui panoul de mulțumiri.
Panoul eroilor Macro
Macroul final pe care trebuie să-l scriem este cel care creează elementele de conținut ale panoului eroic, care vor lua forma unui carusel cu mai multe panouri care vor aluneca într-o vedere din afara. Am adăugat deja multă marjă la HomePage.master fișierul din partea a doua a seriei, așa că nu avem atât de mult de făcut.
În back-end-ul Umbraco creați un nou fișier XSLT și Macro însoțitor. Apelați noul fișier XSLT heroPanels. Va trebui să conțină următorul cod în secțiunea principală a șablonului din fișierul XSLT:
Asta e tot ce avem nevoie; conținutul fiecărui panou de eroi ar trebui acum să fie înfășurat într-un
și introduse în #slider element de pe pagina de pornire, unde reședința.
Adăugarea unor elemente de stil
În acest moment ar trebui să avem un site aproape complet funcțional (trebuie doar să facem apel cu funcțiile de subnav și hero panel cu unele JavaScript); pur si simplu nu arata foarte frumos. Să remediem acest lucru prin adăugarea unei piele de bază la site. Creați o foaie de stil nouă și salvați-o în css (se adaugă atunci când arhiva Umbraco este despachetată) ca site.css (am adăugat un link la această foaie de stil atunci când am creat șabloanele din partea a doua). Adăugați următorul cod:
/ * site-wide * / corp padding-bottom: 60px; margin: 0; font: normal 12px / 20px "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; forma width: 960px; margin: auto; . accesibile ascunse display: block; text-liniuță: -5000px; overflow: ascuns; .clear-float: după display: block; conţinut:""; înălțime: 0; clar: ambele; vizibilitate: ascunse; h1, h2, h3 font: bold 24px Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia; header display: bloc; lățime: 916px; padding: 0 20px; frontieră: 2px solid # 969696; border-top: nici unul; -moz-border-radius: 0 0 8px 8px; raza de graniță: 0 0 8px 8px; culoare de fundal: #eee; header h1 float: left; antet h1 a display: bloc; lățime: 204px; înălțime: 75px; fundal: url (/img/logo.png) no-repeat; header h2 float: right; culoare: # 535353; nav display: bloc; margin: 0; clar: ambele; Poziția: relativă; stânga: -12px; nav ul padding: 0; margin: 0; nav li float: stânga; list-style-type: none; nav li a afișare: bloc; padding: 6px 12px; frontală de sus: 2px solid #eee; Poziția: relativă; font-size: 16px; font-weight: bold; text-decoration: none; culoare: # 535353; nav li a: hover, nav li a.on top-color: # 535353; nav ul ul afișare: nici unul; frontieră: 2px solid # 969696; border-top: nici unul; -moz-border-radius: 0 0 8px 8px; raza de graniță: 0 0 8px 8px; Poziția: absolută; culoare de fundal: #eee; -moz-box-shadow: 0 2px 3px # 777; -webkit-box-shadow: 0 2px 3px # 777; box-shadow: 0 2px 3px # 777; nav li: hover ul afișare: bloc; nav ul ul float: none; nav ul ul a border-top: nici unul; font-weight: normal; font-size: 14px; nav ul ul: hover (culoare: # 969696; #innerContent width: 960px; padding-top: 20px; clar: ambele; #innerContent img display: bloc; padding: 4px; frontieră: 1px solid # 969696; -moz-border-radius: 4px; border-radius: 4px; footer width: 916px; padding: 0 20px; frontieră: 2px solid # 969696; border-bottom: nici unul; -moz-border-radius: 8px 8px 0 0; raza de graniță: 8px 8px 0 0; Poziția: fix; bottom: 0; culoare de fundal: #eee; footer nav poziție: relativă; top: 11px; stânga: 0; footer li marginea-dreapta: 10px; footer li.last marginea-dreapta: 0; footer nav li: după conținut: "|"; footer nav li.last: după conținut: ""; footer nav a padding: 0; frontieră de fund: 1px dashed # 000; border-top: nici unul; marja de-dreapta: 10px; plutește la stânga; font-size: 12px; font-weight: normal; text-decoration: none; color: # 000; footer nav a: hover, footer nav a.on stil de frontieră-de jos: solid; footer p float: dreapta; / * pagina specifică * / articol display: block; margin-bottom: 40px; antetul articolului, footerul articolului padding: 0; frontieră: nici una; culoare de fundal: #fff; antetul articolului h1 a display: inline; fundal: nici unul; articolul h1 margin-bottom: 0; float: none; articol h1 a border-bottom: 1px dashed # 000; text-decoration: none; color: # 000; articol h1 a: hover border-bottom-style: solid; .post-info, #newsItem li font-style: italic; culoare: # 888; articol p a border-bottom: 1px dashed # 000; margin-left: 5px; text-decoration: none; color: # 000; articol p a: hover border-bottom-style: solid; #newsItem width: 640px; plutește la stânga; #newsItem ul umplutură: 0; margin: 0; #newsItem li marginea-stânga: 5px; plutește la stânga; list-style-type: none; #newsContent img marginea-dreapta: 20px; plutește la stânga; #newsNav width: 260px; float: right; clar: nici unul; #newsNav h1 font-size: 14px; #newsNav li float: niciunul; #newsNavă padding-left: 0; border-top: nici unul; frontieră de fund: 1px dashed # 000; font-weight: normal; font-size: 14px; color: # 000; #newsNav a: hover border-bottom-style: solid; câmpul border: none; etichetă, introducere, textarea display: block; lățime: 300px; margin-bottom: 10px; etichetă width: auto; marja de-dreapta: 10px; plutește la stânga; intrare, textarea clar: ambele; eticheta sup culoare: # ff0000; .button-trimite width: auto; spațiu de spațiu float: left; color: # FF0000; / * panou erou * / # hero poziție: relativă; #viewer width: 960px; height: 180px; overflow: ascuns; Poziția: relativă; #slider height: 180px; Poziția: absolută; top: 0; stânga: 0; .panel width: 960px; plutește la stânga; #ui margine: 0; padding: 0; #ui li float: left; list-style-type: none;
Salvați fișierul. Aceasta este doar o piele foarte de bază, la fel de mult pentru aspectul de decorare. Singura denegare de responsabilitate pe care o pot oferi este că sunt dezvoltator, nu designer. Dar site-ul ar trebui să pară cel puțin mai mult și mai mult ca un site web real. Subnavul din antetul superior este activat în întregime de CSS pentru a face ca scenariul nostru să aibă o amprentă mai mică. Desigur, aceasta nu va funcționa în IE6 (face ceva, vreodată) nu ar fi putut rezolva cu ușurință acest lucru folosind scriptul nostru dacă am fost atât de înclinat.
Cel mai important lucru este CSS pentru panoul nostru erou; nu este încă terminat, va trebui să adăugăm încă câteva stiluri odată ce am adăugat JavaScript, dar pentru moment, punctele de reținut sunt că elementul de vizualizare este setat la înălțimea și lățimea unui singur panou, astfel încât este afișat un singur panou la un moment dat. Celelalte panouri sunt flotate astfel încât să se stivuiască pe orizontală. #slider elementul este poziționat absolut și va fi făcut suficient de larg încât să se potrivească cu numărul de panouri. În acest moment, vizualizatorul nu se va afișa corect și toate panourile vor fi vizibile.
Motivul pentru aceasta se datorează faptului că lățimea lui #slider nu a fost setat să găzduiască toate panourile pe o singură linie. Știm că există trei panouri pentru că tocmai am construit site-ul, dar ar fi destul de ușor să adăugăm un nou panou sau mai multe, la o dată ulterioară, astfel încât să nu putem codifica cu adevărat o lățime în CSS în cazul în care numărul de panouri se modifică. Ne vom ocupa de setarea lățimii în scenariu.
Iată cum ar trebui să apară pagina de pornire la acest moment:
Un alt punct de reținut este că am adăugat emblema imaginară prin CSS. Am putea schimba acest lucru la fel de ușor, astfel încât să se folosească în schimb o imagine din biblioteca media, ceea ce ar fi preferabil dacă am transfera site-ul către un client.
rezumat
În această parte a tutorialului am adăugat restul fișierelor / macro-urilor XSLT care construiesc pagina de știri prin tragerea fragmentelor fiecărei știri individuale și a meniului de navigare pentru știri care este afișat în știri individuale și permite vizitatorului să se mute la diferite știri fără a trebui să reveniți la pagina de știri principală.
De asemenea, am văzut cât de ușor este să adăugați orice funcționalitate particularizată particulară pe care o poate avea nevoie o anumită pagină, prin crearea unui control .Net de utilizator (fișier ascx). Acest lucru ne permite să creăm o pagină cu conținut specializat care nu este definit nici în șablon sau în tipul de document.
În cele din urmă, am adăugat un stil de bază foarte important pentru a ordona site-ul și pentru a pune bazele pentru panoul eroului glisant, ultima noastră sarcină înainte ca site-ul să fie complet. Asta ne vom concentra pe următoarea și ultima parte a acestui tutorial.
Accentsconagua
Share
