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.
How
pip install pelican-custom-css
Next, create a css directory in your content directory.
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 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|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.
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
File details
Details for the file pelican_custom_css-0.0.2.tar.gz.
File metadata
- Download URL: pelican_custom_css-0.0.2.tar.gz
- Upload date:
- Size: 39.8 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.9.16
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 3164e694bd0bd1e019785b30e415b010759f218fa03f1fd80aff78f8ff90bd52 |
|
| MD5 | 71d843196c18ec60f433038950ccc52b |
|
| BLAKE2b-256 | 2adc7c166c41c510b39004ba25e08c38a7e5e5c28cb13eec1c03a386aba3e87c |
File details
Details for the file pelican_custom_css-0.0.2-py3-none-any.whl.
File metadata
- Download URL: pelican_custom_css-0.0.2-py3-none-any.whl
- Upload date:
- Size: 27.3 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.9.16
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | fca0d1c1544807c894267b5146dbd13a29be55fcf4e0e883f0524595ca391f16 |
|
| MD5 | ef63b1d24c8327675bc50a2493adf521 |
|
| BLAKE2b-256 | 11604a58af423af2a2569d71353b087d686261cad2935775fba07afdce7960c8 |
