Jinja2 er en malmotor skrevet i ren python. Den gir en Django-inspirert ikke-XML-syntaks, men støtter inline-uttrykk og et valgfritt sandkassert miljø. Den er liten, men rask, bortsett fra å være en brukervennlig frittstående malmotor. Flask er et Python-basert Micro Web-rammeverk som lar deg skrive dine webprogrammer raskt og effektivt.

I denne tredelte serien begynner jeg med grunnleggende Jinja2-templering fra Flaskens perspektiv. I de etterfølgende delene av denne serien skal jeg dekke avanserte templerende emner mens jeg lærer å legge ut maler i en flaskebasert applikasjon i en modulær og utvidbar design.

Jeg antar at du har en grunnleggende forståelse av flask og miljøoppsett beste praksis ved hjelp av virtualenv som skal følges mens du utvikler en Python-applikasjon.

Installere pakker

Kolben kommer pakket med Jinja2, og derfor trenger vi bare å installere Flask. For denne serien anbefaler jeg at du bruker utviklingsversjonen av Flask, som inneholder mye mer stabil kommandolinjestøtte blant mange andre funksjoner og forbedringer av Flask generelt.

pip installere https://github.com/mitsuhiko/flask/tarball/master

Behov for en Templating Engine?

I flaske kan vi skrive et komplett webprogram uten behov for noen tredjeparts templeringsmotor. La oss ta en titt på en liten Hei Verden app nedenfor:

fra kolbe import Flask app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hei') @ app.route ('/ hei /') def hello_world (bruker = Ingen): bruker = bruker eller' Shalabh 'retur "     
Hei% s!
 
Velkommen til flaskens verden!
  "% bruker hvis __name__ == '__main__': app.run ()

Det er åpenbart at det ovennevnte mønsteret for å skrive et program ikke er mulig i tilfelle av en ekte webapplikasjon hvor HTML, CSS og JS-kode varierer i tusenvis av kodelinjer. Her sparer templering oss fordi vi kan strukturere visningskoden ved å holde våre maler skilt. Flask gir støtte for Jinja2 som standard, men enhver annen templerende motor kan også brukes som egnet.

Legge ut maler

Flask forventer som standard at maler skal plasseres i en navngitt mappe maler på applikasjonsrotenivået. Kolbe leser deretter innholdet automatisk ved å gjøre denne mappen tilgjengelig for bruk med render_template () metode. Jeg vil demonstrere det samme ved å omstrukturere det trivielle Hei Verden søknad vist ovenfor.

Søknadsstrukturen vil være som vist nedenfor.

flask_app / my_app.py maler / - index.html

Søknaden selv

flask_app / my_app.py

fra kolbeimport Kolbe, render_template, request app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ hei /') def hello_world (bruker = Ingen): bruker = bruker eller' Shalabh 'return render_template (' index.html ', bruker = bruker)

flask_app / templates / index.html

     
Hei bruker!
 
Velkommen til flaskens verden!
  

For å kjøre programmet, utfør bare kommandoen på kommandolinjen:

kolbe --app = my_app kjøre

Åpne http://127.0.0.1:5000/ i en nettleser for å se applikasjonen i aksjon. Resultatet ville være det samme i tilfelle av http://127.0.0.1:5000/hello også.

Prøv å åpne nettadressen med navnet ditt som den siste delen av det. Så hvis navnet ditt er John, ville nettadressen være http://127.0.0.1:5000/hello/John. Nå vil siden se slik ut:

Det er ganske greit det i metoden Hei Verden Den siste delen av URL-adressen etter Hallo hentes fra forespørselen og sendes til konteksten til malen som blir gjengitt ved bruk render_template (). Denne verdien blir deretter analysert fra malekonteksten ved hjelp av Jinja2-plassholderen bruker. Denne stedholderen evaluerer alle uttrykkene som er plassert inne i det, avhengig av malekonteksten.

Forstå blokker og arv i maler

