Busuanzi

动手实现不蒜子

不蒜子 是一个网页计数器, 对于喜欢写博客的朋友来说, 能有一种统计阅读量的方式会很不错。
当然这种功能在更复杂的产品上会有更好玩的应用, 比如统计B站视频的播放量等信息。

我们先从最简单的部分开始, 试着自己实现一下不蒜子的功能。

部署

如果你只是想要快速用好不蒜子的产品功能, 推荐读者阅读 自建 不蒜子 API 这篇博客。
作者甚至帮大家做了该应用在 Replit 上一键部署的示范, 非常好用。

原理

不蒜子根据发起请求的源网页进行计数, 如图 (应该有一个软件工程的那种图, 画出来网络请求中 client, server 各自的反应)。

Referer

1
2
3
4
5
6
sequenceDiagram
    participant Client
    participant Server
    Client->>Server: referer containing $page_url
    Note right of Server: Use $page_url as query key for counts
    Server-->>Client: Viewed counts of the $page_url

前端

  1. 发送当前页面的路径给后端
  2. 展示查询到的显示次数

如下是对代码功能进行的注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
var bszCaller, bszTag;

// 这里 !function 的意思是匿名函数, 立即执行
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
// setInterval

!function () {
    var c, d, e, a = !1, b = [];
    // 这里的 this 应该就是 window obj, 也就是说如果 document.readyState 为 complete 就直接执行 c, 而如果还没好就先放在 b[] 里面.
    // 等到状态变成 complete 再执行 b[] 里面的函数.
    // 但我确实不清楚要执行的函数是啥
    ready = function (c) {
        return a || "interactive" === document.readyState || "complete" === document.readyState ? c.call(document) : b.push(function () { return c.call(this) }), this
    },

    // 后面这几个函数是在确保浏览器已经把 page 加载进来
    // [how to call a function when the page/DOM is ready](https://stackoverflow.com/questions/9899372/vanilla-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-whe)
    d = function () {
        for (var a = 0, c = b.length; c > a; a++)
            b[a].apply(document);  // b[a] 里面应该全是属于 document 的函数, `b[a].apply(document)` 表示这里在执行 document 的函数
        b = []
    },
    e = function () {
        a || (
            a = !0,
            d.call(window),  // 其实就是执行 d 这个函数的意思
            document.removeEventListener ? document.removeEventListener("DOMContentLoaded", e, !1) :
                document.attachEvent && (document.detachEvent("onreadystatechange", e), window == window.top && (clearInterval(c), c = null))
        )
    },
    // 这里其实就是想要添加添加 'DOMContentLoaded' 这个 event; 处于兼容性的考虑在 addEventListener 不行的时候用 attachEvent 替代
    // [Error: TypeError: window.attachEvent is not a function](https://stackoverflow.com/questions/13190336/error-typeerror-window-attachevent-is-not-a-function)
    document.addEventListener ? document.addEventListener("DOMContentLoaded", e, !1) : 
        document.attachEvent && (
            document.attachEvent(
                "onreadystatechange",
                function () { /loaded | complete/.test(document.readyState) && e() }),
                window == window.top && (
                    c = setInterval(
                        function () {
                            // https://stackoverflow.com/questions/63928043/vanilla-js-ready-function-what-is-document-documentelement-doscroll
                            try { a || document.documentElement.doScroll("left") }
                            catch (b) { return }
                            e()
                        },
                        5
                    )
                )
        )
}(),

// [refer](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer)
// referer 记录的是请求的 client 的信息
bszCaller = {
    fetch: function (a, b) {
        var c = "BusuanziCallback_" + Math.floor(1099511627776 * Math.random());
        window[c] = this.evalCall(b),
        a = a.replace("=BusuanziCallback", "=" + c),

        scriptTag = document.createElement("SCRIPT"),
        scriptTag.type = "text/javascript",
        // [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
        // defer 表示这个 script 应该在页面加载完成之后再执行
        scriptTag.defer = !0,
        scriptTag.src = a,
        scriptTag.referrerPolicy = "no-referrer-when-downgrade",
        document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)
    },
    evalCall: function (a) {
        return function (b) {
            ready(
                function () {
                    try {
                        a(b), scriptTag.parentElement.removeChild(scriptTag)
                    }
                    catch (c) { bszTag.hides() }
                }
            )
        }
    }
},

bszCaller.fetch(
    "https://counter.busuanzi.icodeq.com/?jsonpCallback=BusuanziCallback",  // 这个是后端接口
    function (a) { bszTag.texts(a), bszTag.shows() }
),

bszTag = {
    bszs: ["site_pv", "page_pv", "site_uv"],
    // 对后端传过来的数据进行解析显示
    texts: function (a) {
        this.bszs.map(
            function (b) {
                var c = document.getElementById("busuanzi_value_" + b);
                c && (c.innerHTML = a[b])
            }
        )
    },
    // 不显示 <busuanzi_container_> 的那个 tag
    hides: function () {
        this.bszs.map(
            function (a) {
                var b = document.getElementById("busuanzi_container_" + a);
                b && (b.style.display = "none")
            }
        )
    },

    // 显示 <busuanzi_container_> 的那个 tag
    shows: function () {
        this.bszs.map(
            function (a) {
                var b = document.getElementById("busuanzi_container_" + a);
                b && (b.style.display = "inline")
            }
        )
    }
};

后端

后端其实不是主要的难点, 用最基本的键值存储, 把一些页面信息存下来就足够了。

  1. 存储不同路径的显示次数
  2. 查询并反馈

反向代理

不蒜子的前端插件要保证在 github pages 这样 https 协议的博客上有用, 就需要我们的后端服务部署在一个有 SSL 证书的服务器上。
进一步的, 我们用反向代理进行路由转发 {DOMAIN}/busianzi 而不是直接使用裸露的端口号 {DOMAIN}:4096。

1
2
3
4
5
6
7
8
9
# nginx config
location /busuanzi/ {
        # 注意: 反向代理后端 URL 的最后需要有一个路径符号
        proxy_pass http://localhost:9811/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
}

这可以说是部署步骤的一个延申。

参考资料

🤺

Call Me 😎

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

//
// //
很惭愧<br><br>只做了一点微小的工作<br>谢谢大家
// //