使用Artalk 的 Hexo 站点数据统计实现方案

<%
// 保存网站中所有包含artalk评论的页面URL字段
const allPostUrls = [];
// 一、添加首页、归档页
allPostUrls.push("/");
allPostUrls.push("/archives/");
// 二、获取所有文章（归档页）的url
site.posts.each(function (post) {
    if (post.archive === undefined || post.archive === true) {
        // 1. 生成原始URL（带.html后缀）
        let postUrl = url_for(post.link || post.path);
        // 2. 去掉尾部的.html后缀（使用replace替换）
        postUrl = postUrl.replace(/\.html$/, '');
        // 3. 存入数组
        allPostUrls.push(postUrl);
    }
});
// 三、获取导航栏所有自定义页面的url
const list_menu = theme.navbar.menu
list_menu.forEach(item => {
    if (item.rows && Array.isArray(item.rows)) {
        item.rows.forEach(row => {
            if (row.url) {
                allPostUrls.push(row.url);
            }
        });
    }
});
%>

<%
// 保存网站中所有包含artalk评论的页面URL
const allPostUrls = [];
// 一、添加首页、归档页
allPostUrls.push("/");
allPostUrls.push("/archives/");
// 二、获取所有文章（归档页）的url
site.posts.each(function (post) {
    if (post.archive === undefined || post.archive === true) {
        // 1. 生成原始URL（带.html后缀）
        let postUrl = url_for(post.link || post.path);
        // 2. 去掉尾部的.html后缀（使用replace替换）
        postUrl = postUrl.replace(/\.html$/, '');
        // 3. 存入数组
        allPostUrls.push(postUrl);
    }
});
// 三、获取导航栏所有自定义页面的url
const list_menu = theme.navbar.menu
list_menu.forEach(item => {
    if (item.rows && Array.isArray(item.rows)) {
        item.rows.forEach(row => {
            if (row.url) {
                allPostUrls.push(row.url);
            }
        });
    }
});
// console.log(allPostUrls);
%>
<script>
    <%# 获取网站总浏览量 %>
    const siteName = '<%- config.title %>';
    const new_allPostUrls = <%- JSON.stringify(allPostUrls) %>;
    var apiUrl = "<%- theme.comments.artalk.server %>/api/v2/stats/page_pv?page_keys=" + new_allPostUrls.join(",") + "&site_name=" + siteName;
    fetch(apiUrl).then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    }).then(({data}) => {
        const totalViews = Object.values(data).reduce((sum, views) => sum + views, 0);
        const visitorEl = document.querySelector('.stat-visitor');
       <%# visitorEl.dataset.count = totalViews; %>
		visitorEl.innerHTML = totalViews;

    }).catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

    <%# 获取网站总评论数 %>
    const url = `<%- theme.comments.artalk.server %>/api/v2/stats/site_comment?site_name=${encodeURIComponent(siteName)}`;
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(({data}) => {
            const commentEl = document.querySelector('.stat-comment');
           <%# commentEl.dataset.count = JSON.stringify(data); %>
            commentEl.innerHTML = JSON.stringify(data);
        })
        .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
        });
</script>

<script>
    function card_load_artalk() {
        volantis.css("<%- theme.comments.artalk.css %>");
        volantis.js("<%- theme.comments.artalk.js %>")
            .then(() => {
                if (typeof Artalk === 'undefined') {
                    console.error('Artalk.js loaded but Artalk is not defined');
                    return;
                }
                return card_post_artalk();
            })
            .catch(err => {
                console.error('Failed to load Artalk.js:', err);
            });
    }

    function card_post_artalk() {
        if (!window.Artalk) {
            console.error("Artalk未加载，请检查脚本引入");
            return;
        }
        Artalk.loadCountWidget({
            server: '<%- theme.comments.artalk.server %>',
            site: '<%- config.title %>',
            pvEl: '.card_artalk_visitors',
            countEl: '.card_artalk_comment',
            statPageKeyAttr: 'data-page-key',
        });
    }
    card_load_artalk();
</script>