vweb: tmpl: add docs
							parent
							
								
									a02aff9126
								
							
						
					
					
						commit
						76dc7eea50
					
				| 
						 | 
					@ -0,0 +1,109 @@
 | 
				
			||||||
 | 
					This package is to generate data-driven HTML output.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					# Directives
 | 
				
			||||||
 | 
					Each directive begins with an `@` sign.
 | 
				
			||||||
 | 
					Some directives begin contains a `{}` block, others only have `''` (string) parameters. More on the directives itself.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					Newlines on the beginning and end are ignored in `{}` blocks, otherwise this (see [if](##if) for this syntax):
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					@if bool_val {
 | 
				
			||||||
 | 
					    <span>This is shown if bool_val is true</span>
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					would result in:
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <span>This is shown if bool_val is true</span>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					which could result in unreadable output.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## if
 | 
				
			||||||
 | 
					The if directive consists of three parts, the `@if` tag, the condition (same syntax like in V) and the `{}` block where you can write html which will be rendered if the condition is true:
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					@if <condition> {}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### Example
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					@if bool_val {
 | 
				
			||||||
 | 
					    <span>This is shown if bool_val is true</span>
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					One-liner:
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					@if bool_val { <span>This is shown if bool_val is true</span> }
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					The first example would result in:
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					    <span>This is shown if bool_val is true</span>
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					while the one-liner results in:
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					<span>This is shown if bool_val is true</span>
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## for
 | 
				
			||||||
 | 
					The for directive consists of three parts, the `@for` tag, the condition (same syntax like in V) and the `{}` block where you can write html which will be rendered for each loop:
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					@for <condition> {}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### Example
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					@for i, val in my_vals {
 | 
				
			||||||
 | 
					    <span>$i - $val</span>
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					One-liner:
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					@for i, val in my_vals { <span>$i - $val</span> }
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					The first example would result in:
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					    <span>0 - "First"</span>
 | 
				
			||||||
 | 
					    <span>1 - "Second"</span>
 | 
				
			||||||
 | 
					    <span>2 - "Third"</span>
 | 
				
			||||||
 | 
					    ...
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					while the one-liner results in:
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					<span>0 - "First"</span>
 | 
				
			||||||
 | 
					<span>1 - "Second"</span>
 | 
				
			||||||
 | 
					<span>2 - "Third"</span>
 | 
				
			||||||
 | 
					...
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					You can also write (and all other for condition syntaxes that are allowed in V):
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					@for i = 0; i < 5; i++ {
 | 
				
			||||||
 | 
					    <span>$i</span>
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## include
 | 
				
			||||||
 | 
					The include directive is for including other html files (which will be processed as well) and consists of two parts, the `@include` tag and a following `'<path>'` string.
 | 
				
			||||||
 | 
					The path parameter is relative to the `/templates` directory in the corresponding project.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### Example
 | 
				
			||||||
 | 
					Files
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					Project root
 | 
				
			||||||
 | 
					/templates
 | 
				
			||||||
 | 
					    - index.html
 | 
				
			||||||
 | 
					    /headers
 | 
				
			||||||
 | 
					        - base.html
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					`index.html`
 | 
				
			||||||
 | 
					```html
 | 
				
			||||||
 | 
					<div>@include 'header/base'</div>
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					> Note that there shouldn't be a file suffix, it is automatically appended and only allows `html` files.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					# Variables
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					_In Progress_
 | 
				
			||||||
		Loading…
	
		Reference in New Issue