Universeorange.com/Docs/

R3m/framework Add web assets

We need to set the environment to development if not done already.

<name> configure environment toggle

<name> the binary name of R3m/framework (see installation).
It says Production mode enabled. or Development mode enabled..
We need Development mode enabled..

We change our view file: <project_dir>/Host/<subdomain>/<hostname>/<extension>/Docs/View/Get.tpl.

/**
 *  Where menu.get() shows
 *  <ul class="menu">
 *      <a href="{/page/Welcome/" class="page-welcome"><li>...</li></a>
 *      ...
 *  </ul> 
 */
{menu.get(request('page'))}

/**
 *  Where page.get() shows
 *  Hello world, this is page Welcome
 */
{$page = page.get()}
/**
 *  $controller.dir.view = <project_dir>/Host/<subdomain>/<hostname>/<extension>/Docs/View/
 */
{require("{$controller.dir.view}Link/Get.tpl")}

Where <project_dir>Host/<subdomain>/<hostname>/<extension>/Docs/View/Link/Get.tpl is the template to require().

{capture.append('link')}
    <link rel="stylesheet" href="{$host.url|default:'/'}Docs/Css/Get.css?{$version|default:'0.0.1'}">    
{/capture.append}

This stylesheet is appended to the variable $link which is an array [] and used in Main.tpl.

{$read = parse.read(config('controller.dir.data') + 'Main.json')}<!DOCTYPE html>
<html>
    <head>
        ...
        {if (!is.empty($script) && is.array($script))}
            {implode("\n\t\t\t", $script)}
        {/if}
        {if (!is.empty($link) && is.array($link))}            
            {implode("\n\t\t\t", $link)}
        {/if}
    </head>
    <body>
        ...
    </body>
</html>

To add an image:

Edit the Get.tpl.

/<project_dir>/Host/<subdomain>/<hostname>/<extension>/Docs/View/Get.tpl

With content:

<img src="{$host.url}Docs/Image/Logo.png" class="logo" />
{$page = request('page')}
Hello world, this is page {$page|lowercase}

If you reload the page and go to the network tab (F12) resource Logo.png: 

array(5) {
[0]=> "<project_dir>/Host/<subdomain>/<hostname>/<extension>/Docs/View/Public/Image/Logo.png",
[1]=> "<project_dir>/Host/<subdomain>/<hostname>/<extension>/Docs/Public/Image/Logo.png",
[2]=> "<project_dir>/Host/<subdomain>/<hostname>/<extension>/Docs/Image/Public/Logo.png",
[3]=> "<project_dir>/Host/<subdomain>/<hostname>/<extension>/Public/Docs/Image/Logo.png",
[4]=> "<project_dir>/Public/Docs/Image/Logo.png"
}

Place the logo in one of these 5 locations.

Last modified: 2021-06-07

© 2021 universeorange.com