When a webpage is created, webpage authors and static page generators will often grab low-level asset files from a trusted location. Between Pelican and Elegant, these files will often number between 8 and 15 CSS or JavaScript files. While these files are essential to the proper look and feel of a properly designed website, the overhead of this content being in separate files is that separate requests are made for each of them to the server.

Pelican provides a plugin that takes the various CSS and JavaScript files and compiles each group of them into a single file. Not only does this process reduce the number of calls to retrieve files from the server, but it minifies or reduces the overall size of those files as well.

Configuration

To enable Asset Management for your website, add assets to the PLUGINS configuration variable in your Pelican configuration.

PLUGINS = ['assets']

Note

The assets plugin requires the Python webassets and cssmin packages to be installed.

Debugging Notes

Note that you will not see the full power of the Assets Management plugin if you are working in debug mode, that is building the website while using --debug on the Pelican command line. In debug mode, some of the files may be minified into the style.min.css file, but the original files will be included in the HTML page they are referenced from.

This will look something like the following:

<link
  rel="stylesheet"
  href="http://localhost:8000/theme/webassets-external/f89ba5f14545a8fa0e81c1c6e2b5fc13_pygments.css"
/>
<link
  rel="stylesheet"
  href="http://localhost:8000/theme/webassets-external/96b04e88b0ba11363f4f2e2f59b5fb18_tipuesearch.css"
/>
<link
  rel="stylesheet"
  href="http://localhost:8000/theme/webassets-external/9c80344d72edcf2ebb95daecd6dfa24c_elegant.css"
/>
<link
  rel="stylesheet"
  href="http://localhost:8000/theme/webassets-external/d8877b08872b9883b67fbef219dfdebb_admonition.css"
/>
<link
  rel="stylesheet"
  href="http://localhost:8000/theme/webassets-external/78ddd4ea7393d1ac1fd9f91c21aa8b5f_custom.css"
/>

When the --debug command line option is removed, the lines described above will be replaced with a line like:

<link
  rel="stylesheet"
  href="https://jackdewinter.github.io/theme/css/style.min.css?c4027515"
/>

Improving Elegant

If you are developing a new feature (for the theme or for your own website), you may need to add a new CSS file to make sure that it renders properly on the webpage. Elegant ships with the ability support minification of CSS files through the minify_css.html file. This file is located in the templates/_includes directory of the theme and has the following contents:

{% assets filters="cssmin", output="css/style.min.css", "css/pygments.css", "tipuesearch/tipuesearch.css","css/elegant.css", "css/admonition.css", "css/custom.css" %}
<link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
{% endassets %}

To ensure that your new CSS file is minified, we advise you to follow one of these two suggestions.

If you are planning to add a new feature to your own website, consider placing the changes in the Elegant theme’s custom.css file. This file is also located in the templates/_includes directory, and is blank in a standard Elegant theme. As the custom.css file is already in the list of files to minify, no addition modifications are required. If you are not sure whether or not the feature will be submitted as part of Elegant, this is a good place to start at.

If you are planning to add a new feature to Elegant and share it with others, you will be asked to place any CSS changes for your feature in a new CSS file. This new file should be saved in the theme’s templates/_includes directory with the other CSS files. To ensure that the new file is minified, a reference to it must be added to the first line of the minify_css.html file, after the css/admonition.css file reference and before the css/custom.css file reference.

Like this post? Share on: TwitterFacebookEmail


Talha Mansoor Avatar Talha Mansoor is the creator and lead developer of Elegant theme.
Jack De Winter ever evolving, ever learning

Keep Reading