shopify 使用liquid随机获取三篇文章

1.首先在dom中创建一个
 <div class="relatedPost_listBox"></div>

2.js代码
<script>
// 包含 Liquid 代码的字符串，用于生成文章列表 selected_articles用来判断是否以存在该标题
    const liquidCode = ` 
      {% assign selected_articles = ''  %}
      {% for article in section.settings.blog.articles %}
      {% unless selected_articles contains article.title %}
      <div class="relatedPost-list">
          <a href="{{ article.url }}">
              <div class="article_Myimg">
                  <img class="article-item__image" loading="lazy" src="{{article.image | img_url: '750x'}}" alt="{{article.image.alt}}">
              </div>
              <div class="relatedPost-listContent"> 
                  {{article.title}}
              </div>
          </a>
      </div>  
      {% endunless %} 
      {% endfor %}
    `;

    // 解析 Liquid 代码以提取每篇文章
    const parser = new DOMParser();
    // 使用 parseFromString 方法将一个包含HTML字符串的 liquidCode 变量解析为DOM文档。
    const doc = parser.parseFromString(liquidCode, 'text/html');
    const articles = Array.from(doc.querySelectorAll('.relatedPost-list'));
    // console.log(parser,doc,articles); 
    console.log(articles);

    // 随机打乱文章元素的顺序
    function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        // 用于交换数组中两个元素位置的一种常见写法，通常用于数组元素的重新排序或调整顺序。
        [array[i], array[j]] = [array[j], array[i]];
      }
    }
    shuffleArray(articles);

    // 假设你想将内容放入 <div class="relatedPost_listBox"></div>
    const relatedPostListDiv = document.querySelector('.relatedPost_listBox');
    const firstThreeArticles = articles.slice(0, 3);
    firstThreeArticles.forEach(article => {
      relatedPostListDiv.appendChild(article);
    });
</script>