<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="keywords"
        content="<% if (page.tags){%><% page.tags.each(function (tag) { %><%= tag.name %>,<%  }) %><% } else { %><%- theme.keywords %><% } %>" />
    <meta name="description"
        content="<% if (page.des) {%><%= page.des %><% } else if (page.title) {%><%= page.title %><% }else { %><%= config.description %><% } %>" />
    <title><%= config.title %><% if (page.title){%>: <%= page.title %> <%}%></title>
    <!-- favicon -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <%- css('css/style.css') %>

        <!-- highlight -->
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-light.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>

        <script>
            window.addEventListener('DOMContentLoaded', function () {
                const [
                    mainTitle,
                    mobileMenu,
                    mobileMainTitle,
                    mobileMenuBtn,
                    ipadMenuBtn,
                    aside,
                    closeBtn,
                ] = getEle(
                    '#main-title',
                    '.mobile-menu',
                    '.mobile-menu h3',
                    '.mobile-menu button',
                    '.ipad-menu',
                    'aside',
                    'aside .close',
                )
                const io = new IntersectionObserver(entries => {
                    if (entries[0].intersectionRatio <= 0) {
                        mobileMainTitle.classList.remove('invisibile')
                    } else {
                        mobileMainTitle.classList.add('invisibile')
                    }
                })
                io.observe(mainTitle)

                clickToggleAside(mobileMenuBtn)
                clickToggleAside(ipadMenuBtn)
                clickToggleAside(closeBtn, false)

                const isMenuVisible = window.getComputedStyle(mobileMenu).display !== 'none'
                if (isMenuVisible) document.body.style.background = 'none'

                function getEle(...args) {
                    return args.map(arg => document.querySelector(arg))
                }

                function clickToggleAside(btn, show = true) {
                    btn.addEventListener('click', function () {
                        if (show) {
                            aside.style.display = 'block'
                        } else {
                            aside.style.display = 'none'
                        }
                    })
                }
            })
        </script>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-MGLC34ST00"></script>
        <script>
            window.dataLayer = window.dataLayer || [];

            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());

            gtag('config', 'G-MGLC34ST00');
        </script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML" async>
        </script>
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
            tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno",skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']},
            TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
            messageStyle: "none"
        }); 

        MathJax.Hub.Queue(function() {
            var all = MathJax.Hub.getAllJax(), i;
            for(i=0; i < all.length; i += 1) {
                all[i].SourceElement().parentNode.className += ' has-jax';
            }
        });
    </script>

</head>