mirror of https://github.com/vapor/docs.git
- Added Leaf documentation (copied from Leaf README)
- Modified views docs to add Leaf
This commit is contained in:
parent
fc67a8f81b
commit
22314737ef
|
|
@ -27,6 +27,7 @@ Here are a list of all the Swift 3, linux-ready packages and modules provided op
|
|||
- WebSockets: Full-duplex communication channels over a single TCP connection.
|
||||
- SMTP: Send email using Sendgrid and Gmail.
|
||||
- Transport: Streams and transfer protocols.
|
||||
- [Leaf](https://github.com/vapor/leaf): An extensible templating language built for Vapor.
|
||||
- [JSON](https://github.com/vapor/json): Maps Foundation JSON to Swifty enum.
|
||||
- [Console](https://github.com/vapor/console): Swift wrapper for console IO and commands.
|
||||
- [Node](https://github.com/vapor/node): A formatted data encapsulation meant to facilitate the object conversions.
|
||||
|
|
|
|||
|
|
@ -50,6 +50,9 @@ menu:
|
|||
guide-views:
|
||||
text: Views
|
||||
relativeUrl: guide/views.html
|
||||
guide-leaf:
|
||||
text: Leaf
|
||||
relativeUrl: guide/leaf.html
|
||||
guide-middleware:
|
||||
text: Middleware
|
||||
relativeUrl: guide/middleware.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
currentMenu: guide-leaf
|
||||
---
|
||||
|
||||
# Leaf
|
||||
|
||||
Welcome to Leaf. Leaf's goal is to be a simple templating language that can make generating views easier. There's a lot of great templating languages, use what's best for you, maybe that's leaf! The goals of leaf are as follows:
|
||||
|
||||
- Small set of strictly enforced rules
|
||||
- Consistency
|
||||
- Parser first mentality
|
||||
- Extensibility.
|
||||
|
||||
## Syntax
|
||||
|
||||
Leaf syntax is based around a single token, in this case, the hashtag: `#`.
|
||||
|
||||
>It's important to note that _all_ hashtags will be parsed, there is no escaping. Use `#()` to render a plain `#`. `#()Leaf` => `#Leaf`. Or, for larger sections, use the `raw` tag. `#raw() { #Do #whatever #you #want #to #in #here!. }`
|
||||
|
||||
#### Structure
|
||||
|
||||
Here we see all the components of a Leaf tag.
|
||||
|
||||
```leaf
|
||||
#someTag(parameter.list, goes, "here") {
|
||||
This is an optional body here
|
||||
}
|
||||
```
|
||||
|
||||
##### Token
|
||||
|
||||
>The `#` token will define we're a tag
|
||||
|
||||
##### Name
|
||||
|
||||
>In above example, it would be `someTag`. While not strictly enforced, it is HIGHLY encouraged that users only use alphanumeric characters in names. This may be enforced in future versions.
|
||||
|
||||
##### Parameter List
|
||||
|
||||
> Var(parameter, list), Var(goes), Const("here")
|
||||
|
||||
##### Body
|
||||
|
||||
> This is an optional body here indicated w/ open and closed curly brackets.
|
||||
|
||||
#### Using # in html with Leaf
|
||||
|
||||
If you need # to appear alone in your html, simply using `#()` will render as #. Alternatively, the raw tag is available for larger sections of code:
|
||||
|
||||
```leaf
|
||||
#raw() {
|
||||
Do whatever w/ #'s here, this code
|
||||
won't be rendered as leaf document.
|
||||
It's a great place for things like Javascript or large HTML sections.
|
||||
}
|
||||
```
|
||||
|
||||
## Syntax Highlighting
|
||||
|
||||
### Atom
|
||||
|
||||
[language-leaf](https://atom.io/packages/language-leaf) by ButkiewiczP
|
||||
|
||||
## Examples
|
||||
|
||||
#### Variable
|
||||
|
||||
Variables are added w/ just a number sign.
|
||||
|
||||
```leaf
|
||||
Hello, #(name)!
|
||||
```
|
||||
|
||||
#### Loop
|
||||
|
||||
Loop a variable
|
||||
|
||||
```leaf
|
||||
#loop(friends, "friend") {
|
||||
Hello, #(friend.name)!
|
||||
}
|
||||
```
|
||||
|
||||
#### If - Else
|
||||
|
||||
```leaf
|
||||
#if(entering) {
|
||||
Hello, there!
|
||||
} ##if(leaving) {
|
||||
Goodbye!
|
||||
} ##else() {
|
||||
I've been here the whole time.
|
||||
}
|
||||
```
|
||||
|
||||
#### Chaining
|
||||
|
||||
The double token, `##` indicates a chain. If the previous tag fails, this tag will be given an opportunity to run. It can be applied to any standard tag, for example, above we chain to else, but we could also chain to loops.
|
||||
|
||||
```
|
||||
#ifEmpty(friends) {
|
||||
Try adding some friends!
|
||||
} ##loop(friends, "friend") {
|
||||
<li> #(friend.name) </li>
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Tags
|
||||
|
||||
Look at the existing tags for advanced scenarios, let's look at a basic example by creating `Index` together. This tag will take two arguments, an array, and an index to access.
|
||||
|
||||
```
|
||||
class Index: BasicTag {
|
||||
let name = "index"
|
||||
|
||||
func run(arguments: [Argument]) throws -> Node? {
|
||||
guard
|
||||
arguments.count == 2,
|
||||
let array = arguments[0].value?.nodeArray,
|
||||
let index = arguments[1].value?.int,
|
||||
index < array.count
|
||||
else { return nil }
|
||||
return array[index]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now, after creating our `Stem`, we can register the tag:
|
||||
|
||||
```
|
||||
stem.register(Index())
|
||||
```
|
||||
|
||||
And use it like so:
|
||||
|
||||
```
|
||||
Hello, #index(friends, "0")!
|
||||
```
|
||||
|
||||
We can also chain `else` to this like we did earlier if we want to check existence first:
|
||||
|
||||
```
|
||||
#index(friends, "0") {
|
||||
Hello, #(self)!
|
||||
} ##else() {
|
||||
Nobody's there!
|
||||
}
|
||||
```
|
||||
|
|
@ -22,11 +22,11 @@ drop.get("html") { request in
|
|||
|
||||
## Templating
|
||||
|
||||
Templated documents like mustache or stencil templates can take a `Context`.
|
||||
Templated documents like [Leaf](./leaf.html), Mustache, or Stencil can take a `Context`.
|
||||
|
||||
```swift
|
||||
drop.get("template") { request in
|
||||
return try drop.view("index.template", [
|
||||
return try drop.view("index", [
|
||||
"message": "Hello, world!"
|
||||
])
|
||||
}
|
||||
|
|
@ -41,16 +41,17 @@ Any resources that your views need, such as images, styles, and scripts, should
|
|||
Any class that conforms to `ViewRenderer` can be set to render views with a given context.
|
||||
|
||||
```swift
|
||||
class MustacheRenderer: RenderDriver {
|
||||
class LeafRenderer: RenderDriver {
|
||||
...
|
||||
}
|
||||
|
||||
View.renderers[".mustache"] = MustacheRenderer()
|
||||
View.renderers[".leaf"] = LeafRenderer()
|
||||
```
|
||||
|
||||
## Available Renderers
|
||||
|
||||
These renderers can be added to your application through Providers.
|
||||
|
||||
- [Leaf](https://github.com/vapor/leaf)
|
||||
- [Mustache](https://github.com/vapor/mustache-provider)
|
||||
- [Stencil](https://github.com/vapor/stencil-provider)
|
||||
Loading…
Reference in New Issue