利用Waline给Hugo网站增加文章浏览量功能

最近非常高产，对博客进行了一系列优化和新功能添加。这次的灵感是来自看到别人的博客都有浏览量统计功能，怎么能少的了这么重要的功能呢，别人一看你的文章这么多人浏览，一定会觉得很有价值吧，于是我就决定加上这个功能。

其实这个功能非常简单，如果你有一台服务器的话，只需要每次点击文章的时候请求增加浏览量接口，传参文章ID，然后获取列表的时候获取多个文章或者单个文章的浏览量即可。一共大概就是三个接口，当然这也需要一定的工作量，我们选择一个最简单的方式实现，首先你需要在博客中集成了waline作为评论组件。然后我们看看文档中浏览量统计功能的描述：

首先第一件事，在config.yaml中打开waline的pageview选项：

params:
  comments:
    waline:
      pageview: true

开启后，点击具体文章后就会调用接口增加浏览量。接下来我们让浏览量显示在文章的某个位置，我选择显示在阅读时间之后，于是把这段代码放在文章详情部分。这里注意我新增了一个浏览量icon放在./assets/icons目录下，同时如果没读取到浏览量时显示为0，然后做了i18n的翻译。

// layouts/partials/article/components/details.html
<div>
    {{ partial "helper/icon" "view" }}
    <time class="article-time--published">
        {{ T "article.pageview" }}<span class="waline-pageview-count" data-waline-pageview-count="0">0</span>
    </time>
</div>

如果你只需要一个最简单的浏览量显示，只需要如下代码，data-path可以指定具体文章的路径，不指定默认为当前页面

<div id="article-info">
  阅读量: <span class="waline-pageview-count" data-path="<Your/Path/Name>" />
</div>

然后就大功告成了，实现的逻辑就是评论区加载完成后，会返回当前文章的浏览量，然后waline会遍历class=waline-pageview-count的元素，将其内容替换为文章的浏览量。所以一般点进来会加载一会儿才能获取到文章的浏览量。

你也可以通过API接口访问某个文章或者某几个文章的浏览量，这样可以在文章列表页面显示浏览量。

URL
waline配置的serverURL

API接口
GET /api/article

参数
Path string 
对应文章标识，多个标识用逗号分隔