如何使用 js 统计访问量及网站运行时间

我打算用思源的 Docker 发布功能搭建博客,但不知如何统计访问量。能否提供一段 JS 代码,实现记录访问量和网站运行时间,并将这些信息显示在侧边栏?另外,希望代码存储的数据能通过 S3 同步或打包。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25925 引用 • 107450 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9952 引用 • 45204 回帖 • 77 关注

相关帖子

被采纳的回答
  • wilsons 1 1 赞同

    写了一个代码,但不知你说的侧边栏是指放哪?感觉放不下,所以放状态栏了。

    另外,手机版也不知道哪里有位置显示,所以暂不支持。

    仅供参考。

    image.png

    // 统计网站访问量和运行时间 (async ()=>{ // api地址,最后不要加 / const apiUrl = 'http://127.0.0.1:6806'; // api token 在设置->关于中查看 const apiToken = ''; // 初始化数据 const initData = { // 网站总访问量 total: 0, // 网站运行初始日期 startDay: '2025-04-13' }; // 定义统计信息显示模板 const tongjiTpl = `总访问量:{total}&nbsp;&nbsp;网站运行:{runningDays}天`; // 已统计的跳过 if(document.querySelector('#status .site__tongji')) return; // 记录初始访问量 const initTotal = initData.total || 0; // 延迟等待数据加载和同步 await sleep(1500); // 获取置顶数据,格式 {"total":0, "startDay":''} let data = await getFile('/data/storage/site_tongji.json'); data = JSON.parse(data||'{}'); if(data.code && data.code !== 0) data = {}; data = {...initData, ...data}; // 仅网站版和发布服务版才统计 if(siyuan.config.readonly && isBrowser()) { // 当不存在total字段时初始化 if(!data.total) data.total = 0; // 当总数小于初始化值时,直接赋值为初始化的值 if(data.total < initTotal) data.total = initTotal; // 网站访问+1 data.total++; // 存储网站访问数据 if(data.total > 0) putFile('/data/storage/site_tongji.json', JSON.stringify(data, null, 4)); } // 获取网站运行时间 const runningDays = calculateRunningDays(data); // 状态栏显示统计信息 showStatusMsg(tongjiTpl.replace('{total}', data.total).replace('{runningDays}', runningDays)); // 计算网站运行时间(单位:天) function calculateRunningDays(data) { // 获取当前日期并重置时间为 00:00:00 const currentDate = new Date(); resetTime(currentDate); // 解析初始日期并重置时间为 00:00:00 const startDate = new Date(data.startDay); if (isNaN(startDate.getTime())) { return 1; } resetTime(startDate); // 计算时间差(毫秒) const timeDifference = currentDate - startDate; // 转换为天数 const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); return daysDifference + 1; } function resetTime(date) { date.setHours(0, 0, 0, 0); // 设置时间为 00:00:00.000 return date; } // 状态栏输出 function showStatusMsg(html) { const statusMsg = document.querySelector('#status .status__msg'); if(!statusMsg) return; const tongji = document.querySelector('#status .site__tongji'); if(tongji) tongji.remove(); const style = ` color: var(--b3-theme-on-surface); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 5px; font-size: 12px; `; html = `<div class="site__tongji" style="${style}">${html}</div>`; statusMsg.insertAdjacentHTML('beforebegin', html); } function isBrowser() { return !navigator.userAgent.startsWith("SiYuan") || navigator.userAgent.indexOf("iPad") > -1 || (/Android/.test(navigator.userAgent) && !/(?:Mobile)/.test(navigator.userAgent)); } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // 获取文件 async function getFile(path) { return fetch("/api/file/getFile", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ path, }), }).then((response) => { if (response.ok) { return response.text(); } else { throw new Error("Failed to get file content"); } }).catch((error) => { console.error(error); }); } // 存储文件,支持创建文件夹,当isDir true时创建文件夹,忽略文件 async function putFile(path, content = '', isDir = false) { const formData = new FormData(); formData.append("path", path); formData.append("isDir", isDir) formData.append("file", new Blob([content])); const result = await fetch(apiUrl+"/api/file/putFile", { // 写入js到本地 method: "POST", headers: { "Authorization": "token " + apiToken // 添加 Authorization 头 }, body: formData, }); const json = await result.json(); return json; } })();

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 有可能,你再过测试看看,现在不好说,你可以在本地测试,如果本地没问题,那就应该是 dcdn 的问题。

    1 回复
  • 其他回帖
  • CongSec

    可以一直显示吗?刚开始访问的时候就可以显示出来,但是过了一分钟左右就消失了

    image.png

    1 回复
  • siyuan100861186 1 1 赞同

    有一个嵌入式的程序,umami,这个直接嵌入网站就可以统计访问信息了

  • CongSec 3 评论

    今天起床发现,服务端访问量从 168 回归到 5,期间的过程我想是因为归零一次了,以下是服务端的日志:

    systemlog.zip

    还麻烦你增强下代码的健壮性,把归零的代码逻辑部分去掉;

    image.png

    你最近有做什么吗?先推测下可能的原因,这样才能针对的解决问题。大致方向是同步的锅,比如存储的统计数据,尚未同步成功时被执行了存储操作,还有如果客户端上开启了只读模式,如果尚未同步成功,可能会被重写数据。所以,现在做了以下几种限制:1 仅发布服务和浏览器访问才统计,2 网站加载时暂停 1.5 秒执行,等待数据同步完成 3 判断已存数据是否小于初始数据 4 数据只有大于 0 的时候才被存储
    wilsons 1
    @wilsons 我的使用场景主要如下:服务器挂载 docker 启动发布功能充当博客,另一边是我的本机电脑, 两者的数据同步方式是采用 s3 同步,我的本机电脑更改数据点击同步会自动同步到服务器的 docker 当中,刚开始的几天内可以正常使用,也就是今天起床时候出现了故障,我启动博客(服务端的发布功能)查看,发现那里的访问量是 5 个,而我的本机电脑的访问量为 168,是正常的,没过多久,我本机的访问量也变成了 5 了,因该是服务器同步下来的,具体原因尚未清楚
    CongSec
    @CongSec 这种场景其实是有问题的,首先你得保证 docker 和电脑都 30 秒同步一次,即使这样中间也会有 10 分钟左右的误差,可能造成 10 分钟内的数据被覆盖,建议用我的同步感知 js 代码,可以把这个时间缩短至 30 秒。但这都不是最佳方案,建议最佳方式在 docker 的思源空间 data 目录外添加个标志文件,比如 docker.lock,然后我在 js 里判断是否存在这个文件,只在存在这个文件时才写统计数据,只要不存在都仅只读。当然这个 docker.lock 也可以放到 data 内,然后用忽略文件忽略,不过这样较麻烦,不推荐。
    wilsons
  • 查看全部回帖
CongSec
新手可以看我发的求助帖以及汇总帖子,很有帮助的!_! 网安笔记分享:http://congsec.xyz 北京

推荐标签 标签

  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖 • 4 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 371 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 5 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 188 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 571 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 36 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 1 关注
  • Word
    13 引用 • 41 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 8 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 312 关注
  • Outlook
    1 引用 • 5 回帖 • 4 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 4 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 818 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 28 关注
  • gRpc
    11 引用 • 9 回帖 • 99 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 762 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    229 引用 • 1432 回帖 • 1 关注
  • AWS
    11 引用 • 28 回帖 • 7 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 2 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 465 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • Visio
    1 引用 • 2 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 753 回帖 • 1 关注