<!-- 数据统计&作者相关信息 -->
<div class="author-content">
    <div class="about-statistic author-content-item"
         style="background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp);">
        <div class="card-content">
            <div class="author-content-item-tips">数据</div>
            <span class="author-content-item-title">访问统计</span>
            <div id="statistic"></div>
            <div class="post-tips">统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6"
                                                   rel="noopener nofollow"
                                                   target="_blank">51la网站统计</a></div>
            <div class="banner-button-group">
                <a class="banner-button" onclick="pjax.loadUrl('/archives')" data-pjax-state="">
                    <i class="haofont hao-icon-circle-arrow-up-right-1"></i>
                    <span class="banner-button-text">文章隧道</span>
                </a>
            </div>
        </div>
    </div>
    
    
    <div class="author-content-item-group column mapAndInfo">
        <div class="author-content-item map single">
            <span class="map-title">我现在住在
                <b>[[${theme.config.about.map.StrengthenTitle}]]</b>
            </span>
        </div>
        <div class="author-content-item selfInfo single"
             th:if="${not #lists.isEmpty(theme.config.about.map.authorInfo)}"
             th:with="texts = ${theme.config.about.map.authorInfo}">
            <div th:if="${theme.config.about.map.authorInfo.size()}>'0'">
                <span class="selfInfo-title"
                      th:text="${texts[0].authorInfoTitle}">生于</span><span
                    class="selfInfo-content"
                    id="selfInfo-content-year" th:style="'color:' + ${texts[0].authorInfoColor}"
                    th:text="${texts[0].authorInfoContent}">2000</span>
            </div>
            <div th:if="${theme.config.about.map.authorInfo.size()}>'1'">
                <span class="selfInfo-title"
                      th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span
                    class="selfInfo-content"
                    th:style="'color:' + ${texts[1].authorInfoColor}"
                    th:text="${texts[1].authorInfoContent}">计算机科学</span>
            </div>
            <div th:if="${theme.config.about.map.authorInfo.size()}>'2'">
                <span class="selfInfo-title"
                      th:text="${texts[2].authorInfoTitle}">现在职业</span><span
                    class="selfInfo-content"
                    th:style="'color:' + ${texts[2].authorInfoColor}"
                    th:text="${texts[2].authorInfoContent}">BI工程师</span>
            </div>
        </div>
    </div>
    <style>
        .author-content-item.map {
            background: url([[${theme.config.about.map.background}]]) no-repeat center;
            min-height: 160px;
            max-height: 400px;
            position: relative;
            overflow: hidden;
            margin-bottom: 0.5rem;
            height: 60%;
            background-size: 100%;
            transition: 1s ease-in-out;
        }
        
        [data-theme=dark] .author-content-item.map {
            background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center;
            background-size: 100%;
        }
        
        .author-content-item.map:hover {
            background-size: 120%;
            transition: 4s ease-in-out;
            background-position-x: 0;
            background-position-y: 36%;
        }
        
        .author-content-item.map .map-title {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            background: var(--heo-maskbg);
            padding: 0.5rem 2rem;
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: blur(20px);
            transition: 1s ease-in-out;
            font-size: 20px;
            border-radius: 0 0 1rem 1rem;
        }
        
        .author-content-item.map:hover .map-title {
            bottom: -100%;
            border-radius: 0 0 1rem 1rem;
        }
        
        .author-content-item.map .map-title b {
            color: var(--heo-fontcolor);
        }
        
        @media screen and (max-width: 768px) {
            .author-content-item.map.myphoto {
                background-size: cover !important;
            }
            
            .author-content-item.map .map-title {
                padding: 1rem;
            }
        }
    </style>
    <!-- 关于统计-->
    <script defer>
        // 链接替换即可，不需要后面的参数
        function initAboutPage() {
            fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js")
                    .then(res => res.text())
                    .then(data => {
                        let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
                        // let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
                        let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
                        
                        num = num.map(el => {
                            let val = el.replace(/(<\/span><span>)/g, "");
                            let str = val.replace(/(<\/span><\/p>)/g, "");
                            return str;
                        });
                        
                        let statisticEl = document.getElementById("statistic");
                        
                        // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
                        let statistic = [];
                        for (let i = 0; i < num.length; i++) {
                            if (!statisticEl) return;
                            if (i == 0) continue;
                            statisticEl.innerHTML +=
                                    "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
                            queueMicrotask(() => {
                                statistic.push(
                                        new CountUp(title[i], 0, num[i], 0, 2, {
                                            useEasing: true,
                                            useGrouping: true,
                                            separator: ",",
                                            decimal: ".",
                                            prefix: "",
                                            suffix: "",
                                        })
                                );
                            });
                        }
                        
                        let statisticElement = document.querySelector(".about-statistic.author-content-item");
                        
                        function statisticUP() {
                            if (!statisticElement) return;
                            
                            const callback = (entries, observer) => {
                                entries.forEach(entry => {
                                    if (entry.isIntersecting) {
                                        for (let i = 0; i < num.length; i++) {
                                            if (i == 0) continue;
                                            queueMicrotask(() => {
                                                statistic[i - 1].start();
                                            });
                                        }
                                        observer.disconnect(); // 停止观察元素，因为不再需要触发此回调
                                    }
                                });
                            };
                            
                            const options = {
                                root: null,
                                rootMargin: "0px",
                                threshold: 0
                            };
                            const observer = new IntersectionObserver(callback, options);
                            observer.observe(statisticElement);
                        }
                        
                        statisticUP()
                    });
        }
        
        initAboutPage();
    
    </script>
</div>