<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>

    {# KaTeX 数学公式支持 #}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/contrib/auto-render.min.js"></script>

    <style>{{ css | safe }}</style>
</head>
<body>
    <div class="layout">
        <nav class="sidebar" id="toc-sidebar">
            <h2>目 录</h2>
            <ul>
            {% for item in toc %}
                <li class="toc-level-{{ item.level }}">
                    <a href="#{{ item.anchor }}">{{ item.text }}</a>
                </li>
            {% endfor %}
            </ul>
        </nav>

        <div class="main">
            <div class="cover">
                {% if logo %}
                <img class="cover-logo" src="{{ logo }}" alt="logo">
                {% endif %}
                <div class="cover-doc-type">{{ doc_type }}</div>
                <h1 class="cover-title">{{ title }}</h1>
                {% if subtitle %}<p class="cover-subtitle">{{ subtitle }}</p>{% endif %}
                <div class="cover-meta">
                    <table>
                        {% if author %}<tr><td>作者</td><td>{{ author }}</td></tr>{% endif %}
                        {% if version %}<tr><td>版本</td><td>{{ version }}</td></tr>{% endif %}
                        <tr><td>日期</td><td>{{ date }}</td></tr>
                    </table>
                </div>
            </div>

            <main class="content">
                {{ content | safe }}
            </main>
        </div>
    </div>

    {# KaTeX 自动渲染 #}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            renderMathInElement(document.body, {
                delimiters: [
                    {left: "$$", right: "$$", display: true},
                    {left: "$", right: "$", display: false}
                ]
            });
        });
    </script>
</body>
</html>
