HTTPS SSH

Extra Include Files

A hopefully handy plugin for Pelican to allow extra CSS and JS files per-article.

The Problem

I write a bunch of tutorials on how to do things with CSS and JS. For the examples in these, I need individual article-specific CSS and JS files. Adding a single file of each type is no big deal; just add a filename in metadata, and you're all good. However, trying to add multiple files as a list proved to be beyond my poor capabilities in Jinja2. So, I wrote a dirt simple plugin to help me out.

The Solution

The extra_include_files plugin looks for extra_css and extra_js metadata in your articles, and converts it into a list that's available as extra_css_files and extra_js_files in your templates.

Example

In my_tutorial.md article, I need two unique CSS files and a unique JavaScript file to provide examples in the article. So in my markdown file:

Title: I am a pretty pony
extra_css: pony_tutorial.css, dark_background.css
extra_js: pony_tutorial.js
Summary: This needs to look different for some reason.

# This article looks different

If lots of your articles need unique CSS, this is easier than making a billion templates.

Then in the article.html template:

<html>
    <head>
        <link rel="stylesheet" href="base.css">
        {% if article.extra_css_files %}
            {% for file in article.extra_css_files %}
            <link rel="stylesheet" href="/css/{{ file|trim }}" media="screen">
            {% endfor %}
        {% endif %}
    </head>
    <body>
    {{ article.content }}

    {% if article.extra_js_files %}
        {% for file in article.extra_js_files %}
        <script src="/js/{{ file|trim }}"></script>
        {% endfor %}
    {% endif %}
    </body>
</html>

And now that article will have two extra CSS files and a JavaScript included in it.