Vanligvis vil enhver webapplikasjon ha en rekke nettsider som vil være forskjellige fra hverandre. Kodeblokker som overskrifter og bunntekster vil være de samme på nesten alle sidene i hele nettstedet. På samme måte forblir menyen også den samme. Faktisk, vanligvis, bare sentrumsbeholderblokken endres, og resten forblir vanligvis den samme. For dette gir Jinja2 en god arv blant malene. Det er en god praksis å ha en grunnmal hvor vi kan strukturere grunnleggende layout på nettstedet sammen med topptekst og bunntekst.

Jeg vil lage et lite program for å vise frem en liste over produkter under forskjellige kategorier. For styling vil jeg bruke Bootstrap-rammeverket for å gi et grunnleggende design til malene. Søknadsstrukturen er nå som vist nedenfor.

flask_app / my_app.py maler / - base.html - home.html - product.html static / css / - bootstrap.min.css - main.css js / - bootstrap.min.js

Her statisk / css / bootstrap.min.css og statisk / JS / bootstrap.min.js kan lastes ned fra bootstraps nettsted nevnt ovenfor. Resten av søknadskoden er vist nedenfor.

flask_app / my_app.py

fra kolbe import Flask, render_template, abort app = Flask (__ name__) PRODUKTER = 'iphone': 'navn': 'iPhone 5S', 'kategori': 'Telefoner', 'pris': 699,, 'galakse' : 'navn': 'Samsung Galaxy 5', 'kategori': 'Telefoner', 'pris': 649,, 'ipad-air': 'navn': 'iPad Air', 'category': 'Tabletter '' 'Mini', 'kategori': 'Tabletter', 'pris': 549 @ app.route ('/') @ app.route ('/ home') def home (): return render_template ('home.html', produkter = PRODUKTER) @ app.route ('/ produkt /') def produkt (nøkkel): produkt = PRODUCTS.get (nøkkel) hvis ikke produkt: abort (404) return render_template (' product.html ', produkt = produkt) 

I denne filen har jeg hardkodet produktlisten for å gjøre applikasjonen enklere og bare fokusere på den templerende delen. Jeg har skapt to endepunkter, hjem og produkt, hvor den tidligere tjener formålet med å notere alle produktene og sistnevnte åpner opp den enkelte side.

flask_app / statisk / css / main.css

kropp polstring-topp: 50px;  .top-pad polstring: 40px 15px; tekst-align: center; 

Denne filen inneholder litt tilpasset CSS som jeg la til for å gjøre maler mer lesbare. La oss se på malene nå.

flask_app / templates / base.html

            
 % blokkbeholder% % endblock% 
     

Legg merke til bruken av url_for () for å lage nettadresser for statiske filer og andre linker. Det er et veldig praktisk verktøy som leveres av Flask. Les mer om dette i dokumentasjonen. Et annet viktig poeng å merke seg her er bruken av % blokkbeholder% % endblock%, som er svært viktig komponent i Jinja2 som arbeider for å gjøre malene modulære og arvelige. De neste par filene vil gjøre dette klarere.

flask_app / templates / home.html

% utvider 'base.html'% % blokkbeholder% 
 % for id, produkt i products.iteritems ()% 
 
 Produktnavn']  $ produkt ['pris'] 
 
 % endfor% 
 % endblock%

Se hvordan denne malen strekker seg ut base.html og gir innholdet i % blokkbeholder%. % for% oppfører seg som en normal for sløyfe på et hvilket som helst språk som vi bruker her for å lage en liste over produkter.

flask_app / templates / product.html

% utvider 'home.html'% % blokkbeholder% 
 
 Produktnavn']   produktkategori']  
 
$ produkt ['pris']
 
 % endblock%

Ovenstående mal implementerer den individuelle produktsiden.

Kjør nå appen ved å utføre følgende kommando.

kolbe --app = my_app kjøre

Den løpende appen vil se ut som den som vises i skjermbildet nedenfor. Bare åpne http://127.0.0.1:5000/home i nettleseren.

Klikk på noen av produktene for å se den enkelte produktside.

Konklusjon

I denne opplæringen har vi sett hvordan man legger ut malstrukturen i en flaskebasert applikasjon ved hjelp av Jinja2. Vi så også hvordan blokker kan brukes til å utnytte arven i maler. 

I neste del av denne serien ser vi hvordan du skriver et egendefinert filter, en tilpasset kontekstprosessor og en makro.