Paprastas šablonavimas,

Skip to content

Tai mašinu versta tekstas, kuriame gali būti klaidų!

Galiausiai, Python ir HTML bus sujungti!

Dabar mes žiūrėsime į tai, kas vadinama Jinja Templating.

Templating yra būdas automatizuoti tinklalapių kūrimą, naudojant scenarijų kalbą, žinomą kaip Jinja. Tai leis mums generuoti tinklalapius, remiantis informacija, siunčiama iš žiniatinklio serverio.

Nustatymas

Prieš pradėdami, mums reikia kelių failų ir aplankų, su kuriais dirbsime.

Jei naudojate PyCharm projektą, tai bus nustatyta automatiškai. Jei naudojate ką nors kita, turėsite tai nustatyti rankiniu būdu. Laimei, aplankų struktūra yra gana paprasta.

Pagrindiniame projekto aplanke (toje pačioje vietoje, kur yra app.py) turi būti du aplankai.

Nustatymas atrodys taip:

📁ProjektųKatalogas
    📁static
    📁templates
    🐍app.py

Apžvalga, kas kur turi būti:

  • 📁static aplankas turi būti naudojamas visoms „statinėms“ failams. Tai reiškia, failams, kurie nepasikeis. Pavyzdžiai yra .css stiliaus lapai, .js JavaScript failai, paveikslėliai, vaizdo įrašai, muzika ir kiti failai, kurie, jūsų nuomone, tinka.
  • 📁templates aplankas turi būti naudojamas visiems HTML failams, kurie gali būti generuojami, sužinosime apie tai vėliau šioje dalyje.
  • 🐍app.py yra kaip anksčiau, ir tai yra vieta, kur rašome žiniatinklio serverio kodą. Tai yra maršrutai ir visa kita funkcionalumas, kurį serveris turėtų prisiimti.

📁Kitos aplankos?

Tu gali turėti kitų aplankų šiuose aplankuose, mes prie to grįšime. Pavyzdžiui, jei nori aplanko nuotraukoms, gali sukurti img aplanką static.

Tada aplankų struktūra gali atrodyti taip:

📁ProjektųAplankas
    📁static
        📁img
            🖼️banner.png
    📁templates
    🐍app.py

Grįšime prie to, kaip tai naudojama, vėliau.

Tu gali pasirinkti tęsti tai, ką darėi 1 lygyje, arba sukurti naują projekto aplanką. Šis lygis turėtų būti pradėtas nuo naujo, tačiau tu gali nukopijuoti šį pradinį kodą, kuris turi būti įdėtas į failą app.py:

Startkode 
from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "Heisann!" # koden vi skal skrive skal legges inn her

if __name__ == "__main__":
    app.run(debug=True)

Easy Užduotis 1 – Pagrindinis atvaizdavimo šablonas

Prieš galėdami naudoti „atvaizdavimo šabloną“, mums reikia failo, kurį „atvaizduoti“. Kaip paaiškinta aukščiau, visi šablonų failai turi būti templates kataloge.

Užduotis 1a

Sukurkite naują failą pavadintą index.html templates kataloge.

Užduotis 1b – Šablono kodas

Atidarykite failą ir įveskite šiek tiek HTML kodo. (Žemiau galite rasti kodą, kurį galite kopijuoti, jei nenorite rašyti savo paties kodo čia).

Šablono kodas iš esmės yra tik grynas HTML kodas, tačiau su kai kuriomis papildomomis scenarijų savybėmis, kurias aptarsime vėliau.

Eksempel Template Kode (uten spesiell syntaks) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Templating</title>
</head>
<body>
    <h1>Sveiki iš Flask šablono!</h1>
    <p>Tai mano pirmoji šablono puslapis!</p>
</body>
</html>

Easy Užduotis 2 – Visko surinkimas

Galiausiai, mes išsiųsime tai iš mūsų žiniatinklio serverio.

Mes panaudosime naują funkciją ir import, vadinamą render_template.

Užduotis 2a

Pakeiskite importus app.py kode, įtraukdami render_template kaip importą. Jis yra flask bibliotekoje.

Løsning 
from flask import Flask, render_template

Čia naudojama kelių importų vienoje eilutėje, kas gali atrodyti šiek tiek tvarkingiau!

Užduotis 2b – render_template funkcijos naudojimas

Dabar paverčiame mūsų index maršrutą, kad jis naudotų šabloną. Tai labai paprasta Flask. Viskas, ko jums reikia maršrute, yra šie:

# Returnerer malen index.html
return render_template("index.html")

Viskas kita vyksta visiškai automatiškai.

