如何基于Blogger文章ID实现每篇文章浏览量千分位分隔

1. 核心问题拆解 #

你当前代码用固定ID（bacani）只能生效一次，因为HTML中ID是全局唯一的，多文章场景下会出现重复ID导致脚本无法识别所有目标元素。解决思路是给每篇文章的浏览量元素生成唯一标识，或者改用类选择器批量处理。

2. 方案一：动态生成唯一ID（最可靠） #

修改HTML结构 #

把固定ID替换为基于Blogger文章ID的动态标识：

<span class='postviews1' style='margin-left:5px; display:block;'>
  <a expr:name='data:post.id'/> 
  <i class='far fa-eye'/> 
  <!-- 用文章ID拼接生成唯一ID -->
  <span class='bacani' expr:id='&quot;bacani-&quot; + data:post.id'>
    <span class='postviews' expr:id='&quot;postviews-&quot; + data:post.id'></span> Views
  </span>
</span>

这里通过expr:id='"bacani-" + data:post.id'生成类似bacani-123456的唯一ID，确保每篇文章的元素不冲突。

整合千分位处理到统计脚本 #

把千分位格式化逻辑直接放到Firebase的遍历循环里，每处理一篇文章就同步格式化：

<!-- 合并统计与千分位处理脚本 -->
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script>
// 千分位格式化函数
function formatNum(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

$.each($("a[name]"), function(i, e) {
  var postId = $(e).attr("name");
  var viewsElem = $(e).parent().find(".postviews");
  var containerElem = $(e).parent().find(".bacani");
  var blogStats = new Firebase("https://sh-v-3da10-default-rtdb.firebaseio.com/" + postId);
  
  blogStats.once("value", function(snapshot) {
    var data = snapshot.val();
    var isNew = false;
    
    if(data == null) {
      data = {};
      data.value = 0;
      data.url = window.location.href;
      data.id = postId;
      isNew = true;
    }
    
    // 格式化浏览量并更新DOM
    var formattedViews = formatNum(data.value);
    containerElem.html(formattedViews + " Views");
    
    // 更新统计数值
    data.value++;
    if(window.location.pathname !== "/") {
      isNew ? blogStats.set(data) : blogStats.child("value").set(data.value);
    }
  });
});
</script>

• 移除原来单独的千分位脚本，避免重复执行
• 用正则实现千分位分隔，比反转字符串的方法更简洁可靠

3. 方案二：纯类选择器批量处理（更简洁） #

如果不想生成动态ID，直接把ID替换为类，批量处理所有文章：

修改HTML结构 #

<span class='postviews1' style='margin-left:5px; display:block;'>
  <a expr:name='data:post.id'/> 
  <i class='far fa-eye'/> 
  <!-- 把id改为class -->
  <span class='bacani'><span class='postviews'></span> Views</span>
</span>

批量处理脚本 #

保留原Firebase统计逻辑，最后添加批量格式化：

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script>
// 原统计逻辑不变
$.each($("a[name]"), function(i, e) {
  var elem = $(e).parent().find(".postviews");
  var blogStats = new Firebase("https://sh-v-3da10-default-rtdb.firebaseio.com/" + $(e).attr("name"));
  
  blogStats.once("value", function(snapshot) {
    var data = snapshot.val();
    var isnew = false;
    
    if(data == null) {
      data= {};
      data.value = 0;
      data.url = window.location.href;
      data.id = $(e).attr("name");
      isnew = true;
    }
    
    elem.text(data.value);
    data.value++;
    
    if(window.location.pathname!="/") {
      if(isnew) blogStats.set(data);
      else blogStats.child("value").set(data.value);
    }
  });
});

// 批量格式化千分位
function formatAllViews() {
  function formatNum(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }
  
  $(".bacani").each(function() {
    var rawText = $(this).text();
    var numMatch = rawText.match(/\d+/);
    if(numMatch) {
      $(this).html(rawText.replace(numMatch[0], formatNum(numMatch[0])));
    }
  });
}

// 确保统计脚本执行完成后再格式化
setTimeout(formatAllViews, 500);
</script>

关键注意点 #

• 永远避免重复ID：HTML规范中ID是全局唯一的，多元素复用同一个ID会导致脚本失效
• 脚本执行时机：千分位处理必须在浏览量数值被写入DOM之后执行，整合到Firebase回调里是最可靠的方式，定时器是退而求其次的方案

内容的提问来源于stack exchange，提问作者Bang Bel