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.