Statie - part 3: How to Add Reusable Parts of Code

2017-03-09

This post is deprecated since March 2020. Its knowledge is old and should not be used.
Why?

Statie was deprecated with last version 7, because 99 % of features are covered in Symfony application.

To create static content, migrate to Symfony app and SymfonyStaticDumper.

This post was updated at September 2018 with fresh know-how.
What is new?

Updated with Statie 5, NEON → YAML and Twig.

You already know how to run Statie with layout and how to add data structures.

Today you'll learn how to decouple big templates to smaller and reusable snippets. Like Google Analytics code.

Sometimes you need to add part of template, that you want to use on multiple pages (in the same form or with smaller changes) or that makes your template less readable.

Google Analytics

Often you start a new web with settings up Google Analytics measure code.

It looks like this:

<script>
    ga=function(){ ga.q.push(arguments) };
    ga.q=[];
    ga.l=+new Date;
    ga('create', 'YXZ', 'auto');
    ga('send','pageview');
</script>
<script async defer src="https://www.google-analytics.com/analytics.js"></script>

We put into layout:

<!-- source/_layouts/default.twig -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        {% block content %}{% endblock %}

        <script>
            ga=function(){ ga.q.push(arguments) };
            ga.q=[];
            ga.l=+new Date;
            ga('create', 'XYZ', 'auto');
            ga('send','pageview');
        </script>
        <script async defer src="https://www.google-analytics.com/analytics.js"></script>
    </body>
</html>

This layout might be small, but it will be definitely bigger in real app and will keep growing and growing in time.

Google Analytics code is not something we change or extend too much. Why not outsource it?

Sexy & Small Snippet

What if you could use some "include googleAnalytics snippet" command?

With Statie you can!

{% include "_snippets/googleAnalytics.twig" %}

How does it Work?

Statie scans /_snippets directory and turns all files to snippets. Relative path of the file in /source directory = key for including the snippets.

"_snippets/googleAnalytics.twig" => snippets/googleAnalytics.twig

Decoupling the Snippet

First, we create the snippet file and move the Google Analytics code there:

<!-- source/_snippets/googleAnalytics.twig -->

<script>
    ga=function(){ ga.q.push(arguments) };
    ga.q=[];
    ga.l=+new Date;
    ga('create', 'XYZ', 'auto');
    ga('send','pageview');
</script>
<script async defer src="https://www.google-analytics.com/analytics.js"></script>

Then clean the layout:

<!-- source/_layouts/default.twig -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        {% block content %}{% endblock %}
        {% include "_snippets/googleAnalytics.twig" %}
    </body>
</html>

There is one last think that bothers me:

ga('create', 'XYZ', 'auto');

Can you see it?

ProTip #1: Why Always Put IDs to Config and Not to Code

When you start using static site generator, you'll appreciate its power in scaling:

First web might take some time to setup.
Second is mostly copy-pasting previous settings and changing only layout and content.
And third? Way too easy and well paid job.

To allow this flow, I recommend keeping all IDs that change from site to site - Google Analytics, Facebook Pixel, Disqus ID... - in _config/config.yml file. When you create a new website, all you have to do is change one file to make it customized.

How To Do It

I wrote about config in previous post - go read it, if you missed it.

So you should end up with this:

ga('create', '{{ $googleAnalytics }}', 'auto');

Nice work!

ProTip #2: Too Many Snippets? Group them by Type

Often, I've ended up with many unrelated snippets in one directory.

/source
    /_snippets
        comments.twig
        header.twig
        footer.twig
        postMetadata.twig
        postHeadline.twig
        postRecommendations.twig

There is no need for that. You can group them to subdirs as you like:

/source
    /_snippets
        /layout
            header.twig
            footer.twig
        /post
            comments.twig
            postMetadata.twig
            postHeadline.twig
            postRecommendations.twig

Now You Know

That using snippets will save lot of time.
That snippets are named by their filename: {% include "_snippest/fileName.twig" %}.
That snippets work the best with global configuration.

Happy coding!

Have you find this post useful? Do you want more?

Follow me on Twitter, RSS or support me on GitHub Sponsors.