JS一分钟在github+Jekyll的博客中添加访问量功能的实现

这里是关于“JS一分钟在GitHub+Jekyll的博客中添加访问量功能的实现”的完整攻略。

1. 创建一个GitHub仓库

首先，登录自己的GitHub账户，然后点击右上角的+按钮，选择“New repository”创建一个新的仓库。

给仓库起一个名字，比如你的博客名字加上“访问量”之类的后缀，然后选择仓库的设置为公共的（Public），然后点击“Create repository”按钮创建仓库。

2. 添加一个计数器 SVG 图像

为了显示博客的访问量，你需要添加一个计数器 SVG 图像。有很多在线SVG计数器生成器可供选择，这里我们推荐 Shields.io，下面是添加一个计数器的步骤：

打开 Shields.io，选择“Custom badge”选项卡。
输入以下内容：
左侧文本：访问量
右侧文本：0（这是初始值，后面会用JS来更新它）
样式：选择Flat（这是一种扁平风格）
颜色：任意选择一个颜色
点击“Copy Markdown”按钮，将生成的 Markdown 代码复制到剪贴板中。

3. 将计数器添加到Jekyll博客中

现在，你已经拿到了一个计数器 SVG 图像，接下来，你需要把它添加到博客页面中。具体步骤如下：

打开你的博客源代码所在的 GitHub 仓库。
找到一个你想要在其中添加计数器的页面，比如说主页，编辑这个页面的 Markdown 源码。
在任何一个地方，添加计数器的 Markdown 代码（即你从 Shields.io 复制的那段代码）。
提交代码并发布到 GitHub Page 上。
访问博客，你应该会看到已经添加了计数器。不过，由于这时候计数器的数值还是初始值 0，所以下一步我们需要为它实现计数功能。

4. 使用JS实现计数功能

让我们在html的页面添加以下JS代码，需要使用到 jQuery 库：

<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

在html页面的末尾添加以下JS代码，它会向 GitHub API 发送一个请求，从而获取到当前的访问量：

<script>
$(document).ready(function(){
    $.getJSON('https://api.github.com/repos/你的用户名/你的仓库名', function(data){
        var value = data.watchers_count;
        $('#visitor-count').html(value);
    });
});
</script>

在这里，你需要将代码中的 你的用户名 和 你的仓库名 替换成你的 GitHub 用户名和博客的仓库名。

最后，在博客页面上的计数器 SVG 图像的右侧文本处添加一个空的 span 元素，它的 id 值为 visitor-count，用来显示当前访问量：

<span id="visitor-count"></span>

现在，刷新你的博客页面，你应该会看到计数器的数值会随着你的博客访问量的增加而实时更新。

示例说明

示例 1 - 记录总访问量

要记录总访问量，你需要在后台存储访问量的数值。一种方法是使用一个第三方的统计代码，比如 Google Analytics。

在 Google Analytics 中，你可以创建一个账户，然后将 Google 的 JS 代码添加到你的博客中，这样 Google 就会为你记录所有的访问量并提供相关的分析报告。

示例 2 - 记录每日访问量

要记录每日访问量，你可以使用一个 JavaScript 库，比如 Day.js 来实现。Day.js 是一个强大且轻量级的日期库，支持各种各样的日期格式和时区，而且使用非常简单。

接下来的代码演示了如何使用 Day.js 记录每日的访问量，并将它们保存到一个 JSON 文件中：

$(document).ready(function(){
    // 获取当前日期，格式为 YYYY-MM-DD
    var date = dayjs().format('YYYY-MM-DD');

    // 从本地存储中获取访问量数据
    var data = JSON.parse(localStorage.getItem('visitor_data')) || {};

    // 获取今天的访问量
    var today = data[date] || 0;

    // 显示今天的访问量
    $('#visitor-count').html(today);

    // 增加今天的访问量
    data[date] = today + 1;

    // 将访问量数据保存到本地存储中
    localStorage.setItem('visitor_data', JSON.stringify(data));
});

在这里，我们将每天的访问量记录到一个 JSON 文件中，文件的格式如下：

{
"2021-01-01": 10, // 2021年1月1日的访问量为10
"2021-01-02": 5, // 2021年1月2日的访问量为5
// ...
}

当你需要显示每日访问量时，只需要从这个文件中读取数据并输出即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS一分钟在github+Jekyll的博客中添加访问量功能的实现 - Python技术站