I. NET, a Master er en mal for innholdssider, hvor en serie av ASPX-sider som alle bruker det samme Master kan alle dele samme basekode.
Også tilgjengelig i denne serien:
Komme i gang med Umbraco: Del 1
Komme i gang med Umbraco: Del 2
Komme i gang med Umbraco: Del 3
Komme i gang med Umbraco: Del 4
Komme i gang med Umbraco: Del 5
EN Master kan da ha en eller flere contentPlaceHolders definert og hver ASPX-side som bruker det Master trenger bare å definere koden som er innenfor contentPlaceHolder. Masterpages kan også være nestet, som er hvordan de vil bli strukturert i vårt eksempel nettsted.
Definere koden i vår basisside
De Basisside, husk at dette er Mal og dokumenttype at alle etterfølgende sider vil arve fra, skal bare inneholde de elementene som er felles for alle sider på nettstedet. Åpne opp BasePage.master fil i Visual Web Developer Express (VWD). Det vil allerede ha en liten ASPX-kode i filen, inkludert en element. Dette elementet peker på en element i en av Umbracos masterpages.
Det er mulig å legge til koden til masterpages helt gjennom Umbraco back-end; når du velger en av maler i innstillinger område, laster det en kopi av filen inn i høyre side av baksiden for redigering, denne funksjonen er mer nyttig for å gjøre små endringer og oppdateringer til masterpages, og for å sette inn makroer eller gjenstander. Når vi bruker en full .Net IDE, får vi intellisense og en rekke andre funksjoner som ikke er til stede i Umbraco, slik at vi skaper masterpages vil vanligvis kreve redigering i begge områder.
Lagre filen. La oss ta en titt på hva vi har. Det er i HTML5-format, som vi kan fortelle rett fra minimal DOCTYPE og meta charset element. Det er ikke viktig å bruke HTML5, men vi kan også like godt? I av siden vi har koblet til et stilark (som vi ikke har opprettet ennå, men vil på et tidspunkt senere) og a </code> element. De <code><title></code> inneholder vår første Umbraco tag og peker på en makro. Ikke bekymre deg for mye om dette for nå, vi har ikke diskutert makroer ennå, og disse vil bli dekket mye mer detaljert i en senere del av serien. Innholdet på siden er pakket inn i en <code><form></code> element med <code>runat</code> attributtet satt til <code>serveren</code>, som er standard praksis for. Net nettsteder. Vi inkluderer også en link til <code>HTML5shiv</code> fil på Google-kode slik at IE8 eller under er i stand til å vise våre HTML5-elementer riktig.</p> <p>Neste har vi a <code></code> element som inneholder en <code><hgroup></code> element for hovedstedets overskrift og merkelinje (sammensatt av <code><h1></code> og <code><h2></code> merker henholdsvis), og a <code><nav></code> element som inneholder hovednavigasjonen til nettstedet, som vil bli bygget fra en standard uordnet liste. HTML-koden som vises for hovednavigasjonen, blir ikke brukt i nettstedets endelige form, den er oppført her som en veiledning for hvordan HTML-en skal være når den bygges automatisk ved hjelp av en annen makro. Det er nyttig å legge til grunnstrukturen for dynamisk bygde elementer, i tilfelle de må styles før de dynamiske bitene legges til. Dette er spesielt viktig hvis du jobber som en del av et lag, og noen andre vil håndtere alle (morsomme) back-end ting.</p> <p>Vi har da en <code><div></code> element som inneholder en <code><asp:ContentPlaceHolder></code>. De <code><div></code> har en <code>id</code> for styling formål, og <code><asp:ContentPlaceHolder></code> har en <code>id</code> Tilordne slik at den kan bli befolket med andre sider (eller <code>masterpages</code>). Det har også <code>runat = "server"</code> attributt fordi det er et ASPX-element som håndteres av serveren. Legg merke til at noen av elementene våre er gitt klassenavn for når vi kommer til å utforme nettstedet nær slutten av serien.</p> <p>Vi har også a <code><footer></code> element som inneholder en annen kopi av navigasjonen (igjen HTML er gitt på dette tidspunktet hovedsakelig for styling formål og som et eksempel på hvordan det til slutt vil vises i nettleseren når sidene blir servert), og en opphavsrettserklæring. Opphavsrettserklæringen inneholder en liten utdrag av <code>C #</code>; alt dette gjøres utdata det nåværende året i standard 4-sifret format, slik at det alltid gjenspeiler året som siden er sett. Til slutt kobler vi til Google-CDN-vertsversjonen av jQuery, da vi trenger dette for å legge til noe atferd på nettstedet vårt i den siste delen av serien.</p> <hr> <h2>Koding av hjemmesiden</h2> <p>Deretter kan vi legge til koden som vil gjøre opp på hjemmesiden. Hvis vi åpner opp <code>HomePage.master</code> fil i VWD vi kan se at den allerede er nestet under <code>BasePage.master</code> (de <code>BasePage.master</code> filen er satt som <code>MasterPageFile</code> i <code>Herre</code> erklæring øverst på filen), vi trenger bare å endre <code>ContentPlaceHolderID</code> av <code><asp:Content></code> element slik at det peker på <code><asp:ContentPlaceHolder></code> element vi lagt til i <code>BasePage.master</code>:</p> <pre><asp:Content ContentPlaceHolderID="BaseContent" runat="server"> </asp:Content></pre> <p>Legg nå følgende kode til <code><asp:Content></code> element vist ovenfor:</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>Tidligere</li> <li>neste</li> </ul> </div></pre> <p>Denne masterpage inneholder en annen type Umbraco element - the <code>Punkt</code>. Det første elementet vi bruker, angir innledende tekst på siden. Husk at vi definerte dette som en eiendom av <code>Hjemmeside</code> Dokument Type i del en av denne serien og sett den til en datatype av <code>Richtext editor</code>. De <code><umbraco:Item></code> elementet her i malen vil vise innholdet til det som er skrevet inn i den rike tekstredigereren når vi lager en innholdskode for hjemmesiden i backend.</p> <p>Det bør være litt tydeligere nå hvordan egenskapene i Dokumenttyper relaterer seg til elementene som kommer opp på våre sider, men vær ikke bekymret hvis det ikke er 100% krystallklar på dette tidspunktet - vi har fortsatt ikke opprettet noen faktiske sider ennå, men når vi gjør den siste delen av puslespillet bør klikke pent inn på plass.</p> <p>Deretter har vi et bildeelement; fordi vi bruker en mediaplukker (jeg skal forklare nøyaktig hva en mediaplukker er når vi lager siden) koden for dette er mye mer kompleks enn det vi har sett så langt. En av seksjonene i Umbraco back-end er <code>Media</code> avsnitt der alt medieinnhold for et nettsted kan lastes opp og lagres. Som andre ressurser for nettstedet, er hvert medieelement et node i nodetreet og er gitt et navn når medieelementet blir lagt til CMS.</p> <p>Når vi legger til <code><img></code>element, bruker vi en <code><umbraco:Item></code> ligner på <code>intro~~POS=TRUNC</code>, men vi må bruke en utdrag av inline XSLT-kode og et par utdrag av HTML for å faktisk få banen til bildet som er lagret i mediebiblioteket. XSLT-kodebiten benytter seg av <code>concat ()</code> metode, som aksepterer et kommaavgrenset utvalg av strenger for å sammenkoble, for å bygge <code><img></code> element. Innenfor denne gruppen bruker vi HTML-enhetene og merker opp for å bygge elementet manuelt og også bruke en funksjon fra <code>umbraco.library</code> klasse. Funksjonen er <code>GetMedia</code> og lar oss få banen til mage i mediebiblioteket (det er en matchende mappe i Umbraco-filsystemet som alle medieelementene er lagret i) ved hjelp av <code>umbracoFile</code> eiendom, og navnet på noden bruker <code>@nodeName</code>. Merk at for å få eksempelkoden ovenfor til å vise riktig, måtte jeg sette inn \ tegn i HTML-enhetene. Fjern dem hvis du kopierer og limer inn i dine egne filer.</p> <p>Til slutt legger vi til noen grunnleggende oppslag for heltenes panel, inkludert en ytre beholder (den <code><div></code> med en <code>id</code> av <code>helt</code>), a <code><div></code> hver for <code>#viewer</code> og <code>#slider</code> elementer, og et enkelt brukergrensesnitt som vil tillate at de ulike panelene av innhold blir navigert. De <code>#slider</code> elementet inneholder også en <code><umbraco:Macro></code> element, så vi vil bygge denne delen av helten panelet ved hjelp av en XSLT makro som vi vil lage i en senere del av serien. Heltpanelet blir opprinnelig bygget fra XSLT og markeringen vist her, og vil da bli laget for å fungere med skript.</p> <hr> <h2>Opprette innholdsmalen</h2> <p>Våre innholdssider er relativt enkle og er bygget ved hjelp av en enkelt eiendom fra <code>Innhold</code> Dokumenttype. I masterpagefilen endrer du <code>ContentPlaceHolderID</code> av <code><asp:Content></code> element til <code>BaseContent</code> akkurat som vi gjorde for hjemmesiden:</p> <pre> <asp:Content ContentPlaceHolderID="BaseContent" runat="server"> </asp:Content></pre> <p>Legg deretter til følgende kode i <code><asp:Content></code> element:</p> <pre><div><umbraco:Item field="pageCopy" runat="server" /></div></pre> <p>Det er det, det er alt vi skal bruke i vår nettside-mal. I virkeligheten vil en innholdsside trolig være mye mer komplisert, men for vårt enkle eksempel skal det være tilstrekkelig. Vi har brukt en ytre som inneholder <code><div></code> for dette <code><umbraco:Item></code> fordi elementet er koblet til en <code>Richtext editor</code> og så kan det inneholde mange forskjellige typer innhold.</p> <hr> <h2>Nyhetsmaler</h2> <p>Vår NewsList-mal vil være nesten like grunnleggende som vår <code>Innhold</code> mal som siden vil i stor grad bygges dynamisk ved hjelp av en XSLT-makro. Ikke glem å oppdatere <code>ContenPlaceHolderID</code> til <code>BaseContent</code> som vi har i våre andre maler, og legg deretter til følgende elementer i stedholderen:</p> <pre><section> <h1>Nylige nyheter fra selskapet</h1> <umbraco:Macro Alias="newsList" runat="server" /> </section></pre> <p>På denne siden har vi en <code><section></code> element, som er hjemmet til hovedsiden og makroen som bygger nyhetslisten. Dette er alt vi trenger i denne malen, så la oss gå videre til neste og siste; de <code>NewsItem</code>. Igjen, endre <code>ContentPlaceHolderID</code> til <code>BaseContent</code> og legg deretter til følgende kode på plassholderen: </p><pre><article> <h1><umbraco:Item field="headline" runat="server" /></h1> <ul> <li>postet på <umbraco:Item field="date" formatAsDate="true" runat="server" /></li> <li>Av <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>Våre <code>NewsItem</code> mal er litt mer kompleks enn de fleste andre. Hovedbeholderen for nyhetshistorien er en <code><article></code>, som inneholder en <code></code> for overskriften og litt informasjon om nyhetshistorien som sin <code>Dato</code> og <code>forfatter</code>. Datoen, som vises i den første <code><li></code>, er knyttet til <code>Datovelger</code> feltet vi lagt til i den tilsvarende dokumenttypen for denne sidetypen. Vi satte <code>formatAsDate</code> attributt til sant som formaterer datoen pent i stedet uten en tidsstreng som er lagt til slutten. De <code>forfatter</code> er oppnådd ved bruk av <code>creatorName</code> Egenskap som automatisk legges til noder (sider) når de er opprettet i back-end.</p> <p>Artikkelen er en ytre beholder <code><div></code> som bruker <code>newsImage</code> feltet (dette er i det vesentlige det samme som bannerbildet på hjemmesiden som også bruker en Media picker. Igjen HTML-enhetene har tilbakestrek i dem slik at de vises riktig her) og en <code><div></code> som bruker en <code><umbraco:Item></code> knyttet til <code>newsText</code> felt. Vi lager også en sekundær <code><nav></code> element som gjør det mulig for besøkende å navigere direkte fra den aktuelle nyhetssiden til andre nyhetssider uten å måtte gå tilbake til nyhetslisten. Dette vil bli bygget fra en makro, som vi ser på i neste del av denne serien.</p> <hr> <h2>Legge til sider</h2> <p>Så vi har tilbrakt et godt par timer, så langt som mulig, og sett opp ting (mer om du måtte installere VWD + SQL Server), så la oss legge til noen sider allerede! På et Umbraco-område er det egentlig ikke noen individuelle "sider" som sådan. Ikke tenk på deg selv - "Jeg trenger denne siden for å gjøre noe unikt, så jeg kan legge til dette eller det til den underliggende siden" - det virker bare ikke slik, det er ingen underliggende sider. I stedet for sider har vi innholdsnoder i nodetreet (spesielt noder i <code>Innhold</code> del av CMS-backend), og data i databasen. Det er individuelle nettadresser lagret i databasen, og hver knutepunkt er kartlagt til en nettadresse, slik at når en besøkende skriver adressen til en side eller navigerer rundt på siden, vil CMS sjekke hvilken nettadresse som ble forespurt og bygge siden på fluen , ved hjelp av dokumenttype og mal.</p> <p>Så, for å opprette hjemmesiden til nettstedet, gå til innholdsdelen av CMS, høyreklikk Innhold-mappen øverst til venstre og velg Opprett. I dialogboksen som vises, skriv inn Hjem som Navn og velg Hjemmeside som Dokumenttype:</p> <img src="//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-2.jpg"><br> <p>Når vi slår på <code>Skape</code> knappen i dialogboksen, vil den nye noden bli opprettet og vist i øverste venstre panel av CMS, og vil ha en liten oransje stjerne til høyre for den. Dette indikerer at noden har blitt lagret, men ikke publisert. I den høyre delen av CMS ser vi kategoriene og feltene som vi definerte i Dokumenttype i del 1. Den <code>Innhold</code> kategorien vises som standard som det er den første kategorien, den første egenskapen vi definerte var <code>Introtekst</code> eiendom, som kaster direkte til tekstområdet øverst på <code>Innhold</code> fane. Vi har også definert <code>Banner Image</code> eiendom, som kart direkte til Media Picker-kontrollen som vises under tekstområdet.</p> <p>Hjemmesiden innholdskode vil også arve en eiendom fra <code>Basisside</code> dokumenttype -the <code>Domenenavn</code> - som kan ses på <code>Eiendommer</code> fane. Gå til <code>Eiendommer</code> fanen nå. Det finnes flere viktige egenskaper her som automatisk opprettes av Umbraco, inkludert nodens navn, som er et redigerbart felt slik at vi enkelt kan endre nodenavnet til enhver tid, og <code>dokumenttype</code> og <code>Mal</code> i bruk. Det finnes andre nyttige egenskaper som skaperen av node og publiseringsdato. Tast inn <code>Firmaet</code> i <code>Domenenavn</code> feltet (dette kan ta formatet <code>Firmaet</code>, eller en faktisk nettadresse som www.thecompany.com, gjør det ingen forskjell, da den bare vil bli brukt til tittelen på siden).</p> <p>Begge <code>Introtekst</code> og <code>Banner Image</code> er obligatoriske egenskaper, så de må begge være fylt ut før vi kan publisere siden. De <code>Introtekst</code> det er lett; vi begynner bare å skrive i tekstområdet. Vi kan gjøre noen grunnleggende formatering ved hjelp av <code>Richtext editor</code> knapper øverst på fanen, men i det hele tatt fullfører vi bare denne egenskapen eller feltet ved å skrive. De <code>Banner Image</code> er litt (men ikke mye mer) komplisert og for å fullføre det, må vi jobbe kort med en annen del av CMS - mediebiblioteket.</p> <hr> <h2>Mediebiblioteket</h2> <p>Mediebiblioteket er et lager for alle medieressurser, for eksempel bilder, videoer, lydfiler eller andre innebygde filer eller dokumenter. Våre <code>Banner Image</code> feltet for <code>Hjemmeside</code> bruker a <code>Media picker</code>, kontroll som åpner en dialogboks som viser mediebiblioteket og lar sluttadministratoren av nettstedet visuelt velge bildet de vil bruke. Før det kan skje, må det være elementer i mediebiblioteket som kan velges.</p> <p>For å legge til et element i mediebiblioteket velger vi bare <code>Media</code> seksjon ved å klikke på ikonet nederst til venstre i baksiden, og så snart medieseksjonskoden har lastet inn øverst til venstre, høyreklikker du på Mediemappen og velger <code>Skape</code> fra menyen. I dialogboksen som vises kan vi sette et navn på bildet (husk at navnet vi gir noden er brukt i <code>alt</code> attributt av bildet når det vises på hjemmesiden), og velg <code>Media type</code>. Det er tre forhåndsdefinerte typer vi kan velge fra; en mappe som kan være nyttig når vi har mange forskjellige medieartikler som vi ønsker å kategorisere og lagre på en ordnet måte, en generell <code>Fil</code> skriv eller <code>Bilde</code>, som vi vil bruke i dette tilfellet. Andre medietyper kan enkelt opprettes i <code>innstillinger</code> seksjon.</p> <p>Først når <code>Skape</code> knappen i dialogboksen er klikket, det nye bildeobjektet vil bli opprettet og det høyre panelet av redigereren vil bli fylt med noen egenskaper, inkludert en opplastningsknapp. Vi burde klikke på opplastningsknappen for å velge filen fra datamaskinen vår vi vil laste opp (jeg har et forhåndsdefinert bilde klar på skrivebordet mitt for å laste opp). Når du har valgt bildet for å laste opp og klikket på lagringsikonet i verktøylinjen øverst til høyre, blir bildet en del av mediebiblioteket og vil bli oppført som en knutepunkt i media node-treet. En miniatyrbilde for bildet vil også bli opprettet og vist i <code>eiendommer</code> panelet til høyre, sammen med noen av bildegenskapene:</p> <img src="//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-2_2.jpg"><br> <p>Nå er bildet klar til å bli plukket, så gå tilbake til <code>Innhold</code> delen og velg <code>Hjem</code> node som vi opprettet tidligere. I <code>Banner bilde</code> feltet under tekstområdet klikker du på <code>velge</code> lenke for å åpne plukkeren, som vises i en dialogboks. Klikk på <code>Selskapet gjør dette!</code> knutepunktet i plukkeren, og det vil bli satt inn i <code>Banner bilde</code>e felt. De <code>Hjem</code> node kan nå bli publisert, så klikk på verdensikonet med en disk foran den for å lagre og publisere siden.</p> <p>Det er det; du har laget din første Umbraco-side! Du kan se den nye siden ved å klikke på Forhåndsvis-ikonet (siden med forstørrelsesglasset på den) for å se det i forhåndsvisningsmodus, eller du kan bare åpne en ny kategori i nettleseren din, kopiere URL-adressen til backend-filen, lim det inn i den nye kategorien og slå av alt etter portnummeret.</p> <p>Siden er helt un-styled på dette punktet, men du bør oppdage at introteksten og bildet vi angir i back-end vises på siden, sammen med markeringen opp fra <code>Home.master</code> og <code>Basisside</code> maler. De <code><umbraco:Item></code> elementene har alle blitt fylt, men noen <code><umbraco:Macro></code> elementene vil ikke blitt fylt ut ennå, siden vi trenger å skrive noen XSLT for disse.</p> <hr> <h2>Sammendrag</h2> <p>I denne delen av opplæringen har vi gjennomgått hvordan Umbraco-malene fungerer (de representerer. Nettmastersider), og hvordan de er nestet for maksimal kodeutnyttelse. Nå som vi har opprettet en side, har vi sett hvordan dokumenttyper, maler og noder fungerer sammen for å skape egenskapene vi kan redigere i back-end, og sidene våre besøkende vil se.</p> <p>I neste del av denne serien skal vi opprette resten av sidene for nettstedet og deretter begynne å skrive XSLT som vil bygge topp- og bunnnavigasjon, og hero-panelet, blant annet.</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">Kode</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">Komme i gang med Umbraco Del 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">Komme i gang med Umbraco Del 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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av.
</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="Søke...">
<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