Skip to content

浏览量统计

Artalk 内置页面浏览量统计和评论数统计功能,你可以在页面中显示页面的浏览量和评论数。

html
浏览量:<span class="artalk-pv-count"></span>
评论数:<span class="artalk-comment-count"></span>

加载占位符

Artalk 加载需要时间,你可以在展示统计数的元素中加入占位符:

html
<span class="artalk-pv-count">加载中...</span>

同时加载多个页面的统计数

例如在文章列表页,你可以显示每篇文章的浏览量和评论数。

当处于文章列表页时,仅需调用 Artalk.loadCountWidget 函数,而无需 Artalk.init (加载评论列表会使页面浏览量 PV 数 +1)。

js
Artalk.loadCountWidget({
  server: '服务器地址',
  site: '站点名',
  pvEl: '.artalk-pv-count',
  countEl: '.artalk-comment-count',
  statPageKeyAttr: 'data-page-key',
})

然后放置多个 class 为 artalk-pv-count 的元素,通过属性 data-page-key 来指定需要查询的页面:

html
<span class="artalk-pv-count" data-page-key="/test/1.html"></span>
<span class="artalk-pv-count" data-page-key="/test/2.html"></span>
<span class="artalk-pv-count" data-page-key="/test/3.html"></span>

评论数查询同理:

html
<span class="artalk-comment-count" data-page-key="/test/1.html"></span>
<span class="artalk-comment-count" data-page-key="/test/2.html"></span>
<span class="artalk-comment-count" data-page-key="/test/3.html"></span>

自定义元素选择器

可通过配置项 pvElcountEl 来指定元素选择器,以展示页面浏览量和评论数:

js
Artalk.init({
  pvEl: '.your_pv_count_element',  // 页面浏览量元素选择器
  countEl: '.your_comment_count_element',  // 评论数元素选择器
})

自定义 data-page-key 属性名

配置项 statPageKeyAttr 的默认值为 data-page-key,Artalk 会通过该属性名来查询指定页面。为了方便博客主题的适配,可通过它自定义属性名,例如将其替换为 data-path

js
Artalk.loadCountWidget({
  statPageKeyAttr: 'data-path',
})

此时,对应的 HTML 代码应如下所示:

html
<span class="artalk-pv-count" data-path="/test/1.html"></span>

这样,data-path 属性值将被用于查询指定的页面。

贡献者

页面历史