Add Pelican Template-Generated Content to Markdown

I'm currently setting up my new website using Pelican. It's awesome! I love it (so far)! And then I hit the first snag: I have configured a landing page using the save_as property to build my own landing page in /content/pages/

save_as:     index.html
status:      hidden
Date:        2019-11-03
JavaScripts: js/jquery.js

Hey there!

Now, I want to add some automatically generated elements from the original index.html. This can be a problem when including jinja2 code into a markdown file. For example, I want to include an article-summary at the end of

{% block content %}

{% for article in articles %}

    {% if loop.index == 1 %}

        <h2><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h1>
        {{ article.content }}

      <hr />

      {% if loop.length  > 1 %}
          <h3>Last posts</h3>
          <ol class="archive">
      {% endif %}

    {% elif loop.index < 7 %}
        {% include '' %}
    {% endif %}

{% endfor %}

{% if articles|length > 1 %}
{% endif %}

{% endblock content %}

You can see the problem: is a markdown file and pelican doesn't parse jinja code in markdown files (bit of a bummer). I tried using jinja2content, but it wouldn't work as expected (I assume it has to do with the order that pelican is parsing content files). Normaly this would require tweaking a template, but I want to see if it can be hacked in another way:

  • We put the content above into a file templates/list_articles.html

  • Include the following settings in the

ARTICLE_EXCLUDES = ['templates']
    'templates/list_articles.html': 'resources/list_articles.html',

this will isolate the templates folder from content parsing (stops pesky warnings), and it routes the output from /contents/templates/list_articles.html to /output/resources/list_articles.html (makes the output accessible to index.html).

  • Add the following code to
<script src="js/jquery.js"></script>
<div id="includedContent"></div>
  • This requires us to add jquery.js to the /content/js folder. I find that the most convenient way to do this is to install it usign npm, followed by linking the dist folder into content/js/node_jquery
npm install --prefix . jquery
ln -s node_modules/jquery/dist content/js/node_jquery

Final Thoughts

What this does is using a jinja template to generate the html content in a seperate file. Followed by using jquery to include it this html content at the target. Point 2 above uses templates/list_articles.html as a jinja template to generate the html content. Poit 3 does the including.