Pass på!

Taigi, ***ne***rašykite "templates/index.html". Tai todėl, kad turime specialų aplanką šablonams!

Mappestruktūra?

Tačiau tai, ką galite padaryti, yra turėti aplanką jūsų templates aplanke kažkam.

📁Projektas
    📁static
    📁templates
        📁banner
            📄navigation.html
    🐍app.py

Jei tai padarysite, turite įtraukti vidinį aplanko pavadinimą.

return render_template("banner/navigation.html")

Hele koden så langt 
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

Visas kodas iki šiol.

Pabandykite dabar paleisti kodą kaip 1 lygyje, tada pereikite į nuorodą, kas atsitinka? 😎

Hurra! Dabar turite žiniatinklio serverį ir svetainę!

Dabar: Šiek tiek paprasto Jinja kodo

Medium Užduotis 3 – Stiliavimas naudojant statinį CSS

Pradėkime pridėti paprastą stilių šablonui.

Visų pirma, sukurkite naują failą savo static kataloge, pavadinkite jį, pavyzdžiui, style.css. Čia galite įdėti šiek tiek stiliavimo anksčiau sukurtam šablono failui.

Čia panaudosime naują funkciją, vadinamą url_for. Ji automatiškai (🧙‍♂️) sukurs teisingą nuorodą į nurodytą failą.

url_for yra „Jinja“ funkcija. Jinja aptarsime daugiau 3 lygyje, tačiau tai yra scenarijų kalba šablonams. Darysime tik tai, kad susiesime su CSS stilių lapu.

Jinja Syntax

Kodas Jinja scenarijuose pateks į dvigubas riestines skliautas {{ heisann }} arba naudojamas šia sintakse: {% put something here %}

Norint naudoti funkciją url_for, tiesiog vadovaukitės įprasta Python sintakse tarp {{ ir }}.

pavyzdys url_for()

url_for('static', filename='style.css')

Ši kodo eilutė praneša Flask (iš tikrųjų), kad čia norime nuorodą į failą style.css, kuris yra static aplanke (šiek tiek supaprastinta, bet apytikriai taip).

Tai galima naudoti šablonuose įdėjus tarp {{ }}.

Užduotis 3a

Įdėkite kodą, kad šablone <head></head> susietumėte CSS stiliaus lapą.

Prisiminkite! CSS stiliaus lapą susieti naudojamas <link> žymė! Jei nesate tikri, galite atnaujinti žinias čia: HTML link tag.

Løsning 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Templating</title>
    <!-- Dette er den nye linjen med kode -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Halla fra Flask Template!</h1>
    <p>Dette er min første template side!</p>
</body>
</html>

Čia matote, kad buvo panaudota {{ }} Jinja sintaksė.

Kodėl gi neparašyti failo pavadinimo?

Geras klausimas! Nors tai gali jums pavykti, greičiausiai susidursite su klasikine programavimo problema: „Pas mane veikia!“

Nors failo pavadinimas yra teisingas šiuo metu, nebūtinai jis bus teisingas, kai paleisite žiniatinklio serverį kitoje mašinoje nei jūsų.

Todėl naudojame funkciją url_for, ji pataiso nuorodą už jus!

Papildomos užduotys

Oppgave 1: Beregn gjennomsnittlig hastighet

a) En bil kjører 240 km på 3 timer. Hva er gjennomsnittshastigheten i km/t?
b) En syklist sykler 60 km på 4 timer. Hva er gjennomsnittshastigheten i km/t?

Oppgave 2: Konverter enheter

a) Konverter 150 cm til meter.
b) Konverter 2.5 kg til gram.

Oppgave 3: Areal og omkrets

En rektangel har lengde 10 cm og bredde 5 cm.
a) Hva er arealet av rektangelet?
b) Hva er omkretsen av rektangelet?

Oppgave 4: Prosentregning

a) Hva er 20% av 80?
b) 30 er 10% av hvilket tall?

Medium Užduotis E1 – Daugiau šablonų!

Pridėkite keletą daugiau maršrutų ir šablono puslapių, jums nereikia galvoti apie jų sujungimą, bet galite pabandyti tai padaryti!

Hint for linking

Jeigu norite susieti puslapius, galite naudoti <a> su url_for. Skaitykite daugiau apie tai čia: CodeConda url_for.

Hard Užduotis E2 – Paveikslėliai? Sūrinkite! 😁

Pabandykite įdėti keletą paveikslėlių į atskirą aplanką, pavadintą images, aplanke static. Tada pabandykite susieti juos naudodami url_for savo šablone.