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

This post is deprecated since January 2019
This post was moved to statie.org. Also, it's better to use vendor/bin/statie init command now.

This post was updated on September 2018
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.

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:

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

Happy coding!


Found a typo? Fix it to join team of 73 people that improve content here

❤️️ Do you find value in topics what I write about?
Support my writing by throwing a couple bucks at my Patreon