<!DOCTYPE html>
<html lang="en" th:fragment="layout(content, htmlType)" xmlns:th="http://www.thymeleaf.org"
      th:with="assets_link=${theme.config.other.staticResource.use == 'onmicrosoft' ? 'https://npm.onmicrosoft.cn/hao-theme-static@' + theme.spec.version +'/templates/assets' :
      theme.config.other.staticResource.use == 'custom' ? theme.config.other.staticResource.cdn_link : #theme.assets('/')},
      theme_version = ${ theme.config.other.staticResource.use == 'local' ? '?v='+ theme.spec.version : ''}">

<!-- head 中自定义的  -->

<head th:replace="~{modules/head :: head(htmlType = ${htmlType})}">
    <title th:text="${site.title}"></title>
</head>

<body>

<!-- loading 页面 -->
<div th:replace="~{modules/loading-box :: loading-box}"></div>

<!-- 网站背景 -->
<div id="web_bg"></div>

<!-- 网站背景 -->
<div id="an_music_bg"></div>

<!-- 控制台 -->
<div th:replace="~{modules/widgets/console :: console}"></div>

<div th:replace="~{modules/sidebar :: sidebar}"></div>

<!-- 左下角音乐 -->
<th:block th:if="${theme.config.tool.nav_music.nav_musicEnable}" >
    <div  th:replace="~{modules/widgets/nav-music :: nav-music}"></div>
</th:block>

<!-- 内容 -->
<th:block th:replace="${content}"></th:block>

<!-- todo 暂时没显示，是右下角悬浮操作按钮 -->
<div id="rightside">
    <div id="rightside-config-hide">
        <button id="translateLink" title="简繁转换" type="button">简</button>
        <button id="darkmode" title="浅色和深色模式转换" type="button"><i class="fas fa-adjust"></i></button>
        <button id="hide-aside-btn" title="单栏和双栏切换" type="button"><i class="fas fa-arrows-alt-h"></i></button>
    </div>
    <div id="rightside-config-show">
        <button id="rightside_config" title="设置" type="button"><i class="fas fa-cog fa-spin"></i></button>
        <button id="go-up" title="回到顶部" type="button"><i class="fas fa-arrow-up"></i></button>
    </div>
</div>


<div th:replace="~{modules/right-menu :: right-menu}"></div>

