<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title }}</title>
    <!-- icon -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    
    <!-- 导入字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&family=Noto+Sans+SC:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=ZCOOL+XiaoWei&display=swap"
        rel="stylesheet">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/pygments.css">
    <!-- 导入自定义js脚本 -->
    <script src="/static/js/main.js"></script>
    <!-- 导入 KaTeX -->
    <link href="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.15.1/katex.min.css" rel="stylesheet">
    <script src="/static/js/copy-tex.min.js"></script>
    <!-- 导入fa icon -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
    <!-- 导入 clipboard.js -->
    <script src="/static/js/clipboard.min.js"></script>
    <!-- 导入Toastr -->
    <link rel="stylesheet" href="/static/css/toastr.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/toastr.min.js"></script>
    <!-- 导入fancybox -->
    <link href="/static/css/jquery.fancybox.min.css" rel="stylesheet">
    <script src="/static/js/jquery.fancybox.min.js"></script>
</head>

<body>
    <header>
        {{ header_content|safe }}
    </header>
    <main>
        <article>
            {{ article_content|safe }}
        </article>
        <aside class="sidebar">
            {{ sidebar_content|safe }}
        </aside>
    </main>
    <footer>
        {{ footer_content|safe }}
    </footer>
    <script> // 图片点击放大（fancybox）
        $(document).ready(function () {
            // Event delegation to handle click on dynamically loaded images
            $(document).on('click', 'article img', function (e) {
                e.preventDefault();
                const clickedImg = $(this);
                const gallery = $('article img').filter((i, img) => {
                    // Filter out images smaller than 100x100
                    const width = img.naturalWidth;
                    const height = img.naturalHeight;
                    return width >= 100 && height >= 100;
                }).map((i, img) => {
                    return { src: $(img).attr('src'), opts: { caption: $(img).attr('alt') } };
                }).get();
                const index = gallery.findIndex(image => image.src === clickedImg.attr('src'));
                $.fancybox.open(gallery, {}, index);
            });
        });
    </script>
</body>

</html>