templates/base.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

        <link rel="stylesheet" type="text/css" href="/css/base.css">
        <link rel="icon" type="image/x-icon" href="/img/favicon.ico">

        <!-- JQuerry -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <!-- Syntax highlighting -->
        <link rel="stylesheet" type="text/css" href="/css/highlight_theme.css">
        <script src="/js/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>

        <!-- Renders LaTeX expression -->
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true}});
        </script>
        <script type="text/javascript" async
                src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
        </script>

        <!-- NavBar -->
        <script src="/js/navbar.js"></script>

        <title>{{ metadata['title'] }}</title>

        {% block head %}
        {% endblock %}
    </head>

    <body>
        <div class="content">
            <header>
                {% block header %}
                {% endblock %}
            </header>
        </div>

        <div class="navbar">
            {% if 'navbar_title' in metadata %}
              <h4 class="nav_title">{{ metadata['navbar_title'] }}</h4>
            {% else %}
              <h4 class="nav_title">On this page</h4>
            {% endif %}
            <ul>
            {% for ref, text, h2 in metadata['navbar'] %}
              {% if h2 %}
                <li class="section"><a href="#{{ ref }}">{{ text }}</a></li>
              {% else %}
                <li class="subsection"><a href="#{{ ref }}">{{ text }}</a></li>
              {% endif %}
            {% endfor %}
            </ul>
        </div>

        <div class="content">
            {% block before_content %}
            {% endblock %}

            {{ html_content }}
        </div>
    </body>
</html>