<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 公共的 head 部分，可以定义部分 links,scripts,styles -->
<head th:fragment="head(metas,links,scripts)">
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <title th:text="${site.title}"></title>
    <meta content="telephone=no" name="format-detection">
    <meta content="var(--heo-card-bg)" name="theme-color">

    <link rel="shortcut icon"
          th:href="@{${#strings.isEmpty(site.favicon) ? '/assets/images/hao-logo.jpg' : site.favicon}}"/>

    <script th:src="@{/assets/js/heo.js}"></script>

    <link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
    <!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro  -->
    <link media="print"
          onload='this.media="all"'
          rel="stylesheet"
          href="https://cdn2.tianli0.top/gh/duyplus/fontawesome-pro/css/all.min.css"
    />

    <!-- 右下角通知 -->
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css"
          media="print"
          onload='this.media="all"'
          rel="stylesheet"
    />
    <!-- 全局配置 -->
    <!-- todo 不知是否可以移除，或者抽走 -->
    <script>
        var GLOBAL_CONFIG = {
            root: "/",
            localSearch: void 0,
            translate: {
                defaultEncoding: 2,
                translateDelay: 0,
                msgToTraditionalChinese: "简",
                msgToSimplifiedChinese: "繁"
            },
            noticeOutdate: void 0,
            copy: {success: "复制成功", error: "复制错误", noSupport: "浏览器不支持"},
            relativeDate: {homepage: !0, post: !1},
            runtime: "天",
            date_suffix: {just: "刚刚", min: "分钟前", hour: "小时前", day: "天前", month: "个月前"},
            copyright: void 0,
            lightbox: "fancybox",
            Snackbar: {
                chs_to_cht: "你已切换为繁体",
                cht_to_chs: "你已切换为简体",
                day_to_night: "你已切换为深色模式",
                night_to_day: "你已切换为浅色模式",
                bgLight: "#49b1f5",
                bgDark: "#121212",
                position: "top-center"
            },
            source: {
                jQuery: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js",
                justifiedGallery: {
                    js: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js",
                    css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.css"
                },
                fancybox: {
                    //  https://fancyapps.com/docs/ui/installation
                    js: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js",
                    css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css"
                }
            },
        }</script>

    <!-- 站点配置, 这里和 JS 有联动，需要抽走-->
    <script id="config-diff" th:inline="javascript">

        let post = [[${post == null}]];

        var GLOBAL_CONFIG_SITE = {
            title: post ? [[${site.title}]] : '',
            isPost: post,
            isHome: !post,
            isToc: !1,
            postUpdate: "2022-09-30 12:24:38"
        }

    </script>
    <noscript>
        <style>
            #nav {
                opacity: 1
            }

            .justified-gallery img {
                opacity: 1
            }

            #post-meta time, #recent-posts time {
                display: inline !important
            }
        </style>
    </noscript>
    <script>
        (win => {
            win.saveToLocal = {
                set: function setWithExpiry(key, value, ttl) {
                    if (ttl === 0) return
                    const now = new Date()
                    const expiryDay = ttl * 86400000
                    const item = {
                        value: value,
                        expiry: now.getTime() + expiryDay,
                    }
                    localStorage.setItem(key, JSON.stringify(item))
                },

                get: function getWithExpiry(key) {
                    const itemStr = localStorage.getItem(key)

                    if (!itemStr) {
                        return undefined
                    }
                    const item = JSON.parse(itemStr)
                    const now = new Date()

                    if (now.getTime() > item.expiry) {
                        localStorage.removeItem(key)
                        return undefined
                    }
                    return item.value
                }
            }

            win.getScript = url => new Promise((resolve, reject) => {
                const script = document.createElement('script')
                script.src = url
                script.async = true
                script.onerror = reject
                script.onload = script.onreadystatechange = function () {
                    const loadState = this.readyState
                    if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
                    script.onload = script.onreadystatechange = null
                    resolve()
                }
                document.head.appendChild(script)
            })

            win.activateDarkMode = function () {
                document.documentElement.setAttribute('data-theme', 'dark')
                heo.initThemeColor()
            }
            win.activateLightMode = function () {
                document.documentElement.setAttribute('data-theme', 'light')
                heo.initThemeColor()
            }
            const t = saveToLocal.get('theme')

            const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
            const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
            const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
            const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

            if (t === undefined) {
                if (isLightMode) activateLightMode()
                else if (isDarkMode) activateDarkMode()
                else if (isNotSpecified || hasNoSupport) {
                    const now = new Date()
                    const hour = now.getHours()
                    const isNight = hour <= 6 || hour >= 18
                    isNight ? activateDarkMode() : activateLightMode()
                }
                window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
                    if (saveToLocal.get('theme') === undefined) {
                        e.matches ? activateDarkMode() : activateLightMode()
                    }
                })
            } else if (t === 'light') activateLightMode()
            else activateDarkMode()

            const asideStatus = saveToLocal.get('aside-status')
            if (asideStatus !== undefined) {
                if (asideStatus === 'hide') {
                    document.documentElement.classList.add('hide-aside')
                } else {
                    document.documentElement.classList.remove('hide-aside')
                }
            }
        })(window)
    </script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>

    <!--  todo 不知道是否有用 https://remixicon.com/  -->
    <link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

    <!-- 动态加载条 -->
    <script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
            src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"
            th:if="${theme.config.other.load_progress_bar}">
    </script>

    <!-- 复制 https://github.com/zenorocha/clipboard.js -->
    <script th:src="@{/assets/libs/clipboard/clipboard.min.js}"></script>

    <!-- 补充部分 -->
    <th:block th:if="${metas != null}">
        <th:block th:replace="${metas}"/>
    </th:block>

    <th:block th:if="${links != null}">
        <th:block th:replace="${links}"/>
    </th:block>

    <th:block th:if="${scripts != null}">
        <th:block th:replace="${scripts}"/>
    </th:block>
</head>

</html>