我在Jekyll的Shopify Liquid for Loop时遇到了麻烦

Question

以下代码与渲染，我还没有推动我的更改， 。因此，请记住这一点。

它应该

• 通过YAML数据文件进行迭代。
• 在所需的任何地方放置一个链接。

但是，目前，它仅在我想要的链接到处都是for循环看到的最后一个元素。

我有一个带有两个链接的YAML文件，而不是将链接放在与其PID关联的块中，而是将第二个链接放在所有链接位置中。

我正在使用Regex进行解析，因此在YAML文件中的任何位置，即aaaa在该位置更换​​链接。这是有效的，只是没有放置正确的链接。

现在，更令人困惑的一部分是第一个console.log console.log（faqlink {{faq_link_pid}}）;> prints prock prince off infile off conse.log > prince prince priongs and Orde ofer ofer offer。

<h1 class="fs-6 fw-500" align="center">Frequently Asked Questions <br> Welcome to our FAQ!</h1>
<div class="accordiobody">
    {% for faq in site.data.faq_yaml.frequently_asked_questions %}
    <div class="accordion">
        <hr>
        <div class="container">
            <div class="question fw-400">
                <h1 class="fs-5 fw-500">
                    {{ faq.question }}
                </h1>
            </div>
            <div class="answer">
                <blockquote>
                    <span class="answerspan">
                        {{ faq.answer }}
                    </span>
                </blockquote>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<script type="text/javascript">
    {% assign faq_link = "" %}
    {% assign faq_link_description = "" %}
    {% assign faq_link_pid = 0 %}
    {% for faq in site.data.faq_yaml.frequently_asked_questions %}
    {% if faq.hyper_link != null and faq.hyper_link != "" %}
    {% assign faq_link = faq.hyper_link %}
    {% assign faq_link_pid = faq.faq_link_pid %}
    

    const faqLink{{ faq_link_pid }} = "{{ faq_link }}";
    {% if faq.link_description != null and faq.link_description != "" %}
    {% assign faq_link_description = faq.link_description %}
    const faqLinkDescription{{ faq_link_pid }} = "{{ faq_link_description }}";
    console.log(faqLink{{ faq_link_pid }});
    function createElement() {
            for (let x in accordion) {
                const link{{ faq_link_pid }} = `<a href="${faqLink{{ faq_link_pid }}} " target="_blank">${faqLinkDescription{{ faq_link_pid }}}</a>`;
                console.log(link{{ faq_link_pid }});
                replaceLink(link{{ faq_link_pid }});
        }
    }
    {% endif %}
    window.addEventListener('load', function () {
        createElement();
    });
    {% endif %}
    {% endfor %}

    const accordion = document.getElementsByClassName('container');

    for (i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener('click', function () {
            this.classList.toggle('active');
        })
    }

    function replaceLink(str) {
        const link = document.querySelectorAll('.answerspan');
        const all_link = link.forEach(function (link) {
            const hyper_link = link.innerHTML;
            link.innerHTML = hyper_link.replace(/aaaa./g, str);
        });
    }
</script>

YAML文件：

---
# Use this YAML file to create a list of FAQ questions and answers.

- question: "How will this work?"
  answer: "Currently, a camera is mounted inside the headset for each eye. The camera streams through wifi to a PC client which processes and sends eye-tracking data to VR Chat."
  hyper_link: ""
  link_description: ""
  faq_link_pid: 3

- question: "What features will be supported?"
  answer: "The goal is eye tracking with eye openness and some form of pupil dilation. A far away aspiration of this project is some form of weak foveated rendering because it's cool and any small performance increase in VR is welcome."
  hyper_link: ""
  link_description: ""
  faq_link_pid: 4

- question: "When will this be completed?"
  answer: "When it's done 
              

Answer 1

您为什么要使用Regex + JavaScript放置链接？最好只将所有您想要的所有隐藏在html中的所有内容都放在＆lt; div class = hidden = hidden”＆gt;中，然后切换css属性display> display> display> none for div使用DIV使用JavaScript

也可以使用JS的浏览器更加专门：在HTML中写下所有内容，并将显示器留在您想要的Divs上（即不要在CSS文件上设置任何显示）。在页面上加载一个显示：所有这些div元素中都使用JS来切换单个元素的

显示

jQuery(document).ready(function($) {
  //Set default open/close settings
  var divs = $('.hidden').hide(); //Hide/close all containers

。下一个元素（您必须查看您的DOM树，以确切获取哪个元素）

Answer 2

我通过探索所有JavaScript和Regex并简单地使用Liquid 替换函数来解决我的问题。不需要JS。我只是对此过于复杂，因为我还没有足够好阅读液体文档结构:)

<span class="answerspan{{ faq.faq_link_pid }}">
  {%- capture editable_part -%}
   <a href="{{ faq.hyper_link }}" target="_blank">{{ faq.link_description }}</a>
  {%- endcapture -%}
  {% if faq.answer contains 'aaaa ' %}
  {{ faq.answer | replace: 'aaaa ', editable_part }}
  {% else %}
  {{ faq.answer }}
  {% endif %}
</span>