Artalk统计 API 说明

此API可以在Artalk官方的Openapi中找到

POST /stat

开始使用API

Nuxt实现

<template>
  <div class="static_warp">
      ......
    <div class="static_item">
        <span class="static_span">
          访问
        </span>
        <span class="static_num">
          {{ pv.success ? pv.data : '无法获取' }}
        </span>
    </div>
    <div class="static_item">
        <span class="static_span">
          评论
        </span>
      <span class="static_num">
          {{ comments.success ? comments.data : '无法获取' }}
        </span>
    </div>
      ......
  </div>
</template>

<script setup lang="ts">
  /*
    侧栏统计组件
   */

  import { onMounted } from "#imports";
  const pv = useLazyAsyncData('pv', () => $fetch('https://你的Artalk域名/api/stat', {
    method: 'post',
    headers: {
      'origin': '你的源站'
    },
    query: {
      'type': 'site_pv',
      'site_name': 'Rootlex 的博客',
    },
  }).catch(() => {
    console.log('无法获取PV')
  })).data
  const comments = useLazyAsyncData('comments', () => $fetch('https://你的Artalk域名/api/stat', {
      method: 'post',
      headers: {
        'origin': '你的源站'
      },
      query: {
        'type': 'site_comment',
        'site_name': '你站点的名字',
      },
    }).catch(() => {
      console.log('无法获取总comments数')
    })).data

  onMounted(async() => {
    await $fetch('https://你的Artalk域名/api/pv', {
      method: 'post',
      query: {
        'page_key': '你的源站',
        'site_name': 'Rootlex 的博客',
      },
    }).catch(() => {
      console.log('无法提交PV')
    })
  })

</script>

在使用 useLazyAsyncData 需要传入 origin，因为服务端并不知道你的 origin 所以不会自动传入。如果我们不传入Artalk会阻止我们访问API。而在组件完成挂载后（onMounted）请求则不用传入。

这里我在组件挂载后请求了 /api/pv 这个接口，用来增加和统计首页的PV

原生JS实现

原生JS可以通过 promise.all 和 fetch 实现，此方法尚未经过博主测试，请谨慎使用，但JS写法应该是差不多的

const siteName = '站点名称'
onload(()=>{
    const [pv, comments, postpv] = Promise.all([
        fetch('https://你的Artalk域名/api/stat' + '?type=site_pv' + '?site_name=' + siteName, {
            method: 'post',
        }).catch(()=>{
            console.error('无法获取PV')
        }),
        fetch('https://你的Artalk域名/api/stat' + '?type=site_comment' + '?site_name=' + siteName, {
            method: 'post',
        }).catch(()=>{
            console.error('无法获取总comments数')
        }),
        fetch('https://你的Artalk域名/api/pv' + '?page_key=' + window.location, {
            method: 'post'
        }).catch(()=>{
            console.error('提交PV失败')
        }),
    ]).catch(()=>{
        console.error('error')
    })
    console.log(pv,comments)
})