给网站、博客文章添加阅读次数统计,我用两行代码 搞定计数

2023-11-08

本文转载于不蒜子

一、安装脚本(必选)


要使用统计次数必须在页面中引入busuanzi.js,目前最新版如下:

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

任何类型的个人站点使用,如果你是用的hexo,打开themes/你的主题/layout/_partial/footer.ejs添加上述脚本即可,当然你也可以添加到 header 中。

二、安装标签(可选)


只需要复制相应的html标签到你的网站要显示访问量的位置即可。您可以随意更改不蒜子标签为自己喜欢的显示效果,内容参考第三部分扩展开发。根据你要显示内容的不同,这分几种情况。

1、显示站点总访问量

要显示站点总访问量,复制以下代码添加到你需要显示的位置。有两种算法可选:

算法a:pv的方式,单个用户连续点击n篇文章,记录n次访问量。

本站总访问量<span id="busuanzi_value_site_pv"></span>次

算法b:uv的方式,单个用户连续点击n篇文章,只记录1次访客数。

本站访客数<span id="busuanzi_value_site_uv"></span>人次

如果你是用的hexo,打开themes/你的主题/layout/_partial/footer.ejs添加即可。

实例效果参考:

https://blog.ccswust.org/busuanzi/

2、显示单页面访问量

要显示每篇文章的访问量,复制以下代码添加到你需要显示的位置。

算法:pv的方式,单个用户点击1篇文章,本篇文章记录1次阅读量。

本站总访问量<span id="busuanzi_value_site_pv"></span>次

代码中文字是可以修改的,只要保留id正确即可。

注意:不蒜子为保持极简,暂不支持在站点文章摘要列表中(如首页)逐个显示每篇文章的阅读次数,如果您非常需要这一功能,可以留言。根据需要程度再考虑开发相应的功能。

实例效果参考:

https://blog.ccswust.org/busuanzi/pv.html

注意:不蒜子为保持极简,暂不支持在站点文章摘要列表中(如首页)逐个显示每篇文章的阅读次数,如果您非常需要这一功能,可以留言。根据需要程度再考虑开发相应的功能。

3、显示站点总访问量和单页面访问量

本站访客数<span id="busuanzi_value_site_uv"></span>人次

实例效果参考:

https://blog.ccswust.org/busuanzi/ip.html

4、只计数不显示

只安装脚本代码,不安装标签代码。

至此,统计计数已经可以正常运行,如果你还要自定义一些内容或有疑问,请继续阅读。

附录:扩展开发(自定义)

  • busuanzi_value_site_pv 的作用是异步回填访问数,这个id一定要正确。
  • busuanzi_container_site_pv的作用是为防止计数服务访问出错或超时(3秒)的情况下,使整个标签自动隐藏显示,带来更好的体验。这个id可以省略。

因此,你也可以使用极简模式:

本站总访问量<span id="busuanzi_value_site_pv"></span>次本站访客数<span id="busuanzi_value_site_uv"></span>人次本文总阅读量<span id="busuanzi_value_page_pv"></span>次

或者个性化一下:

Total <span id="busuanzi_value_site_pv"></span> views.您是xxx的第<span id="busuanzi_value_site_uv"></span>个小伙伴<span id="busuanzi_value_page_pv"></span> Hits

1、我只要统计不显示? 只引入busuanzi.js,不引入显示标签即可。

2、你的标签太丑了,我想美化一下可以么? 可以的,您可以用自己站点的css进行控制,只要内层span的id正确以便回填访问次数即可,甚至标签都可以不是span。

3、中文字体太丑了,我的主题不适合? 您可以将本站总访问量xxx次改成view xxx times等英文以获得更和谐的显示效果。

4、在访问量数据未取回来之前,我不想让页面显示为诸如“本站总访问量 次”,显得太low,怎么办? 只需要如下css,执行完毕会自动将标签显示出来,其他以此类推:

<span id="busuanzi_container_site_pv" style='display:none'> 本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

上面的做法还是很low?!看下这个https://blog.ccswust.org/busuanzi/diy.html 右键看下源码,没加载出来前就显示个菊花转转转: 首先,你要引入font-awesome字体:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">或<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">

其次,修改标签:

<span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span> Hits或(旋转效果)<span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span> Hits

和谐多了!

5、我的网站已经运行一段时间了,想初始化访问次数怎么办?请先注册登录,自行修改阅读次数。

原文网站:不蒜子 | 给网站、博客文章添加阅读次数统计,我用两行代码 搞定计数 - 腾讯云开发者社区-腾讯云 (tencent.com)

