Leaf Overzicht¶

Leaf is een krachtige templating taal met een op Swift geïnspireerde syntax. U kunt het gebruiken om dynamische HTML-pagina's te genereren voor een front-end website of om rijke e-mails te genereren om te verzenden vanuit een API.

Deze gids zal u een overzicht geven van de syntax van Leaf en de beschikbare tags.

Template syntax¶

Hier is een voorbeeld van een basisgebruik van een Leaf tag.

There are #count(users) users.

Leaf tags bestaan uit vier elementen::

Token #: Dit geeft de leaf parser het signaal om te beginnen zoeken naar een tag.
Naam count: die de tag identificeert.
Parameter Lijst (users): Kan nul of meer argumenten aanvaarden.
Body: Een optionele body kan aan sommige tags worden toegevoegd met behulp van een dubbelpunt en een afsluitende tag

Er kunnen veel verschillende toepassingen zijn voor deze vier elementen, afhankelijk van de implementatie van de tag. Laten we eens kijken naar een paar voorbeelden van hoe de ingebouwde tags van Leaf gebruikt kunnen worden:

#(variable)
#extend("template"): I'm added to a base template! #endextend
#export("title"): Welcome to Vapor #endexport
#import("body")
#count(friends)
#for(friend in friends): <li>#(friend.name)</li> #endfor

Leaf ondersteunt ook veel uitdrukkingen die je kent van Swift.

+
%
>
==
||
etc.

#if(1 + 1 == 2):
    Hello!
#endif

#if(index % 2 == 0):
    This is even index.
#else:
    This is odd index.
#endif

Context¶

In het voorbeeld uit Getting Started, hebben we een [String: String] woordenboek gebruikt om gegevens door te geven aan Leaf. Je kunt echter alles doorgeven dat voldoet aan Encodable. Het is zelfs beter om Encodable structs te gebruiken, omdat [String: Any] niet ondersteund wordt. Dit betekent dat je geen array kunt doorgeven, en het in plaats daarvan moet verpakken in een struct:

struct WelcomeContext: Encodable {
    var title: String
    var numbers: [Int]
}
return req.view.render("home", WelcomeContext(title: "Hello!", numbers: [42, 9001]))

Dat zal title en numbers aan ons Leaf sjabloon laten zien, die dan in tags gebruikt kunnen worden. Bijvoorbeeld:

<h1>#(title)</h1>
#for(number in numbers):
    <p>#(number)</p>
#endfor

Gebruik¶

Hier zijn enkele veel voorkomende gebruiksvoorbeelden van Leaf.

Condities¶

Leaf kan een reeks voorwaarden evalueren met de #if tag. Bijvoorbeeld, als je een variabele opgeeft, zal het controleren of die variabele bestaat in zijn context:

#if(title):
    The title is #(title)
#else:
    No title was provided.
#endif

Je kunt ook vergelijkingen schrijven, bijvoorbeeld:

#if(title == "Welcome"):
    This is a friendly web page.
#else:
    No strangers allowed!
#endif

Als je een andere tag wilt gebruiken als onderdeel van je voorwaarde, moet je de # voor de binnenste tag weglaten. Bijvoorbeeld:

#if(count(users) > 0):
    You have users!
