js生成不同的阅读数分配到每一篇上面,不会因为刷新而变动

js生成不同的阅读数分配到每一篇上面,不会因为刷新而变动

{%- for article in blog.articles -%}
        <div class="blog-articles__article article">
          {%- render 'article-card',
            article: article,
            media_height: section.settings.image_height,
            media_aspect_ratio: article.image.aspect_ratio,
            show_image: section.settings.show_image,
            show_date: section.settings.show_date,
            show_author: section.settings.show_author,
            show_excerpt: true 
          -%}
        </div>
      {%- endfor -%} 

window.onload = function() {  
  // 获取文章元素  
  const articleElements = document.querySelectorAll('.blog-articles__article');  
  const articleCount = articleElements.length;  
  
  // 从localStorage中获取已存储的分配数字，如果不存在则生成它们  
  const storedNumbers = localStorage.getItem('articleNumbers');  
  let numbers;  
  if (storedNumbers) {  
    numbers = JSON.parse(storedNumbers);  
  } else {  
    // 生成1到10的数组，并重复以匹配文章数量  
    numbers = Array.from({ length: 10 }, (_, i) => i + 1).concat(Array.from({ length: articleCount - 10 }, (_, i) => (i % 10) + 1));  
    // 存储到localStorage中  
    localStorage.setItem('articleNumbers', JSON.stringify(numbers));  
  }  
  
  // 分配数字到文章元素  
  articleElements.forEach((element, index) => {  
    // 假设你有一个元素来显示数字，比如一个span元素，它的类名是'article-number'  
    const numberElement = element.querySelector('.article-number');  
    if (numberElement) {  
      // 获取并显示分配的数字  
      numberElement.textContent = numbers[index];  
    }  
  });  
};

<div class="blog-articles__article article">  
  <span class="article-number"></span> 
  <!-- 这个span将用于显示分配的数字 -->  
  <!-- 其他文章内容 -->  
</div>