hexo博客页面添加访问量统计

本文介绍如何利用不蒜子网页访问量统计工具轻松实现在Hexo博客上显示文章及站点的访问量,包括配置方法及代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

访问量统计的比较简单的方式是通过不蒜子网页访问量统计工具,几行代码即可搞定计数问题

打开接口

themes/yilia/_config.yml的配置文件中添加以下属性

busuanzi:
 enable: true

配置脚注文件
themes/yilia/layout/_partial/footer.ejs文件中的</footer>标签前添加以下代码

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
       <span id="busuanzi_container_site_pv">
               本站总访问量<span id="busuanzi_value_site_pv"></span>次
       </span>
       <span class="post-meta-divider">|</span>
       <span id="busuanzi_container_site_uv" style='display:none'>
               本站访客数<span id="busuanzi_value_site_uv"></span>人
       </span>
       <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 <% } %>
  • 注意
    不用担心vscode环境代码的< >符号会标红

文章访问量设置
打开/yilia/layout/_partial/post/date.ejs文件 在文件头部添加以下代码

<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>

	<span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
		  <i class="icon-smile icon"></i> 阅读数:<span id="busuanzi_value_page_pv"></span>次
	</span>
<% } %>
  • 注意
    不用担心vscode环境代码的< >符号会标红

保存设置重新部署

Hexo是一个基于Node.js的静态博客框架,广泛应用于个人博客和文档网站的构建。为了提升用户体验和博客的互动性,许多用户希望能够统计文章的阅读量。Hexo有许多插件可以帮助实现这一功能,其中比较流行的包括: 1. **hexo-wordcount**: - 这是一个内置的插件,可以统计文章的单词数和字符数。虽然它不是专门用于统计阅读量的,但可以通过一些自定义配置来实现简单的阅读量统计。 2. **hexo-reading-time**: - 这个插件主要用于估算文章的阅读时间,但也可以结合其他插件使用来统计阅读量。 3. **busuanzi**: - 这是一个第三方的统计服务,可以通过在页面添加脚本代码来统计访问量。结合Hexo的模板引擎,可以在文章页面显示阅读量。 4. **LeanCloud**: - LeanCloud是一个云服务平台,提供数据存储和统计功能。通过在Hexo博客中集成LeanCloud,可以实现更复杂的阅读量统计功能。 5. **不蒜子**: - 这是一个轻量级的第三方统计服务,适合不需要复杂功能的用户。通过在页面中引入不蒜子的脚本,可以在文章页面显示阅读量。 ### 如何使用hexo-reading-time插件 1. **安装插件**: ```bash npm install hexo-reading-time --save ``` 2. **配置插件**: 在Hexo的配置文件`_config.yml`中添加以下配置: ```yaml reading_time: minute: 分钟 minute_plural: 分钟 word: 字 word_plural: 字 ``` 3. **在模板中使用**: 在你的模板文件(如`themes/your-theme/layout/_partial/article.ejs`)中添加以下代码: ```ejs <span class="reading-time"> <%= reading_time(post.content) %> </span> ``` ### 使用busuanzi统计阅读量 1. **引入busuanzi脚本**: 在你的模板文件(如`themes/your-theme/layout/_partial/head.ejs`)中添加以下代码: ```html <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> ``` 2. **在文章页面显示阅读量**: 在文章模板文件(如`themes/your-theme/layout/_partial/article.ejs`)中添加以下代码: ```ejs <span id="busuanzi_container_page_pv"> 本文总阅读量<span id="busuanzi_value_page_pv"></span>次 </span> ``` ### 使用LeanCloud统计阅读量 1. **注册LeanCloud账号**并创建应用。 2. **安装hexo-leancloud-counter-security**插件: ```bash npm install hexo-leancloud-counter-security --save ``` 3. **配置插件**: 在`_config.yml`中添加以下配置: ```yaml leancloud_counter_security: enable_sync: true app_id: your_app_id app_key: your_app_key server_url: your_server_url ``` 4. **在模板中使用**: 在文章模板文件(如`themes/your-theme/layout/_partial/article.ejs`)中添加以下代码: ```ejs <span id="busuanzi_container_page_pv"> 本文总阅读量<span id="busuanzi_value_page_pv"></span>次 </span> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值