浏览量统计
大约 2 分钟...
Waline 支持浏览量统计。
和评论一起使用
如果你正在使用 Waline 的评论服务,你可以在初始化时设置 pageview
选项为 true
来开启浏览量统计功能:
Waline.init({
el: '#waline',
// ...
pageview: true, // 浏览量统计
});
Waline 会自动查找页面中 class
值为 waline-pageview-count
的元素,获取其 data-path
为查询条件,并将得到的值填充到其中:
如果你需要一个不一样的选择器,你可以设置 pageview
选项为这个选择器。
<!-- data-path 将作为查询条件 -->
阅读量: <span class="waline-pageview-count" data-path="<Your/Path/Name>" />
每次当你调用 WalineInstance.update()
时,Waline 会重新查找页面并自动更新浏览量。
例子
当前页阅读量为:
<span class="waline-pageview-count" data-path="/guide/client/count.html" />
当前页阅读量为:
单独使用
如果你只需要使用浏览量统计功能,你可以导入 Waline 提供的 pageview 模块,它的 Gzip 大小 < 1KB。
<ul>
<li>
当前页面浏览量:
<span class="waline-pageview-count" />
</li>
<li>
主页浏览量:
<span class="waline-pageview-count" data-path="/" />
</li>
</ul>
<script src="https://unpkg.com/@waline/client/dist/pageview.js"></script>
<script>
Waline.pageviewCount({
serverURL: '<YOUR_SERVER_URL>',
path: window.location.pathname,
// 可选的,用于自定选择器,默认为 `'.waline-pageview-count'`
// selector: 'waline-pageview-count',
// 可选的,是否在获取时增加访问量,默认为 `true`
// update: true,
});
</script>
当前页面浏览量:
主页浏览量:
中途取消
由于浏览量获取是一个异步网络操作,你可能需要在特定情况下取消正在执行的浏览量更新操作。
pageviewCount
会返回一个函数,调用后即可取消此次更新:
const abort = Waline.pageviewCount({
serverURL: '<YOUR_SERVER_URL>',
path: window.location.pathname,
});
// 在 500ms 后,如果网络请求仍未完成,取消本次操作
setTimeout(() => abort(), 500);
友情提示:评论区仅作评论展示,如有问题咨询请去 Github Discussion 中提问。