第二给网站加上访客统计—你是第位访客

<SCRIPT language=JavaScript>

<!--

var caution = false

function setCookie(name, value, expires, path, domain, secure) {

var curCookie = name + "=" + escape(value) +

((expires) ? "; expires=" + expires.toGMTString() : "") +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

((secure) ? "; secure" : "")

if (!caution || (name + "=" + escape(value)).length <= 4000)

document.cookie = curCookie

else

if (confirm("Cookie exceeds 4KB and will be cut!"))

document.cookie = curCookie

}

function getCookie(name) {

var prefix = name + "="

var cookieStartIndex = document.cookie.indexOf(prefix)

if (cookieStartIndex == -1)

return null

var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)

if (cookieEndIndex == -1)

cookieEndIndex = document.cookie.length

return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))

}

function deleteCookie(name, path, domain) {

if (getCookie(name)) {

document.cookie = name + "=" +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

"; expires=Thu, 01-Jan-70 00:00:01 GMT"

}

}

function fixDate(date) {

var base = new Date(0)

var skew = base.getTime()

if (skew > 0)

date.setTime(date.getTime() - skew)

}

var now = new Date()

fixDate(now)

now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)

var visits = getCookie("counter")

if (!visits)

visits = 1

else

visits = parseInt(visits) + 1

setCookie("counter", visits, now)

document.write("欢迎光临本站,您是第" + visits + "位访问者!")

// -->

</SCRIPT>

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

给网站、博客文章添加阅读次数统计,我用两行代码 搞定计数 的相关文章

  • 如何使用 jest 测试 unhandledRejection / uncaughtException 处理程序

    我有处理程序unhandledRejections and uncaughtExceptions bin js unhandledRejection uncaughtException forEach event gt process on
  • Google Maps API v3:在 Firefox 中未触发自定义标记的点击事件

    创建了一个地图 我试图使其具有类似于 我的地图 的功能 我的右侧有两个下拉列表 根据这些 ddl 中的选择 您可以添加自定义标记 图标 您选择标记类型 然后单击地图右上角的 按钮 然后单击要添加标记的位置 我的问题是 这在 IE Safar
  • javascript Array.prototype.push 如何连接

    我已经看到数组的 push 方法用于替换串联 但我不完全确定它是如何工作的 var a 1 2 3 var b 4 5 6 Array prototype push apply a b 它如何就地连接而不是返回一个新数组 apply htt
  • 无限水平滚动 Div

    我需要一个 div 当您将鼠标进一步向右或向左移动时 它会水平滚动 我发现 Smooth Div Scroll 插件 http www smoothdivscroll com 非常接近我的需要 然而 这存在一些问题 我需要能够使滚动元素从设
  • 如何连接我的 angular2 应用程序 javascript 文件

    对于我的 Angular2 TypeScript 应用程序 我将所有 js 文件合并到一个 app min js 文件中 然后 System import 将此文件导入到我的 index html 页面 然后我得到一个同一模块文件中的多个匿
  • 解密签名并验证 JWT

    我知道还有其他库可以让我更轻松地使用 JWT 在 Node js 中 在本例中 我使用 crypto js 以手动方式学习 JWT 以下给了我令牌 var header alg HS256 typ JWT var wordArrayHead
  • 跳过测试文件 Jest 中的一项测试

    我正在使用 Jest 框架并有一个测试套件 我想关闭 跳过其中一项测试 谷歌搜索文档没有给我答案 您知道答案或需要检查的信息来源吗 我在这里找到了答案 https devhints io jest https devhints io jes
  • 如何编写具有依赖状态的 redux 减速器

    我正在开发一个 React Redux 应用程序 它允许将 小部件 添加到页面并在 2D 空间中进行操作 要求可以同时选择和操作多个小部件 我当前状态树的简化版本如下所示 widgets widget 1 x 100 y 200 widge
  • 使用 javascript/jquery 检查 .css 样式表的名称

    我正在尝试为论坛制作一个小 chrome 扩展 但我只希望它在论坛的某个区域中工作 问题是我不能只做 matches subforum 因为该论坛中的线程无法通过 URL 区分它们所在的子论坛 subforum 有自己的 css 样式表 所
  • 缩放对象上的弹跳动画

    拥有对象比例 然后在返回到原始比例因子之前以该比例因子执行弹跳动画的最佳方法是什么 我意识到我可以做一些事情 比如将其缩放到 2 2 然后 1 8 然后 2 0 但我正在寻找一种方法 您只需在比例因子上执行弹跳动画 因为我的比例因子会改变
  • this 关键字是构造函数中的窗口对象

    好吧 所以我以为我理解了这一点 没有双关语的意思 但显然不是 var Constructor function var internalFunction function return this window this myMethod f
  • JavaScript:String 和 Array 上的 indexOf 方法的效率差异

    我很好奇效率是否存在差异indexOf两者都可用的方法Array and String在 JavaScript 中 我以为indexOf在 String 上的效率低于在 Array 上的效率 而我的new测试结果支持了这一点 例如 var
  • 使用 webpack 保留输出目录中的文件夹结构

    我有以下文件夹结构 index html app index tsx 与 webpack 捆绑后 我希望有以下输出目录 并将bundle js注入到index html中 dist index html dist app bundle js
  • 我想在使用 Jest Snapshots 时获得图像文件名/路径

    我已经开始使用Jest https facebook github io jest 在一个新项目中有很多 我现在正在使用Snapshot https facebook github io jest docs tutorial react h
  • 使用 Firefox 插件发出跨域 ajax 请求

    我对如何在 Firefox 插件中发出跨域 ajax 请求感到有点困惑 LastPass 和 Xmarks 等插件建议你可以做到这一点 但是当我尝试用 google 搜索你是如何做到这一点时 每个人似乎都说你不能 除非用户在 Firefox
  • 如何取消 ComponentWillUnmount 中的所有请求?

    根据docs https facebook github io react docs react component html componentwillunmount ComponentWillUnmount 能够取消请求 我有一个页面发
  • Google 脚本过滤一个值的范围

    我想过滤第 1 列中仅包含 Bob 特定值的行的 google 工作表范围 到目前为止 我的代码允许我过滤out第 1 列中有 Bob 的行 我需要相反 我想返回第 1 列中只有 Bob 的行 因此 其中 filterSettings 不是
  • Angular JS:当我们已经有了具有作用域的指令控制器时,指令的链接函数需要什么?

    我需要对范围和模板执行一些操作 看来我可以在以下任何一个中做到这一点link函数或controller函数 因为两者都可以访问该范围 什么时候我必须使用link功能而不是控制器 angular module myApp directive
  • 但为什么浏览器 DOM 经过 10 年的努力仍然这么慢?

    Web 浏览器 DOM 自 90 年代末以来就已存在 但它仍然是性能 速度方面最大的限制之一 我们拥有来自 Google Mozilla Microsoft Opera W3C 和其他各种组织的一些世界上最聪明的人才 为我们所有人致力于 W
  • 如何在没有消息时隐藏 Bootstrap 警报框

    我用 Bootstrap 做了一个简单的警报框 如下所示 div class alertBox span class alert alert info bag session username span div When there is

