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>
