https://github.com/hreikin/pelican-custom-css
Pelican Custom CSS makes it easy to embed custom CSS into individual Pelican articles and pages
https://github.com/hreikin/pelican-custom-css
custom-css pelican pelican-plugin
Last synced: 13 days ago
JSON representation
Pelican Custom CSS makes it easy to embed custom CSS into individual Pelican articles and pages
- Host: GitHub
- URL: https://github.com/hreikin/pelican-custom-css
- Owner: hreikin
- License: gpl-3.0
- Created: 2023-01-13T17:03:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-08T10:49:40.000Z (about 3 years ago)
- Last Synced: 2025-12-28T06:22:02.412Z (4 months ago)
- Topics: custom-css, pelican, pelican-plugin
- Language: Python
- Homepage:
- Size: 27.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://notabug.org/jorgesumle/pelican-css) originally created by [Jorge Maldonado Ventura](https://notabug.org/jorgesumle) 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](https://docs.getpelican.com/en/latest/plugins.html) 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 `` 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:
```
{% block title %} {{SITENAME}} {% endblock %}
{% if article %}
{% if article.styles %}
{% for style in article.styles %}
{{ style|format(SITEURL) }}
{% endfor %}
{% endif %}
{% endif %}
{% block header %}
{% include "header.html" %}
{% endblock %}
{% block content %} {% endblock %}
{% block footer %}
{% include "footer.html" %}
{% endblock %}
```
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 `` 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.