随机推荐

  • Android中文API最新中文版

    http www eoeandroid com thread 58597 1 1 html 转载于 https www cnblogs com lost in code archive 2013 03 13 2956940 html
  • import “cv2“ could not be resolved pylance(reportMissingImports)

    openCV系列文章目录 文章目录 openCV系列文章目录 前言 一 错误原因 二 解决方法 1 在vscode Python Select Interpreter 2 依然报错 cv2 error OpenCV 4 7 0 D a op
  • Vagrant Note

    Vagrant Note 1 vagrant 命令 vagrant init hashicorp precise64 需要先删除Vagrantfile文件 vagrant up 启动虚拟机 根据Vagrantfile文件启动 vagrant
  • 【Linux命令详解

    文章标题 简介 一 参数列表 二 使用介绍 1 基本用法 2 显示所有进程 3 显示进程详细信息 4 根据CPU使用率排序 5 查找特定进程 6 显示特定用户的进程 7 显示进程内存占用 8 查看进程树 9 实时监控进程 10 查看特定进程
  • 一行代码实现安慰剂检验

    1 什么是安慰剂检验 随着 因果推断方法 在实证研究中的使用比例不断提升 越来越多的文章也会进行安慰剂检验 其检验基本原理与医学中的安慰剂类似 即使用 假的政策发生时间或实验组 进行分析 以检验能否得到政策效应 如果依然得到了政策效应 则表
  • echarts tooltip显示其他字段

    这是上面的数据 let data nodes 公司名称 name 浏览器有限公司 category 0 0代表公司 1代表自然人股东 value 100 capi 持股数1200 股东列表 name 操作系统集团 category 0 va
  • -----关于Onvif链接成功但运行报错/usr/bin/ld: warning:xxx,needed by xxx,may conflict with libssl.so.1.0.0

    1 错误分析 看图 原因是openssl系统中的版本与mysql或者libevent这些库里面的openssl的版本不一致 导致链接出了问题 解决方法 重新下载与项目中mysql和libevent中openssl一样的版本 即 由于我项目中
  • Python毕业设计 机器学习新闻算法研究与实现

    文章目录 0 前言 简介 本文章博主将介绍 参与及比较算法 先说结论 实现过程 数据爬取 数据预处理 CNN文本分类 其他分类方法更新中 最后 0 前言 这两年开始毕业设计和毕业答辩的要求和难度不断提升 传统的毕设题目缺少创新和亮点 往往达
  • C/C++实现协程及原理(详细完整版)-架构师篇

    一 协程 Coroutine 简介 协程 又称微线程 纤程 英文名Coroutine 协程的概念很早就提出来了 但直到最近几年才在某些语言 如Lua 中得到广泛应用 子程序 或者称为函数 在所有语言中都是层级调用 比如A调用B B在执行过程
  • drools 7.x 加载指定的决策表

    git https github com lccbiluox2 drools test git 1 决策表 位置 Users lcc IdeaProjects drools test src main resources com drool
  • Python异步请求:处理并发任务的结果

    Python异步请求 处理并发任务的结果 处理并发任务的结果 在异步编程中 处理并发任务的结果可能会有所不同 以下是几种常见的处理方式 使用asyncio as completed asyncio as completed 函数返回一个迭代
  • 场景题之最快返回结果

    场景题之最快返回结果 问题描述 输入中文 最快从百度翻译 谷歌翻译 有道翻译获取结果返回 代码实现 思路 采用CompletableFuture实现 多个CompletableFuture可以串行执行 也可以并行执行 其中anyOf 方法只
  • 插入排序(Insertion-Sort)-- 初级排序算法

    1 插入排序 Insertion Sort 插入排序 Insertion Sort 的算法描述是一种简单直观的排序算法 它的工作原理是通过构建有序序列 对于未排序数据 在已排序序列中从后向前扫描 找到相应位置并插入 算法描述 一般来说 插入
  • doGet和doPost、Cookie和Session的原理及区别、Spring框架

    一 doGet和doPost 1 doGet GET调用用于获取服务器信息 并将其做为响应返回给客户端 当经由Web浏览器或通过HTML JSP直接访问Servlet的URL时 一般用GET调用 public class doGet ser
  • 为分类数据添加计数表(R语言实现)

    为分类数据添加计数表 R语言实现 在数据分析和统计学中 我们经常需要对分类变量进行计数 并以表格的形式展示分类的频数 R语言是一种功能强大的数据分析工具 提供了各种函数和包来处理和可视化数据 在本文中 我将向您展示如何使用R语言为划分后的分
  • Android Studio相关知识

    一 如何更新android studio 打开Help gt Check For Updates 或 打开Settings gt 搜索Updates 找到按钮Check Now 二 如何更新android studio的adb 方案一 直接
  • 【SMD & NSMD】

    正确的PCB焊盘设计对于有效地将元件焊接到电路板至关重要 对于裸焊盘组装 有两种常见的焊接方法 阻焊层定义 SMD 与非阻焊层定义 NSMD 每种方法都有自己的特点和优势 SMD Solder Mask Defined Pad 是由阻焊层来
  • Web3与智能合约交互实战

    写在前面 在最初学习以太坊的时候 很多人都是自己创建以太坊节点后 使用geth与之交互 这种使用命令行交互的方法虽然让很多程序员感到兴奋 黑客帝国的既视感 但不可能指望普通用户通过命令行使用Dapp 因此 我们需要一种友好的方式 比如一个w
  • 计算机物联网软件工程,关于计算机物联网的应用分析

    龙源期刊网 http doc 100lw com 关于计算机物联网的应用分析 作者 曹俊娜 来源 电子技术与软件工程 2016年第03期 摘要随着智能设备的不断推出和移动互联网的发展 计算机物联网技术越来越被人们所熟知 物联网技术区别于传统
  • 给网站、博客文章添加阅读次数统计,我用两行代码 搞定计数

    本文转载于不蒜子 一 安装脚本 必选 要使用统计次数必须在页面中引入busuanzi js 目前最新版如下 任何类型的个人站点使用 如果你是用的hexo 打开themes 你的主题 layout partial footer ejs添加上述