Skip to main content

Introduction to Templates

In Flute, there exists a templating system, allowing the engine to have multiple installed themes that can be switched between.

Basic Template Structure​

All templates should be located in the app/Themes/ folder. Here's an example structure of a template:

├── assets
│   ├── img
│   ├── js
│   └── styles
│       ├── base
│       ├── components
│       ├── layouts
│       ├── pages
│       │   ├── lk
│       │   ├── profile_edit
│       ├── utils
│       └── main.scss
├── components
├── errors
├── i18n
│   └── ru
│       └── t_standard.php
├── other
├── pages
│   ├── lk
│   ├── profile
├── layout.blade.php
└── ThemeLoader.php
warning

Each template must have a unique name (which is also the name of the folder)! In every template, there must be a layout.blade.php and ThemeLoader.php file. Files in the pages folder must adhere to a standard template. The names of these files cannot be changed!

About ThemeLoader​

ThemeLoader is a class responsible for initializing our template within the system. Since the BladeOne library is used as the templating engine, most functionalities and features from there are available in the engine. Here's an example of a ThemeLoader:

<?php

namespace Flute\Themes\standard;

use Flute\Core\Support\AbstractThemeLoader;

class ThemeLoader extends AbstractThemeLoader
{
    public function __construct()
    {
        $this->createTheme();
    }

    public function register(\Flute\Core\Template\Template $templateService)
    {
    }

    protected function createTheme()
    {
        $this->setKey("standard");
        $this->setName("Flute Standard");
        $this->setAuthor("Flames");
        $this->setDescription("Just a standard template on Flute");
        $this->setVersion("1.1");
    }
}

As you can see, in the initializer, we specify the key, template name, author, etc.

info

The template must inherit from the AbstractThemeLoader class.

For more details about the loader, you can read here.

More about layout​

At the root of the template, there must be a layout.blade.php file. This file is responsible for loading and configuring all the main components of the system.

layout and other templates use @push and @stack functions. @stack is used to display code that was initialized inside @push. @push allows inserting data into @stack an unlimited number of times.

Here's an example structure of layout.blade.php:

<!DOCTYPE html>
<html lang="{{ app()->getLang() }}" data-theme="dark">

<head>
    <!-- Head content -->
</head>

<body>
    <main>
        <!-- Main content -->
    </main>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

</html>

In the engine, there are predefined stacks for filling content. If you are not significantly changing the template, I advise keeping their names the same.

About additional functions​

If you closely observed the layout example, you might have noticed the use of @asset and @at. Let's briefly delve into their meaning:

The entire engine operates in the public/ folder. This means that all styles and scripts will be taken from there.

@asset will add the site's URL to the specified path in the argument. It will be http://site.com/{path}. @at will move and minimize the specified file in the argument, returning the ready path. You just need to specify the full path to the css / js file.

@at can also be applied to images and can automatically convert images to the webp format.

You may have also noticed the tt function. This function will return the full path to the currently active template.

info

By the way, mm(string $moduleName, string $path) will return the path to the module.