
Rootlex 

使用Artalk代替不蒜子统计PV
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)
})
评论