Files
blog_os/blog/templates/second-edition/page.html
Philipp Oppermann 6055a2e342 Add an inline table of contents for small screens
This ToC is only shown when the screen is too small for the sticky sidebar ToC.

We use a `<!-- toc -->` comment and the `replace` function to allow inserting the ToC at well defined points of the page. We don't use the shortcode feature of Zola because of https://github.com/getzola/zola/issues/584.
2019-03-19 12:58:15 +01:00

65 lines
2.3 KiB
HTML

{% extends "second-edition/base.html" %}
{% import "macros.html" as macros %}
{% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
{% block header %}
<aside id="all-posts-link"><a href="{{ get_url(path="./second-edition/_index.md") }}" title="All Posts">« All Posts</a></aside>
{% endblock header %}
{% block main %}
<h1>{{ page.title }}</h1>
<time datetime="{{ page.date | date(format="%Y-%m-%d") }}" class="post-date">
{{ page.date | date(format="%b %d, %Y") }}
{% if page.extra.updated %} (updated on {{ page.extra.updated | date(format="%b %d, %Y") }}) {% endif %}
</time>
{% if page.extra.warning %}
<div class="warning">
{% if page.extra.warning_short %} <b>{{ page.extra.warning_short }}</b> {% endif %}
{{ page.extra.warning | markdown(inline=true)}}
</div>
{% endif %}
<aside id="toc-aside">
<h2>Table of Contents</h2>
<ol>
{% for h2 in page.toc %}<li>
<a href="#{{h2.id | safe}}">{{ h2.title | safe }}</a>
{% if h2.children %}<ol>
{% for h3 in h2.children %}<li>
<a href="#{{h3.id | safe}}">{{ h3.title | safe }}</a>
</li>{% endfor %}
</ol>{% endif %}
</li>{% endfor %}
</ol>
</aside>
{{ page.content | safe | replace(from="<!-- toc -->", to=macros::toc(page=page))}}
<div class="post-footer-support">
<h2>Support Me</h2>
<p>If you liked this post and would like to support me, you can do so on <a href="https://donorbox.org/phil-opp">Donorbox</a>, <a href="https://www.patreon.com/phil_opp">Patreon</a>, or <a href="https://liberapay.com/phil-opp/">Liberapay</a>. Thanks!</p>
</div>
{% endblock main %}
{% block after_main %}
<hr>
<div class="PageNavigation">
{% if page.lighter %}
<a class="prev" href="/{{ page.lighter.path | safe }}">&laquo; {{ page.lighter.title }}</a>
{% endif %}
{% if page.heavier %}
<a class="next" href="/{{ page.heavier.path | safe }}">{{ page.heavier.title }} &raquo;</a>
{% endif %}
</div>
<hr>
<section>
<h2 id="comments">Comments</h2>
{{ macros::utterances() }}
</section>
{% endblock after_main %}