duncan­lock­.net

Custom Per Page CSS With Pelican

Sometimes I want to have a just a tiny bit of CSS that’s unique, just for one page or post. I don’t want a whole stylesheet, or to have to add this to my site-wide theme, just for one post – I want a simple way to add it in the post itself.

This is how I did it:

In Your Theme Templates

Add an extrahead block into your templates, inside the HTML <head> section, so that you can add extra stuff into the head in some templates:

In base.html.j2

<head>
  ...
  {% block extrahead %} {% endblock %}
</head>

Then, in the page/post/article templates, add a <style> into the extrahead if the page metadata contains an extra_css entry:

In article.html.j2

{% extends "base.html.j2" %}
...
{% block extrahead %}
  ...
  {% if article.extra_css %}
    <style>
        {{ article.extra_css }}
    </style>
  {% endif %}
{% endblock %}

In page.html.j2

{% extends "base.html.j2" %}
...
{% block extrahead %}
  ...
  {% if page.extra_css %}
    <style>
        {{ page.extra_css }}
    </style>
  {% endif %}
{% endblock %}

In Your Post/Page

Add something like this to the post/page metadata:

:extra_css: .wavy-underline { text-decoration: red wavy underline; }

and then in your content itself, apply the CSS, something like this for AsciiDoc[1]:

This will have a [.wavy-underline]#red wavy underline#, but this won't.

something like this for Markdown, where you need to use inline HTML:

This will have a <span class="wavy-underline">red wavy underline</span>, but this won't.

something like this for reStructuredText:

:extra_css: .wavy-underline { text-decoration: red wavy underline; }

.. role: wavy-underline

This will have a :wavy-underline:`red wavy underline`, but this won't.

and it looks like this:

This will have a red wavy underline, but this won’t.

References & Footnotes


  1. Note that this didn’t initially work with the pelican asciidoc-reader plugin - but will now that this PR is merged: https://github.com/getpelican/pelican-plugins/pull/1344

Related Posts