În .NET, a masterpage este un șablon pentru paginile de conținut, unde o serie de pagini ASPX care utilizează toate aceleași masterpage toate pot partaja același cod de bază.
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
A masterpage poate avea unul sau mai multe contentPlaceHolders definite și fiecare pagină ASPX care utilizează acel masterpage trebuie doar să definiți codul care se află în contentPlaceHolder. Masterpages pot fi, de asemenea, imbricate, care este modul în care acestea vor fi structurate în site-ul nostru exemplu.
Definirea codului în șablonul de pagină de bază
Pagina de bază, amintiți-vă acest lucru este Format și Tipul documentului că toate paginile ulterioare vor moșteni de la, ar trebui să conțină doar acele elemente comune tuturor paginilor site-ului. Deschideți BasePage.master fișier în Visual Web Developer Express (VWD). Acesta va avea deja un mic cod ASPX în fișier, inclusiv un element. Acest element indică un element într-unul din Umbraco masterpages.
Este posibil să adăugați codul la masterpages în întregime prin back-end-ul Umbraco; atunci când selectați una dintre ele Template-uri în Setări zona, se încarcă o copie a fișierului în panoul din partea dreaptă a back-end-ului pentru editare, această caracteristică este mai utilă pentru efectuarea de mici modificări și actualizări la masterpages, și pentru introducerea de macrocomenzi sau elemente. Atunci când folosim IDE complet .Net avem intellisense și o serie de alte caracteristici care nu sunt prezente în Umbraco, creând astfel masterpages va necesita de obicei editarea în ambele domenii.
Salvați fișierul. Să aruncăm o privire la ceea ce avem. Este în format HTML5, așa cum putem spune direct de la minimal DOCTYPE și meta charset element. Nu este esențial să folosiți HTML5, dar putem și noi bine? În a paginii pe care am legat-o cu o foaie de stil (pe care nu am creat-o încă, dar va fi la un moment dat mai târziu) și a </code> element. <code><title></code> conține prima noastră etichetă Umbraco și indică o macrocomandă. Nu vă faceți griji prea mult despre acest lucru pentru moment, nu am discutat încă macro-uri și acestea vor fi acoperite cu mult mai multe detalii într-o parte ulterioară a seriei. Conținutul paginii este înfășurat într-un <code><form></code> element cu <code>fugi la</code> atributul setat la <code>Server</code>, care este o practică standard pentru site-urile .Net. De asemenea, includem o legătură cu <code>HTML5shiv</code> fișier pe codul Google, astfel încât IE8 sau mai jos să poată afișa corect elementele HTML5.</p> <p>Apoi avem un a <code></code> element care conține a <code><hgroup></code> element pentru linia principală a site - ului și tag - ul (compus din <code><h1></code> și <code><h2></code> etichete) și a <code><nav></code> element care conține navigația principală pentru site, care va fi construită dintr-o listă standard neordonată. HTML-ul afișat pentru navigarea principală nu va fi folosit de fapt în forma finală a site-ului, este prezentat aici ca un ghid pentru modul în care HTML ar trebui să fie atunci când este construit automat folosind o altă macrocomandă. Este util să adăugăm structura de bază pentru elementele construite dinamic, în cazul în care acestea trebuie să fie desenate înainte de adăugarea biților dinamici. Acest lucru este important mai ales dacă lucrați ca parte a unei echipe și altcineva va ocupa toate lucrurile (distracție) din back-end.</p> <p>Apoi avem a <code><div></code> element care conține o <code><asp:ContentPlaceHolder></code>. <code><div></code> are un <code>id</code> pentru scopuri de styling, și <code><asp:ContentPlaceHolder></code> are un <code>id</code> atributul astfel încât să poată fi populat cu alte pagini (sau <code>masterpages</code>). De asemenea, are și <code>Runat = "server"</code> deoarece este un element ASPX manipulat de server. Observați că unele dintre elementele noastre primesc nume de clasă atunci când venim să stilizăm site-ul de lângă sfârșitul seriei.</p> <p>Avem, de asemenea, a <code><footer></code> element care conține o altă copie a navigației (din nou HTML este furnizat în acest stadiu, în principal pentru scopuri de styling și ca un exemplu de cum va apărea în cele din urmă în browser atunci când sunt difuzate paginile) și o declarație privind drepturile de autor. Declarația privind drepturile de autor conține un fragment mic <code>C #</code>; toate acestea nu sunt de ieșire anul curent în format standard de 4 cifre, astfel încât să reflecte întotdeauna anul în care pagina este vizualizată. În cele din urmă, ne vom conecta la versiunea găzduită de Google-CDN a jQuery, deoarece vom avea nevoie de aceasta pentru a adăuga un comportament site-ului nostru în ultima parte a seriei.</p> <hr> <h2>Codarea paginii principale</h2> <p>Apoi putem adăuga codul care va alcătui pagina de pornire. Dacă deschidem <code>HomePage.master</code> fișier în VWD putem vedea că a fost deja imbrăcat sub <code>BasePage.master</code> (The <code>BasePage.master</code> fișierul este setat ca <code>MasterPageFile</code> în <code>Maestru</code> declarație în partea de sus a dosarului), trebuie doar să schimbăm <code>ContentPlaceHolderID</code> din <code><asp:Content></code> astfel încât să indice <code><asp:ContentPlaceHolder></code> elementul pe care l-am adăugat la <code>BasePage.master</code>:</p> <pre><asp:Content ContentPlaceHolderID="BaseContent" runat="server"> </asp:Content></pre> <p>Acum adăugați următorul cod la <code><asp:Content></code> elementul prezentat mai sus:</p> <pre><p><umbraco:Item field="introText" runat="server" /></p> <umbraco:Item field="bannerImage" xslt="concat('&\lt;img src=&\quot;',umbraco.library:GetMedia(0, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia(0, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> <div> <div> <div> <umbraco:Macro Alias="heroPanels" runat="server"></umbraco:Macro> </div> </div> <ul> <li>Anterior</li> <li>Următor →</li> </ul> </div></pre> <p>Această pagină principală conține un alt tip de element Umbraco - <code>Articol</code>. Primul element pe care îl folosim stabilește textul introductiv din pagină. Amintiți-vă, am definit acest lucru ca o proprietate a <code>Pagina principala</code> Documentați tipul în prima parte a acestei serii și setați-l la un tip de date de <code>Editorul Richtext</code>. <code><umbraco:Item></code> elementul din șablon va afișa conținutul a ceea ce este introdus în editorul de text îmbogățit când vom crea un nod de conținut pentru pagina de pornire din back-end.</p> <p>Ar trebui să fie puțin mai clar acum modul în care proprietățile din tipurile de documente se referă la elementele care se termină pe paginile noastre, dar nu vă faceți griji dacă în acest moment nu este clar 100% cristal - nu am creat încă pagini reale încă, dar când facem partea finală a puzzle-ului, trebuie să faceți clic pe loc.</p> <p>Apoi avem un element imagine; pentru că folosim un picker pentru mass-media (o să explic exact ce este un selector de media când creăm pagina) codul pentru acest lucru este mult mai complex decât ceea ce am văzut până acum. Una dintre secțiunile din back-end-ul Umbraco este <code>Mass-media</code> secțiune unde tot conținutul media pentru un site poate fi încărcat și stocat. Ca și alte resurse pentru site, fiecare element media este un nod din copacul nodului și i se dă un nume atunci când elementul media este adăugat la CMS.</p> <p>Când adăugăm <code><img></code>element, folosim un <code><umbraco:Item></code> similar cu <code>introText</code>, dar trebuie să folosim un fragment de cod XSLT inline și câteva fragmente de cod HTML pentru a obține calea imaginii stocate în biblioteca media. Fragmentul XSLT folosește funcția <code>concat ()</code> , care acceptă o serie de șiruri de linii delimitate de virgulă pentru a concatena, a construi <code><img></code> element. În cadrul acestei matrice folosim entitățile HTML și marcați în sus pentru a construi elementul manual și, de asemenea, utilizați o funcție din <code>umbraco.library</code> clasă. Funcția este <code>GetMedia</code> și ne permite să obținem calea către mage în biblioteca Media (există un dosar de potrivire în sistemul de fișiere Umbraco la care sunt stocate toate articolele media) utilizând <code>umbracoFile</code> proprietatea și numele nodului folosind <code>@nodeName</code>. Rețineți că pentru a obține codul de mai sus pentru a afișa corect am fost nevoit să introduc \ caractere în entitățile HTML. Îndepărtați-le dacă copiați și lipiți în propriile fișiere.</p> <p>În cele din urmă, adăugăm o marjă de bază pentru panoul eroului, inclusiv un container exterior ( <code><div></code> cu un <code>id</code> de <code>erou</code>), A <code><div></code> fiecare pentru <code>#viewer</code> și <code>#slider</code> elemente și un UI simplu care va permite navigarea diferitelor panouri de conținut. <code>#slider</code> element conține, de asemenea, un <code><umbraco:Macro></code> element, astfel încât vom construi această parte a panoului erou folosind o macro XSLT pe care o vom crea într-o parte ulterioară a seriei. Panoul erou va fi inițial construit din XSLT și marcajul prezentat aici și va fi apoi făcut pentru a lucra cu scriptul.</p> <hr> <h2>Crearea șablonului de conținut</h2> <p>Paginile noastre de conținut sunt relativ simple și sunt construite folosind o singură proprietate din <code>Conţinut</code> Tipul documentului. În fișierul masterpage schimbați <code>ContentPlaceHolderID</code> din <code><asp:Content></code> element la <code>BaseContent</code> exact cum am făcut pentru pagina de pornire:</p> <pre> <asp:Content ContentPlaceHolderID="BaseContent" runat="server"> </asp:Content></pre> <p>Apoi adăugați următorul cod la <code><asp:Content></code> element:</p> <pre><div><umbraco:Item field="pageCopy" runat="server" /></div></pre> <p>Asta este tot ce vom folosi în șablonul de pagină de conținut. În realitate, o pagină de conținut ar fi probabil mult mai complexă, dar pentru exemplul nostru simplu ar trebui să fie suficientă. Am folosit un exterior care conține <code><div></code> pentru asta <code><umbraco:Item></code> deoarece elementul este legat de a <code>Editorul Richtext</code> și astfel ar putea conține mai multe tipuri diferite de conținut.</p> <hr> <h2>Șabloane de știri</h2> <p>Șablonul NewsList va fi aproape la fel de fundamental ca și al nostru <code>Conţinut</code> șablon deoarece pagina va fi în mare parte construită dinamic utilizând o macro XSLT. Nu uitați să actualizați <code>ContenPlaceHolderID</code> la <code>BaseContent</code> așa cum avem în celelalte șabloane ale noastre și apoi adăugăm la substituent următoarele elemente:</p> <pre><section> <h1>Știri recente de la Companie</h1> <umbraco:Macro Alias="newsList" runat="server" /> </section></pre> <p>Pe această pagină avem un <code><section></code> element, care găzduiește titlul paginii principale și macro-ul care construiește lista de știri. Acesta este tot ceea ce avem nevoie în acest șablon, așa că trecem la următorul și ultimul; <code>NewsItem</code>. Din nou, schimbați <code>ContentPlaceHolderID</code> la <code>BaseContent</code> apoi adăugați următorul cod la substituent: </p><pre><article> <h1><umbraco:Item field="headline" runat="server" /></h1> <ul> <li>postat pe <umbraco:Item field="date" formatAsDate="true" runat="server" /></li> <li>De <umbraco:Item field="creatorName" runat="server" /></li> </ul> <div> <umbraco:Item field="storyImage" xslt="concat('&\lt;img src=&\quot;',umbraco.library:GetMedia(0, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia(0, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> <div><umbraco:Item field="newsText" runat="server" /></div> </div> </article> <nav> <umbraco:Macro Alias="newsNav" runat="server" /> </nav></pre> <p>Al nostru <code>NewsItem</code> șablon este un pic mai complex decât majoritatea celorlalte. Principalul container pentru știri este unul <code><article></code>, care conține a <code></code> pentru titlul și câteva informații despre povestea de știri, cum ar fi cea a lui <code>Data</code> și <code>autor</code>. Data, care este afișată în prima <code><li></code>, este legată de <code>DatePicker</code> câmpul pe care l-am adăugat la tipul de document corespunzător pentru acest tip de pagină. Am setat <code>formatAsDate</code> atributul la adevărat care formatează data frumos în loc fără un șir de timp adăugat la sfârșitul. <code>autor</code> se obține utilizând <code>creatorName</code> proprietate care este adăugată automat la noduri (pagini) atunci când acestea sunt create în back-end.</p> <p>Corpul articolului este un container exterior <code><div></code> care utilizează <code>newsImage</code> câmp (aceasta este în esență aceeași cu cea a banner-ului de pe pagina de pornire care utilizează de asemenea un selector Media. Din nou, entitățile HTML au backslash-uri în ele astfel încât acestea să fie afișate corect aici) și un <code><div></code> care utilizează un <code><umbraco:Item></code> legate de <code>newsText</code> camp. De asemenea, creăm o secundară <code><nav></code> element care va permite vizitatorului să navigheze direct de pe pagina de știri curentă către alte pagini de știri fără a fi nevoie să se întoarcă la lista de știri. Aceasta va fi construită dintr-o macro, pe care o vom analiza în următoarea parte a acestei serii.</p> <hr> <h2>Adăugarea de pagini</h2> <p>Așadar, am petrecut câteva ore bune, cel puțin până acum, pentru a stabili lucrurile (mai mult dacă ar fi trebuit să instalați VWD + SQL Server), deci să adăugăm câteva pagini deja! Într-un site Umbraco, nu există, în realitate, "pagini individuale" ca atare. Nu gândiți la dvs. - "Am nevoie de această pagină pentru a face ceva unic, așa că pot adăuga acest lucru sau acea pagină la care se află" - nu funcționează așa, nu există pagini de bază. În loc de pagini, avem noduri de conținut în arborele nodului (în special, nodurile din <code>Conţinut</code> secțiunea din backend-ul CMS) și datele din baza de date. Există adrese URL individuale stocate în baza de date și fiecare nod este mapat la o adresă URL, astfel încât atunci când un vizitator tipărește adresa unei pagini sau navighează în jurul site-ului, CMS va verifica adresa URL solicitată și va construi pagina în zbor , utilizând tipul de document și șablonul.</p> <p>Deci, pentru a crea pagina de pornire a site-ului, mergeți la secțiunea Content din CMS, faceți clic dreapta pe folderul Content din panoul din stânga sus și alegeți Creare. În dialogul care apare, introduceți Acasă ca Nume și alegeți Pagina de pornire ca tip de document:</p> <img src="//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-2.jpg"><br> <p>Odată ce am lovit <code>Crea</code> în dialog, noul nod va fi creat și afișat în panoul din stânga sus al CMS și va avea o mică stea portocalie în partea dreaptă a acestuia. Aceasta indică faptul că nodul a fost salvat, dar nu a fost publicat. În panoul din dreapta al CMS vedem filele și câmpurile pe care le-am definit în Document Type în partea 1. The <code>Conţinut</code> fila este afișată în mod prestabilit, deoarece este prima filă, prima proprietate pe care am definit-o a fost <code>Intro Text</code> proprietate, care hartă direct la textarea din partea de sus a <code>Conţinut</code> tab. De asemenea, am definit <code>Banner Image</code> proprietate, care hărți direct la controlul de selectare a materialelor media afișat sub textarea.</p> <p>Nodul pentru conținutul paginii de pornire va moșteni, de asemenea, o proprietate din <code>Pagina de bază</code> tipul de document - <code>Numele domeniului</code> - care poate fi văzut pe <code>Proprietăți</code> tab. Mergeți la <code>Proprietăți</code> fila acum. Există câteva proprietăți importante care sunt create automat de Umbraco, inclusiv numele nodului, care este un câmp editabil, astfel încât să putem schimba ușor numele nodului în orice moment și <code>Tipul documentului</code> și <code>Format</code> in folosinta. Există și alte proprietăți utile, cum ar fi creatorul nodului și data publicării. introduce <code>Compania</code> în <code>Numele domeniului</code> câmp (aceasta ar putea lua forma <code>Compania</code>, sau o adresă URL reală, cum ar fi www.thecompany.com, nu are nicio diferență, deoarece va fi pur și simplu utilizată pentru titlul paginii).</p> <p>Amandoua <code>Intro Text</code> si <code>Banner Image</code> sunt proprietăți obligatorii, deci ambele trebuie să fie populate înainte de a putea publica pagina. <code>Intro Text</code> este usor; abia începem să tipăm în textarea. Putem face unele formatări de bază folosind <code>Editorul Richtext</code> butoanele din partea de sus a filei, dar în esență tocmai am completat această proprietate sau câmp, tastând. <code>Banner Image</code> este ușor (dar nu mult mai mult) complexă și pentru ao completa, va trebui să lucrăm pe scurt cu o altă secțiune a CMS - biblioteca Media.</p> <hr> <h2>Biblioteca Media</h2> <p>Biblioteca Media este un depozit pentru toate resursele media, cum ar fi imagini, videoclipuri, fișiere audio sau alte fișiere sau documente încorporate. Al nostru <code>Banner Image</code> câmp pentru <code>Pagina principala</code> utilizează a <code>Selectorul de materiale</code>, care deschide un dialog care să prezinte biblioteca media și permite administratorului final al site-ului să aleagă vizual imaginea pe care doresc să o utilizeze. Înainte de aceasta se poate întâmpla totuși, trebuie să existe elemente în biblioteca media care pot fi selectate.</p> <p>Pentru a adăuga un element la biblioteca media, alegem doar <code>Mass-media</code> făcând clic pe pictograma din panoul din stânga jos din spate și după ce nodul secțiunii media a fost încărcat în partea din stânga sus, faceți clic dreapta pe dosarul Media și alegeți <code>Crea</code> din meniu. În dialogul care apare, putem seta un nume pentru imagine (rețineți că numele pe care îl dăm nodului este folosit în <code>Alt</code> atributul imaginii când este afișat pe pagina de pornire) și alegeți <code>Tip media</code>. Există trei tipuri predefinite de care putem alege; un dosar care poate fi util atunci când avem multe elemente media pe care dorim să le clasificăm și să le stocăm într-un mod ordonat, un general <code>Fişier</code> tip, sau <code>Imagine</code>, pe care o vom folosi în acest caz. Alte tipuri de medii pot fi create cu ușurință în <code>Setări</code> secțiune.</p> <p>Odata ce <code>Crea</code> butonul din dialog a fost creat, noul element de imagine va fi creat, iar panoul din dreapta al editorului va fi completat cu câteva proprietăți, inclusiv un buton de încărcare. Ar trebui să faceți clic pe butonul de încărcare pentru a alege fișierul de pe computerul pe care dorim să îl încărcați (am o imagine prestabilită pregătită pe desktop pentru încărcare). După ce ați selectat imaginea pe care doriți să o încărcați și ați făcut clic pe pictograma de salvare din bara de instrumente din partea de sus a panoului din dreapta, imaginea va deveni parte din biblioteca media și va fi listată ca un nod din copacul nodului media. O miniatură a imaginii va fi, de asemenea, creată și afișată în <code>proprietăţi</code> panou la dreapta, împreună cu unele dintre atributele de imagine:</p> <img src="//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-2_2.jpg"><br> <p>Acum, imaginea este pregătită pentru a fi selectată, deci reveniți la <code>Conţinut</code> și selectați <code>Acasă</code> nod pe care l-am creat mai devreme. În <code>Imagine banner</code> câmpul de mai jos textarea faceți clic pe <code>alege</code> link pentru a deschide selectorul, care va apărea într-un dialog. Apasă pe <code>Compania face asta!</code> nod în picker și va fi setat în <code>Banner imag</code>e câmpul. <code>Acasă</code> nodul poate fi acum publicat, așa că faceți clic pe pictograma lumii cu un disc în fața sa pentru a salva și a publica pagina.</p> <p>Asta e; ai facut prima ta pagina Umbraco! Puteți să vizualizați noua pagină făcând clic pe pictograma Previzualizare (pagina cu lupa de pe ea) pentru ao vedea în modul de previzualizare sau puteți deschide o nouă filă în browserul dvs., copiați adresa URL a back-end-ului, lipiți-o în noua filă și bateți totul după numărul portului.</p> <p>Pagina este total dezbrăcată în acest moment, dar ar trebui să găsiți că textul și imaginea introductivă pe care le-am setat în back-end sunt afișate pe pagină, împreună cu marcajul de sus <code>Home.master</code> și <code>Pagina de bază</code> template-uri. <code><umbraco:Item></code> elementele au fost toate populate, dar toate <code><umbraco:Macro></code> elementele nu vor fi fost încă populate, deoarece trebuie să scriem câteva XSLT pentru acestea.</p> <hr> <h2>rezumat</h2> <p>În această parte a tutorialului, am analizat modul în care funcționează șabloanele Umbraco (acestea reprezintă pagini de master .Net) și modul în care sunt imbricate pentru reutilizarea codului maxim. Acum, când am creat o pagină, am văzut cum funcționează tipurile de documente, șabloanele și nodurile împreună pentru a crea proprietățile pe care le putem edita în back-end și paginile pe care vizitatorii noștri le vor vedea.</p> <p>În următoarea parte a acestei serii vom crea restul paginilor pentru site și apoi vom începe să scriem XSLT-ul care va construi navigația de sus și de jos și panoul eroului, printre altele.</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Cod</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/getting-started-with-umbraco-part-3.html">Noțiuni de bază cu Umbraco Partea 3</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-3.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/getting-started-with-umbraco-part-1.html">Noțiuni de bază cu Umbraco Partea 1</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-1.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Căutare...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua