Templates

Feather uses a modular system and provides template assets as part of the Swift package resources bundle. When you run Feather, the contents of the module bundles will be extracted under the Resources folder. If you want to create a custom template you can override and commit the altered template files to your git repository. Templates are located under the Templates folder inside the Resources directory.

Leaf Tau

The template system is based on Leaf Tau (an experimental branch that is not part of the official Leaf 4 release, will be available later on as a standalone repository). You can use the official Leaf documentation if you want to learn more about the syntax.

The documentation of Tau will be available later on, but here are some useful resources:

• What's new in Leaf 4 (Tau)?
• Custom Leaf tags in Vapor 4
• How to create your first website using Vapor 4 and Leaf?
• Building stylesheets using Leaf

Please note that Leaf Tau is a more advanced template system, its syntax is very similar to Leaf, but there are many new features in Tau that are not available for Leaf at all. ⚠️

Template files

Template files are organized into modules, each module provides it's own templates, but others can use bundled templates. For example you can utilize admin templates to build your own interfaces, but in that case you have to make sure that the given module was added as a dependency.

Leaf scopes

Leaf scopes are available for every template file. They can be accessed using the $ syntax.

App variables:

• $app.locale: String - Locale identifier for the website
• $app.isDebug: Bool - Is the app running in debug mode

Request variables:

• $req.url.path: String - Current path of the page URL

System variables ($system.variables[key]):

• frontend.site.title - Site title (inserted after the page title)
• frontend.site.font.family - CSS font family name
• frontend.site.font.size - CSS font size with unit
• frontend.site.color.primary - CSS primary color for links
• frontend.site.color.secondary - CSS secondary color for links
• frontend.site.css - Custom CSS for the site
• frontend.site.logo - Custom site logo (image key)
• frontend.site.footer - Custom footer HTML code
• frontend.site.copy - Custom copyright text
• frontend.site.copy.prefix - Custom prefix for the copy text year (start year)
• frontend.site.footer.bottom - Custom bottom footer HTML code

User

You can check if the user is authenticated through the $user.isAuthenticated property.

It is possible to check if a user has access to a specific functionality by using the UserHasPermission function. This Leaf function expects a permission / access name as a first argument.

#if($user.isAuthenticated):
    #if(UserHasPermission("admin.module.access")):
        <a href="/admin/">Admin</a> &middot;
    #endif
    <a href="/logout/">Logout</a>
    #else:
    <a href="/login/">Login</a>
#endif

Frontend menu items

Frontend menu items are available by using the dot syntax on the $frontend.menu scope variable.

By default there are two menus:

• main - Main menu items
• footer - Footer menu items

You can iterate through menu items using the for loop.

#for(item in $frontend.menus.main.items ?? []):
// display menu item
#endfor

Each menu item has the following properties:

• permission - required user permission to a given menu item
• url - URL of a menu item
• targetBlank - is the target a blank browser tab / window
• icon - icon name of the menu item
• label - label of the menu item

You can check if the menu item is selected by comparing the item url to the $req.url.path.

#if($req.url.path == item.url): class="selected"#endif

You can check for the required permission with the UserHasPermission tag.

#if(UserHasPermission(item.permission) ?? true):
// display menu item
#endif

Frontend module templates

Privdes templates for the web based frontend ("main frame").

Frontend/Index - Index.html

The main template for the web frontend. Can be used to display webpages.

Context objects:

• head: Dictionary? - Optional dictionary to override some meta info from Leaf files

  • head.title: String? - Optional tilte for the page
  • head.description: String? - Optional description for the page
  • head.noindex: Bool? - Disables page indexing using a robots noindex meta tag
  • head.canonicalUrl: String? - Optional canonical URL for the page

• metadata: Metadata - Metadata object used to render page metas

• css: VoidBlock? - CSS block to insert custom snippet from other Leaf files

• js: VoidBlock? - JS block to insert custom snippet from other Leaf files

• body: VoidBlock? - page body block to render inside a container element.

Feather CSS

explain shortcodes from the css