pelican-css

pelican-css makes it easy to embed custom CSS into individual Pelican articles and pages.

How

git clone https://notabug.org/jorgesumle/pelican-css in your plugins folder and add the name of the plugin to your pelicanconf.py file:

PLUGIN_PATHS = ['plugins']
PLUGINS = ['pelican-css'] # You may have more plugins

Next, create css directory in your content directory...

website/
├── content
│   ├── css/
│   │   ├── your_custom_style1.css
│   │   └── your_custom_style2.css
│   ├── article1.md
│   └── pages
│       └── about.md
└── pelican.conf.py

And then add each resource as a comma-separated file name in the CSS tag:

Title: Mejor sin Wordpress
Date: 2017-02-09 18:51
Tags: programación, Wordpress, generador de páginas estáticas, generador de sitios web estáticos, rendimiento, eficiencia, comodidad, desventajas
Category: Desarrollo web
Author: jorgesumle
Slug: mejor-sin-wordpress
CSS: your_custom_style1.css, your_custom_style2.css

Finally, in your base template (likely named base.html), you need to add the following in your <head> tag:

{% if article %}
    {% if article.styles %}
        {% for style in article.styles %}
{{ style }}
        {% endfor %}
    {% endif %}
{% endif %}

So, in the template I use for my blog now looks like the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8">
    <title>{% block title %} {{SITENAME}} {% endblock %}</title>
    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css" type="text/css">
    {% if article %}
        {% if article.styles %}
            {% for style in article.styles %}
    {{ style }}
            {% endfor %}
        {% endif %}
    {% endif %}
  </head>
  <body>
    <div class=container>
        {% block header %}
            {% include "header.html" %}
        {% endblock %}

        <div class="content">
        {% block content %} {% endblock %}
        </div>

        {% block footer %}
            {% include "footer.html" %}
        {% endblock %}
    </div>
  </body>
</html>

That's it! Run your standard make html or make publish commands and your CSS will be copied and ref'd in the right places.

2.2 KiB Raw Blame History

pelican-css

How

2.2 KiB

Raw Blame History