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