#else:
    There are no users yet :(
#endif

Je kunt ook #elseif statements gebruiken:

#if(title == "Welcome"):
    Hello new user!
#elseif(title == "Welcome back!"):
    Hello old user
#else:
    Unexpected page!
#endif

Loops¶

Als je een array van items opgeeft, kan Leaf er een loop overheen maken en je elk item afzonderlijk laten manipuleren met de #for tag.

We zouden bijvoorbeeld onze Swift code kunnen bijwerken om een lijst van planeten te geven:

struct SolarSystem: Codable {
    let planets = ["Venus", "Earth", "Mars"]
}

return req.view.render("solarSystem", SolarSystem())

We kunnen er dan over loopen in Leaf zoals dit:

Planets:
<ul>
#for(planet in planets):
    <li>#(planet)</li>
#endfor
</ul>

Dit zou een view opleveren dat er zo uitziet:

Planets:
- Venus
- Earth
- Mars

Templates Uitbreiden¶

Leaf's #extend tag maakt het mogelijk om de inhoud van een template naar een ander te kopiëren. Wanneer je deze tag gebruikt, moet je altijd de .leaf extensie van het sjabloonbestand weglaten.

Uitbreiden is handig voor het kopiëren van een standaard stuk inhoud, bijvoorbeeld een pagina voettekst, advertentie code of tabel die gedeeld wordt over meerdere pagina's:

#extend("footer")

Deze tag is ook nuttig voor het bouwen van een sjabloon bovenop een ander. Je zou bijvoorbeeld een layout.leaf bestand kunnen hebben dat alle code bevat die nodig is om je website op te maken - HTML structuur, CSS en JavaScript - met enkele gaten op zijn plaats die weergeven waar de pagina-inhoud varieert.

Met deze aanpak maakt u een child template dat zijn unieke inhoud invult, en vervolgens breidt u het parent template uit dat de inhoud op de juiste manier plaatst. Om dit te doen, kun je de #export en #import tags gebruiken om inhoud op te slaan en later weer op te halen uit de context.

Bijvoorbeeld, je zou een child.leaf template als volgt kunnen maken:

#extend("master"):
    #export("body"):
        <p>Welcome to Vapor!</p>
    #endexport
#endextend

We roepen #export aan om wat HTML op te slaan en beschikbaar te maken voor het template dat we nu aan het uitbreiden zijn. We renderen dan master.leaf en gebruiken de geëxporteerde data wanneer nodig, samen met andere context variabelen die zijn doorgegeven door Swift. Bijvoorbeeld, master.leaf zou er zo uit kunnen zien:

<html>
    <head>
        <title>#(title)</title>
    </head>
    <body>#import("body")</body>
</html>

Hier gebruiken we #import om de inhoud van de #extend tag op te halen. Wanneer ["title": "Hi there!"] van Swift wordt doorgegeven, zal child.leaf als volgt renderen:

<html>
    <head>
        <title>Hi there!</title>
    </head>
    <body><p>Welcome to Vapor!</p></body>
</html>

Andere tags¶

`#count`¶

De #count tag geeft het aantal items in een array. Bijvoorbeeld:

Your search matched #count(matches) pages.

`#lowercased`¶

De #lowercased tag maakt alle letters in een string lowercased.

#lowercased(name)

`#uppercased`¶

De #uppercased tag maakt alle letters in een string hoofdletters.

#uppercased(name)

`#capitalized`¶

De #capitalized tag maakt de eerste letter in elk woord van een string hoofdletter en de andere kleine letters. Zie String.capitalized voor meer informatie.

#capitalized(name)

`#contains`¶

De #contains tag accepteert een array en een waarde als zijn twee parameters, en geeft true terug als de array in parameter één de waarde in parameter twee bevat.

#if(contains(planets, "Earth")):
    Earth is here!
#else:
    Earth is not in this array.
#endif

`#date`¶

Het #date label formatteert datums in een leesbare string. Standaard gebruikt het de ISO8601 opmaak.

render(..., ["now": Date()])

The time is #date(now)

Je kunt een aangepaste datum formatter string doorgeven als tweede argument. Zie Swift's DateFormatter voor meer informatie.

The date is #date(now, "yyyy-MM-dd")

`#unsafeHTML`¶

De #unsafeHTML tag werkt als een variabele tag - b.v. #(variabele). Het ontsnapt echter niet aan de HTML die variabele kan bevatten:

The time is #unsafeHTML(styledTitle)

Opmerking

Je moet voorzichtig zijn met het gebruik van deze tag om er zeker van te zijn dat de variabele die je meegeeft je gebruikers niet blootstelt aan een XSS-aanval.

`#dumpContext`¶

De #dumpContext tag geeft de hele context weer in een door mensen leesbare string. Gebruik deze tag om te debuggen wat er wordt wordt geleverd als context voor de huidige rendering.

Hello, world!
#dumpContext

Leaf Overzicht¶

Template syntax¶

Context¶

Gebruik¶

Condities¶

Loops¶

Templates Uitbreiden¶

Andere tags¶

#count¶

#lowercased¶

#uppercased¶

#capitalized¶

#contains¶

#date¶

#unsafeHTML¶

#dumpContext¶