NetLife Guru

Adding Resources to Templates

Adding local files such as images, CSS, or JavaScript with precise URLs is streamlined with the template engine's built-in variable: {$domain}. This variable holds the domain where the template engine is operating, making it easier to reference resources relative to the root of the website.

Example of Adding Resources

    {layout}
        <!DOCTYPE html>
        <html lang="{$lang}">
        <head>
            import{metadata}
            <title>{$title}</title>
            <meta name="description" content="">
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta property="og:title" content="">
            <meta property="og:type" content="">
            <meta property="og:url" content="">
            <meta property="og:image" content="">
            <meta property="og:image:alt" content="">
            <meta name="theme-color" content="#ffffff">

            <!-- Favicon links -->
            <link rel="icon" type="image/x-icon" href="{$domain}assets/images/favicon.ico" sizes="any">
            <link rel="apple-touch-icon" href="{$domain}assets/images/favicon.ico">

            <!-- Version Macro to append file modification timestamp -->
            <link href="{$domain}{Version|assets/css/style.min.css}" rel="stylesheet">
            <link href="{$domain}{Version|assets/prism/prism.css}" rel="stylesheet">
    {/layout}

Version Macro for Cache Busting

The Version macro appends a version query string to the URL, based on the file modification time (filemtime). This technique is commonly used for cache busting, ensuring that users always receive the most recent version of the file.

For example:

    <link href="{$domain}{Version|assets/css/style.min.css}" rel="stylesheet">

This will result in something like:


    <link href="https://yourdomain.com/assets/css/style.min.css?v=1712773244" rel="stylesheet" />

The query string ?v=1712773244 at the end of the URL ensures that if the file style.min.css has been changed since the last download, the browser will download the new version instead of using the cached one.

By using the {$domain} variable and Version macro within your templates, you can easily manage resources and control caching behavior. This functionality promotes better resource management and ensures that your web application utilizes the latest versions of its resources, leading to an optimal user experience.