浏览量统计

大约 2 分钟...

Waline 支持浏览量统计。

和评论一起使用

如果你正在使用 Waline 的评论服务,你可以在初始化时设置 pageview 选项为 true 来开启浏览量统计功能:

<div id="article-info">
  <!-- ... -->
  阅读量: <span class="waline-pageview-count" data-path="<Your/Path/Name>" />
  <!-- ... -->
</div>
<!-- 文章内容 -->
<div id="waline"></div>
<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';

  init({
    el: '#waline',
    // ...
    pageview: true, // 浏览量统计
  });
</script>

Waline 会在初始化以及每次 path 更新时,自动查找页面中 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 type="module">
  import { pageviewCount } from 'https://unpkg.com/@waline/client/dist/pageview.mjs';

  pageviewCount({
    serverURL: '<YOUR_SERVER_URL>',
    path: window.location.pathname,

    // 可选的,用于自定选择器,默认为 `'.waline-pageview-count'`
    // selector: 'waline-pageview-count',

    // 可选的,是否在获取时增加访问量,默认为 `true`
    // update: true,
  });
</script>
  • 当前页面浏览量:

  • 主页浏览量:

中途取消

由于浏览量获取是一个异步网络操作,你可能需要在特定情况下取消正在执行的浏览量更新操作。

pageviewCount 会返回一个函数,调用后即可取消此次更新:

<script type="module">
  import { pageviewCount } from 'https://unpkg.com/@waline/client/dist/pageview.mjs';

  const abort = pageviewCount({
    serverURL: '<YOUR_SERVER_URL>',
    path: window.location.pathname,
  });

  // 在 500ms 后,如果网络请求仍未完成,取消本次操作
  setTimeout(() => abort(), 500);
</script>
友情提示:评论区仅作评论展示,如有问题咨询请去 Github Discussion 中提问。
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.7