Blogger主页眼图标无法按单篇浏览量单独变色问题求助

问题根源 #

1. 初始代码要么仅选中第一篇文章的图标，要么用全局选择器批量设置样式，未针对每篇文章的浏览量单独判断。
2. 「加载更多」动态添加的文章未触发颜色逻辑，甚至会覆盖已存在图标的样式。

解决方案 #

1. 编写单篇文章独立颜色设置函数

核心逻辑是遍历所有文章的眼图标，针对每篇的浏览量单独设置颜色：

function setEyeIconColors() {
  // 选中所有文章内的眼图标（替换为你模板里的实际选择器）
  const eyeIcons = document.querySelectorAll('.post .eye-icon');
  
  eyeIcons.forEach(icon => {
    // 找到当前图标所属文章的浏览量元素（替换为实际选择器）
    const viewElement = icon.closest('.post').querySelector('.view-number');
    if (!viewElement) return;
    
    // 提取纯数字浏览量（若浏览量带文字，如"123次浏览"，用正则提取数字）
    const viewCount = parseInt(viewElement.textContent.replace(/[^0-9]/g, ''), 10);
    
    // 按浏览量区间设置颜色，可自行调整数值和色值
    if (viewCount < 100) {
      icon.style.color = '#aaa';
    } else if (viewCount < 500) {
      icon.style.color = '#4CAF50';
    } else if (viewCount < 1000) {
      icon.style.color = '#FF9800';
    } else {
      icon.style.color = '#F44336';
    }
  });
}

2. 初始化执行，处理首次加载的文章

// 页面DOM加载完成后执行一次
document.addEventListener('DOMContentLoaded', setEyeIconColors);

3. 处理「加载更多」的动态文章

用MutationObserver监听文章列表的DOM变化，新文章加载后自动触发颜色设置：

// 找到文章列表容器（替换为你模板里的实际容器选择器）
const postList = document.querySelector('.blog-posts');
if (postList) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 检测到新节点添加时，重新执行颜色设置
      if (mutation.addedNodes.length > 0) {
        setEyeIconColors();
      }
    });
  });
  
  // 监听容器的子节点变化
  observer.observe(postList, { childList: true, subtree: true });
}

关键注意点 #

• 替换代码中的选择器（.post、.eye-icon、.view-number、.blog-posts）为你Blogger模板对应的类名/ID。
• 若浏览量显示包含非数字字符（如「浏览量：123」），必须用正则提取纯数字才能正确判断区间。

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