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
- If you want to add whole custom stylesheets to pages or posts, you can use the pelican-css plugin.
- Rest & Sphinx Memo: Defining a css class for some part
- 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 ↩