<div>
    <script th:src="${assets_link + '/js/utils.js' + theme_version}"></script>
    <script th:src="${assets_link + '/js/main.js' + theme_version}"></script>
    <script charset="utf-8" data-pjax th:src="${assets_link + '/zhheo/blogex.js' + theme_version}"></script>

    <!-- https://instant.page/ 网站预加载， 放在 </body> 之前 -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js" type="module"></script>

    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js"></script>

    <!-- 右下角通知 https://www.polonel.com/snackbar/ -->
    <!-- todo head 中有它的 css，应该可以写一块，并改成后台可配置的功能，代码中应该还有他的 js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>

    <!-- 深色模式下添加粒子效果canvas -->
    <canvas th:if="${theme.config.style.universe}" id="universe" width="1312" height="880"></canvas>
    <script th:if="${theme.config.style.universe}" async="" th:src="${assets_link + '/libs/canvas/dark.js' + theme_version}"></script>

    <!-- https://davidshimjs.github.io/qrcodejs/ 生成二维码 -->
    <!-- 应该是文章页分享使用 -->
    <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>

    <!--  https://raphamorim.io/waterfall.js/  应该是这个 还有相关的 js 代码 是否可以调整-->
    <script th:src="${assets_link + '/libs/waterfall/waterfall.min.js' + theme_version}"></script>

    <!-- 获取主色 https://lokeshdhakar.com/projects/color-thief/ -->
    <!--<script th:src="@{/assets/libs/color-thief/color-thief.umd.js}"></script>-->
    <script th:src="${assets_link + '/libs/fast-average-color/index.browser.min.js' + theme_version}"></script>

    <script th:src="${assets_link + '/libs/view-image/view-image.min.js' + theme_version}"></script>

    <!--左下角音乐-->
    <script>var meting_api = '[[${theme.config.tool.nav_music.meting_api}]]'; </script>

    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="all" onload="this.media='all'">

    <script th:src="${assets_link + '/libs/aplayer/APlayer.min.js' + theme_version}"></script>

    <script th:src="${assets_link + '/libs/aplayer/Meting2.min.js' + theme_version}"></script>

    <script th:src="${assets_link + '/libs/pjax/pjax.min.js' + theme_version}"></script>

    <!-- swiper 在瞬间滚动时会使用 -->
    <script data-pjax  src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>

    <!-- 评论弹幕 -->
    <script  th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') &&
        not #strings.isEmpty(theme.config.comments.twikoos.envId) &&
        not #strings.isEmpty(theme.config.comments.twikoos.accessToken)}"  data-pjax=""
             th:src="${assets_link + '/libs/twikoo/commentBarrage.js' + theme_version}"></script>

    <!-- Tocbot 目录生成 start -->
    <th:block th:replace="~{modules/common/toc-bot :: toc-bot}"></th:block>

    <!-- 51统计 -->
    <th:block th:replace="~{modules/common/51-la :: 51-la}"></th:block>

    <!-- 动态标题 -->
    <script th:replace="~{modules/common/diytitle :: diytitle}"></script>

    <!--官方评论插件js-->
    <script th:if="${pluginFinder.available('PluginCommentWidget')}" src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js"></script>

    <div id="js-pjax"></div>

    <script th:if="${theme.config.envelope_comment.enable_danmu}" th:src="${assets_link + '/libs/twikoo/easy-Danmaku.js' + theme_version}" id="Danmaku"></script>


    <script>
        let pjaxSelectors = ['title', '#config-diff', '#body-wrap', '#rightside-config-hide', '#rightside-config-show', '.js-pjax','#site-config']

        if (false) {
            pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
        }

        var pjax = new Pjax({
            elements: 'a:not([target="_blank"])',
            selectors: pjaxSelectors,
            cacheBust: false,
            analytics: false,
            scrollRestoration: false
        })

        document.addEventListener('pjax:send', function () {

            // removeEventListener toc scroll
            window.removeEventListener('scroll', window.tocScrollFn)

            typeof preloader === 'object' && preloader.initLoading()

            heo.initIndexEssay()

            if (window.aplayers) {
                for (let i = 0; i < window.aplayers.length; i++) {
                    if (!window.aplayers[i].options.fixed) {
                        window.aplayers[i].destroy()
                    }
                }
            }

            typeof typed === 'object' && typed.destroy()

            //reset readmode
            const $bodyClassList = document.body.classList
            $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
        })

        document.addEventListener('pjax:complete', function () {
            window.refreshFn()

            document.querySelectorAll('script[data-pjax]').forEach(item => {
                    const newScript = document.createElement('script')
                    const content = item.text || item.textContent || item.innerHTML || ""
                    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
                    newScript.appendChild(document.createTextNode(content))
                    item.parentNode.replaceChild(newScript, item)
                }
            )

            GLOBAL_CONFIG.lazyload.enable && window.lazyLoadInstance.update()

            typeof chatBtnFn === 'function' && chatBtnFn()
            typeof panguInit === 'function' && panguInit()

            // google analytics
            typeof gtag === 'function' && gtag('config', '', {
                'page_path': window.location.pathname
            });

            // baidu analytics
            typeof _hmt === 'object' && _hmt.push(['_trackPageview', window.location.pathname]);

            typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

            // Analytics
            if (false) {
                MtaH5.pgv()
            }

            // prismjs
            typeof Prism === 'object' && Prism.highlightAll()

            typeof preloader === 'object' && preloader.endLoading()
        })

        document.addEventListener('pjax:error', (e) => {
                if (e.request.status === 404 || e.request.status === 500) {
                    window.location.href = e.request.responseURL;
                }
            }
        )
    </script>


</div>

<script data-pjax="">


    if ([[${ theme.config.post.dynamicBackground }]]) {
        // 图片主色
        coverColor();
    }

    if ([[${ theme.config.other.loadingBoxs.loadingBoxEnable }]]) {
        // 移除加载动画
        removeLoading();
    }
    navTitle();
    heo.topPostScroll();
    heo.topCategoriesBarScroll();
    heo.sayhi();
    heo.addTag();
    heo.stopImgRightDrag();
    heo.qrcodeCreate();
    heo.onlyHome();
    heo.addNavBackgroundInit();
    //heo.addMediumInEssay();
    heo.darkModeStatus();
    // heo.categoriesBarActive();
    heo.initThemeColor();
    //页脚友联
    if(GLOBAL_CONFIG.isFriendLinksInFooter){
        heo.addFriendLinksInFooter()
    }

    //右下角 snackbar 弹窗
    if ([[${ theme.config.tool.snackbar.switch }]]) {
        heo.hidecookie()
    }

    //音乐页面切换歌曲调用
    if(GLOBAL_CONFIG.isMusic){
        heo.changeMusicBg(false);
    }

    //代码块
    if(GLOBAL_CONFIG.prism.enable){
        halo.addPrismTool()
        halo.dataCodeTheme()
    }

    if(document.querySelector('#danmu') &&
        document.body.clientWidth > 768 &&
        [[${theme.config.envelope_comment.enable_danmu}]]){
        halo.closeCommentBarrage();
        halo.addScript("Danmaku", "[[${assets_link + '/libs/twikoo/easy-Danmaku.js'}]]", halo.danmu("[(${theme.config.comments.twikoos.envId})]","[(${theme.config.comments.twikoos.accessToken})]",[[${theme.config.envelope_comment.maxBarrage}]]))
    }




</script>
</body>

</html>
