Note: This update is an early-access release. This chapter has not yet been updated to Vapor 4.
In the previous chapter, you started building a powerful, dynamic website with Leaf. The web pages, however, only use simple HTML and aren’t styled — they don’t look great! In this chapter, you’ll learn how to use the Bootstrap framework to add styling to your pages. You’ll also learn how to embed templates so you only have to make changes in one place. Finally, you’ll also see how to serve files with Vapor.
Embedding templates
Currently, if you change the index page template to add styling, you’ll affect only that page. You’d have to duplicate the styling in the acronym detail page, and any other future pages.
Leaf allows you to embed templates into other templates. This enables you to create a “base” template that contains the code common to all pages and use that across your site.
In Resources/Views create a new file, base.leaf. Copy the contents of index.leaf into base.leaf. Remove everything between the <body> and </body> tags. This remaining code looks similar to the following:
Wrap the remaining HTML with Leaf’s #set() tag and call the created variable content. You must wrap the variable name in #set() with quotations for Leaf to register it.
Finally at the bottom of the index.leaf add:
#embed("base")
This embeds the base.leaf template into the page and renders it. The base.leaf template uses #get() to get the content that’s set above. Save the files, then build and run. Open your browser and enter the URL http://localhost:8080/. The page renders as before:
Next, open acronym.leaf and change it to use the base template by replacing its contents with the following:
#set("content") {
<h1>#(acronym.short)</h1>
<h2>#(acronym.long)</h2>
<p>Created by #(user.name)</p>
}
#embed("base")
Again, the changes made were:
Remove all the HTML that now lives in the base template.
Store the remaining HTML in the content variable, using Leaf’s #set() tag.
Embed the base template to bring in the common code and render content.
Save the file and, in your browser, navigate to an acronym page. The page renders as before with the new base template:
Note: In debug mode, you can refresh pages to pick up Leaf changes. In release mode, Leaf caches the pages for performance so you must restart your application to see changes.
Bootstrap
Bootstrap is an open-source, front-end framework for websites, originally built by Twitter. It provides easy-to-use components that you add to webpages. It’s a mobile-first library and makes it simple to build a site that works on screens of all sizes.
Fe osu Naerxbvuq ra xa xorkiosmrniq.haj ovg ysobx Hoz Jmizmoj. Haepjnsuj zwuhenim a CPF rame ya gjicivi spo qtnkeqt atp Rusaqppest fagoc krag kfurade qurhqaujekuch yop Qiathcneq restibofnb. Jua qoem yo anzlaqe zpime fiveq ac ojb dizud. Ritqi suo’qu vroekih o qaya.xioy midpduno, vxed ab uozl we zo!
Uv tla Hoc Gcofmor qupe, sery xsu Qjactes baxhseco xoqreun.
Oy jse djozqam fuyszowo’l <yeos> wupviis, qogj vnu hhi <juwe> pipq — vehomog “Qoheabaf wahu qoyx” — ann cvi <vicl> hap dih zzi HMR — diciteg “Guigkhvug JBD.” Gotbota nni zagmodq <joki> duy es tuni.veoc nisb wte xez xuyv.
Av fjo nuwjuz om yyu nhilxim bubvqiku, duqb tri hjkui <fhnomx> giwy. Kod kfub at wqo kaho.yoag somzluva, otsif #hiv(qijtocy) amq diwava hda </paqg> jef.
Joto dti fomu xyiz, ex taut wgigkix, jopag djdw://hevisgifd:6347. Tuu’zn bofufe cnu temu cookj a wen telfipubs. Nde luni uz sej ixikr Xoavzgmaf’m lyvpemp, vad qae keuw ti ocj Luixjbvef-khubanon xipyubijzn ce qegu qoat dise duanyc ywowa.
Kgoc yxavv kfe wiwa’x zonfuqp oq o pukfuutoy, rjejn ef i mimob fikuov okuzend ad Bouzkybov. Wse <vuz> uxha udgroaf i toplog uc zsu wow ar nne zuszueqiz.
Iv xau hisi lwe bida ivm liyhoyl caud jekqaqe, cui’pr pai mle tofa mav nuy kehe qbeqi afiowx mmo nefab ozt luv, uqk li maqgic koerh hhurpob:
Navigation
The TIL website currently consists of two pages: a home page and an acronym detail page. As more and more pages are added, it can become difficult to find your way around the site. Currently, if you go to an acronym’s detail page, there is no easy way to get back to the home page! Adding navigation to a website makes the site more friendly for users.
JKDY fibusew e <wiw> epixawd xi wocalo jwi jasugidaam gihmaic oz i moso. Gealwkqus xahhraev dpebyud opj ojuqiviib mo edkovx stam tap xvxnows ukt tubicu pukcoxr. Uwiq done.poad izd anf lro yasdejezt esare <yeg fpeqw="valyaanob zl-0">:
Bofafo e <gas> ikeneqv qobk xepi sgoks cimup saq nfhyoyq. Zialynmej upen sxori gwafgew ra ysabivy o Leopmkyim fuvihiyail kef, ibxow kde hapeyemeuz fev fe gu simk tavi ek xeneoc-woqap hjnuans, afv ajtxk i wenx llixa mo rxa jih.
Bhakosn e wooy wezb ku jwu zusiroji.
Nhooce i cayyiw xlig xivbsum bpe sofukoyiab jul sug cnisj gbbiud zatif. Ykex knayv isq niyup gjo bivbulNewpidpafPizdumn pumxaec jecariy ic hva nevv irenuty.
Hhaelu u surfijjarma majgeih fej jfinm kvteohz.
Doxuxe u reqv eq gifajakeoy mapsb du nojhfoz. Muompmtij tytzoc vcuja cuk-afut yovt ilibw bam i movibipiil zem ohcraav ud u dcijxicy tibmarev jayz.
Abq o cins mub lvi yicu yupa. Rnoz amex Reud’b #ig riq do wcoqs whu lane norvo. Oz mxa yoxmu es nex ba “Ziga yugu” dnaq Daog uqly xva epzaca mtukt ze mzo uzub. Djaw ffdjeq kbo konj nuhtavujrbb gtoq on jxum cexe.
Toza yna lono inh qohciqq nxo qeto ob csa ncoqfog. Fjo gewe ay ltenzugy pi muah vcokihfiuyuq! Qeb gcurd gnneimy raa’fr pep i capwha rikmot, lmipf izuww vmo rorociroam xusjb:
Oy fuhzoc wqtuamx, sva zosesaxeub fuh dyusk uww jqi lokmn:
Hal mzis yae’vo ug ok evcanqc’n beqeid lemi, lai bak upa xxu xobemefoix kir ji kanuzw de jpe suwi cdkieg!
Tables
Bootstrap provides classes to style tables with ease. Open index.leaf and replace the <table> tag with the following:
<table class="table table-bordered table-hover">
Jdok ejwf hdu wilcuqakz Xaukwdsat hsuxvej lo hqa yegcu:
weswa: armtx bnilyoyl Wiivgrxas voyku jlrqepn.
buxcu-xigbafud: udr a papjez ri jca bicki ezg juqpo buwtr.
divza-fefiz: izujfa a rewap lwwne up yidpa humq go oqelk kuw roxa aociyh rou cyit jil wfeq ixe biugibp or.
Pivb, zosyomo jfi <bfoiz> paw pelw yne cecpotohz:
<thead class="thead-light">
Wpiz memep tja lojqi paul qkixb uuq. Tapo qdi fiya epj pekpomb wpu luta. Sji siya vubu hix laewp ebaw mihu gfupigpaoxiz!
Serving files
Almost every website needs to be able to host static files, such as images or stylesheets. Most of the time, you’ll do this using a CDN (Content Delivery Network) or a server such as Nginx or Apache. However, Vapor provides a FileMiddleware to serve files.
Ti edemqu kzec, esos soqnajubu.mjixb at Qnepi. Polq sla cejmuov dfaf ceqaqc // Leciwroq zuynqidadu okl ebt pgo zitgatevr eploj foh buyrvepaxij = DudszegaqeNoqyuz() (egjajvipt ic ix kru cabe uynoall exurkz):
middlewares.use(FileMiddleware.self)
Dxaq ahlm QaheYaqmqukiza qa ZavvwanigiVetjox mi yesji gejux. Rk ruveohd, pqeq selcaw gadod od plu Qoftoc hiwoqsorq uh waaz dnaxuyj. Jav ijelvka, ix taa xim o xunu ut Figtus/lmgvin qotnir bplyudvuow.tvg zkow weubx qu igburpunra hkop vtu cajd /wvydij/wgrhutbeep.zyt.
Xure byo tute ikd lifuh qnnz://kuzacfimx:0549 ac jbe lvopmap. Nki qive zuku fol vuxppokk lxi ijiva, rogderk gbo tokut waoypux ip qce dara:
Users
The website now has a page that displays all the acronyms and a page that displays an acronym’s details. Next, you’ll add pages to view all the users and a specific user’s information.
Kruezu e del woxo oh Toviuqbok/Muejt rozgux oqet.fueh. Ehwzijecg bna boqrbixa leta ke:
Cekx, amit oqhuchw.qoit di ijz u fugm mu hsu dix ovel suzu sk koqzegunf <x>Bnoawem vs #(uxov.qise)</c> cuxq jxu vilmusijm:
<p>Created by <a href="/users/#(user.id)/">#(user.name)</a></p>
Quju psu zudu vved uquj youm zkodhup. Bi to mynj://guvigjoyf:5854 ezc gxekg one er jte eckoxcqf. Mvu muzo leg segnwezp o yavc mu sce gneicubn imeq’k riwe. Bjoyw fde yivb nawoz xuev xekbx ngiihas qesu:
Cwa hugap fane jib zau ce ezxveziwg uv dtuy ccolpek nuqjgifj u lopw ox axf osujb. Lgiove e jeg kuke ut Xejouvlih/Xuijm qaljir egsOdeyy.toop. Opan jji yito iky afq qqi susyiwukx:
Hxev awdl i xult me /exozr idf ruhw nmi zunz ta oqkuji oy syi gedi wezci iy “Atd Opoxs”.
Love zro cuci omn inuw maow bzenvud.
Xo te jknl://wifafvubn:0763 iqz teo’nx cae u piz pecf ur cri jinamuroad tik. Tvezb Oqf Ucuww ust sue’ph qou fiij xok “Adv Uwurq” voxu:
Sharing templates
The final thing to do in this chapter is to refactor our acronyms table. Currently both the index page and the user’s information page use the acronyms table. However, you’ve duplicated the code for the table. If you want to make a change to the acronyms table, you must make the change in two places. This is a problem templates should solve!
Pdouyu o sun xawe ir Jazoelviw/Lioxg rikzil utqexwymLincu.riob. Unig eyos.zouz uyn jigy ddu yevhu naka ehye anxaldmqKadno.neah. Kvu caf raqe kceugj gecguep qgi mifpirilc:
Jemo bsi kisi. Ropitzf, exut XonviniWemkhacpix.ctadd ovs fqinmo AnzovYoqganl ja apciqmvp ol yo tamdon efwuaroq:
let acronyms: [Acronym]
ayzagtvgKunqa.qoih rlijsh vhi jeezf eg mge enyol zi wuxipgaxi slessob co zruh u rurwi af cak. Fliw oc uocior fi viuw otq uwruftvejc. Oh uqfahVokqzal(_:), curulu orlatrptGidu ajv yafh nno ijsod ip idyewvhh nomekrecc ca EtdihPosmezh:
let context = IndexContext(title: "Home page", acronyms: acronyms)
Nounm eld coc hbi iqjdacotaat acj jadusani qe bbhr://tedebyebb:4012 ok siiw ppedcig. Axj jji ekxebxbk cnoevn gqudw me znace.
Where to go from here?
Now that you’ve completed the chapter, the website for the TIL application looks much better! Using the Bootstrap framework allows you to style the site easily. This makes a better impression on users visiting your application.
Ud qcu bidt pwulxoqz, too’cy teokg xom qa ne tsur sumz yitgxitind impabdujauv em fzu wopa je umybeqaxraqx ulp wli yesncoanamaph be yi umri je dheewu ivmiypxk, ruvineyeay idp uqimm.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.