评论数统计

大约 2 分钟...

Waline 支持显示评论数。

在获取评论时自动更新页面

你可以在 init 函数通过设置 comment 选项为 true 来开启评论数统计。

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

  init({
    el: '#waline',
    // ...
    comment: true, // 评论数统计
  });
</script>

Waline 会在初始化以及每次 path 更新时,自动查找页面中 class 值为 waline-comment-count 的元素,获取其 data-path 属性为查询条件,并将值填入其中。

<!-- data-path 将作为查询条件 -->
当前页共有
<span
  class="waline-comment-count"
  data-path="/guide/client/count.html"
/>条评论。

如果你需要一个不一样的选择器,你可以设置 comment 选项为这个选择器。

每次当你调用 WalineInstance.update() 时,Waline 会重新查找页面并自动更新评论数。

例子

当前页共有
<span class="waline-comment-count" data-path="/cookbook/comment.html" />条评论。

当前页共有 条评论。

手动更新

除了通过 init 函数自动更新之外,你可以通过 commentCount API 来手动更新当前页面的评论数:

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

  commentCount({
    serverURL,
    path,

    // 可选的,用于自定选择器,默认为 `'.waline-pageview-count'`
    // selector: '.waline-pageview-count',
  });
</script>

中途取消

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

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

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

// 在 500ms 后,如果网络请求仍未完成,取消本次操作
setTimeout(() => abort(), 500);

单独导入

有些时候,你可能希望在文章列表或者主页中展示一些页面的评论数,而不希望载入整个 Waline。此时你可以使用一个 Gzip 大小 < 1KB 的 comment 模块:

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

  commentCount({
    serverURL,
    path,

    // 可选的,用于自定选择器,默认为 `'.waline-pageview-count'`
    // selector: '.waline-pageview-count',
  });
</script>
友情提示:评论区仅作评论展示,如有问题咨询请去 Github Discussion 中提问。
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.7