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/landing.md:

save_as:     index.html
status:      hidden
Title:
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 landing.md:

{% block content %}

{% for article in articles %}

    {% if loop.index == 1 %}

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

      <hr />

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

    {% elif loop.index < 7 %}
      <li>
        {% include 'article_link.inc.html' %}
      </li>
    {% endif %}

{% endfor %}

{% if articles|length > 1 %}
          </ol>
        </div>
{% endif %}

{% endblock content %}

You can see the problem: landing.md 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 pelicanconf.py:

ARTICLE_EXCLUDES = ['templates']
TEMPLATE_PAGES = {
    '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 landing.md:

<script src="js/jquery.js"></script>
<script>
    $(function(){
        $("#includedContent").load("resources/list_articles.html");
    });
</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.