Skip to main content

Pelican Custom CSS makes it easy to embed custom CSS into individual Pelican articles and pages.

Project description

Pelican Custom CSS

Pelican Custom CSS makes it easy to embed custom CSS into individual Pelican articles and pages. This repository is a fork of Pelican CSS originally created by Jorge Maldonado Ventura that has been converted to use the Pelican namespace plugin structure and published to PyPi.

Installation

To install pelican-custom-css run the following command:

pip install pelican-custom-css

Configuration

Namespace plugins can be configured in a few ways, this section is taken straight from the Pelican Documentation for plugins. If you leave the PLUGINS setting as default (None), Pelican will automatically discover namespace plugins and register them. If, on the other hand, you specify a PLUGINS setting as a list of plugins, this auto-discovery will be disabled. At that point, only the plugins you specify will be registered, and you must explicitly list any namespace plugins as well.

If you are using the PLUGINS setting, you can specify plugins in two ways. The first method specifies plugins as a list of strings. Namespace plugins can be specified either by their full names (pelican.plugins.myplugin) or by their short names (myplugin):

PLUGINS = ['package.myplugin',
          'namespace_plugin1',
          'pelican.plugins.namespace_plugin2']

Alternatively, you can import them in your settings file and pass the modules:

from package import myplugin
from pelican.plugins import namespace_plugin1, namespace_plugin2
PLUGINS = [myplugin, namespace_plugin1, namespace_plugin2]

Next, you will need to create a css directory in your content directory for your custom styles to live in.

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

And then add each resource as a comma-separated file name with 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|format(SITEURL) }}
        {% endfor %}
    {% endif %}
{% endif %}

So, 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|format(SITEURL) }}
            {% 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>

The previous code only works for articles. For most people, that's enough. If you want to enable custom CSS in pages too insert the following code your <head> tag...

{% if page %}
    {% if page.styles %}
        {% for style in page.styles %}
            {{ style|format(SITEURL) }}
        {% endfor %}
    {% endif %}
{% endif %}

That's it! You can now generate and publish your site normally, for example using ghp-import if you're using Github Pages or the standard make html or make publish commands from Pelican and your CSS will be copied and referenced in the right places.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

pelican_custom_css-0.0.4.tar.gz (52.0 kB view details)

Uploaded Source

Built Distribution

pelican_custom_css-0.0.4-py3-none-any.whl (40.1 kB view details)

Uploaded Python 3

File details

Details for the file pelican_custom_css-0.0.4.tar.gz.

File metadata

  • Download URL: pelican_custom_css-0.0.4.tar.gz
  • Upload date:
  • Size: 52.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.9.16

File hashes

Hashes for pelican_custom_css-0.0.4.tar.gz
Algorithm Hash digest
SHA256 0fe45dd8a76e74f164dc743196d7b2b561a77d102152609327bef3cc28944254
MD5 63ffc39e7f3666198aed9ec309f21a13
BLAKE2b-256 7e2b63e6735faa37b3917fa79da25175ea2cd9dcd14eeac100ede06392d63c6c

See more details on using hashes here.

File details

Details for the file pelican_custom_css-0.0.4-py3-none-any.whl.

File metadata

File hashes

Hashes for pelican_custom_css-0.0.4-py3-none-any.whl
Algorithm Hash digest
SHA256 1e9c02087ee6e2d7e1b324e7c6ce1d77c51c270d7c0b80d2073f3ca4368b62aa
MD5 503d6759029e125973be862dcc52c6e8
BLAKE2b-256 a1fb2d41c16bfa9d1b3883326fc0039c548e19302b5267bbf929a8e7260b864a

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page