The London Perl and Raku Workshop takes place on 26th Oct 2024. If your company depends on Perl, please consider sponsoring and/or attending.
 / 
Mojolicious-Plugin-UniqueTagHelpers-1.3
River stage zero No dependents
/ Mojolicious::Plugin::UniqueTagHelpers

NAME

Mojolicious::Plugin::UniqueTagHelpers - Mojolicious Plugin to use unique javascript and stylesheet links.

SYNOPSIS

  # Mojolicious
  $self->plugin('UniqueTagHelpers');

  # Mojolicious::Lite
  plugin 'UniqueTagHelpers';

DESCRIPTION

Mojolicious::Plugin::UniqueTagHelpers is a set of HTML tag helpers for javascript and stylesheets, allowing multiple includes in templates.

OPTIONS

max_key_length

Maximum content length to use as keys. If content length exceeds this, MD5 will be used to make keys to reduce memory usage. Default: 256.

HELPERS

stylesheet_for

    @@ index.html.ep
    % layout 'default';
    % stylesheet_for 'header' => 'css/main.css';
    ...
    % include 'someblock'

    @@ someblock.html.ep
    ...
    % stylesheet_for 'header' => 'css/main.css';

    @@ layouts/default.html.ep
    <!DOCTYPE html>
    <html>
        <head>
            <title>MyApp</title>
            %= content_for 'header';
        </head>
        <body>
            <%= content %>
        </body>
    </html

This example generates only one link to css/main.css:

    <!DOCTYPE html>
    <html>
        <head>
            <title>MyApp</title>
            <link href="css/main.css" rel="stylesheet" />
        </head>
        <body>
        </body>
    </html>

javascript_for

    @@ index.html.ep
    % layout 'default';
    % javascript_for 'footer' => 'js/main.js';
    ...
    % include 'someblock'

    @@ someblock.html.ep
    ...
    % javascript_for 'footer' => 'js/main.js';

    @@ layouts/default.html.ep
    <!DOCTYPE html>
    <html>
        <head>
            <title>MyApp</title>
        </head>
        <body>
            <%= content %>
            %= content_for 'footer';
        </body>
    </html

This example generates only one link to js/main.js:

    <!DOCTYPE html>
    <html>
        <head>
            <title>MyApp</title>
        </head>
        <body>
            <script src="js/main.js"></script>
        </body>
    </html>

unique_for

    @@ index.html.ep
    % layout 'default';
    % unique_for 'footer' => begin;
        <div id="modal">...</div>
    % end

    ...

    % unique_for 'footer' => begin;
        <div id="modal">...</div>
    % end

    @@ layouts/default.html.ep
    <!DOCTYPE html>
    <html>
        <head>
            <title>MyApp</title>
        </head>
        <body>
            <%= content %>
            %= content_for 'footer';
        </body>
    </html

This example generates only one "modal" element:

    <!DOCTYPE html>
    <html>
        <head>
            <title>MyApp</title>
        </head>
        <body>
            <div id="modal">...</div>
        </body>
    </html>

SEE ALSO

Mojolicious, Mojolicious::Guides, Mojolicious::Plugin::TagHelpers, http://mojolicio.us.