我在Jekyll有一种循环用的shopify液体有问题

Question

下面的代码与渲染略有不同，我还没有推进更改。所以记住这一点。

它应该是

• 迭代YAML数据文件。
• 将一个链接放在任何需要它的地方。

但是，目前，它只将for循环看到的最后一个元素放在我想要的链接的任何地方。

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

我正在使用REGEX进行解析，因此YAML文件中的任何地方(即aaaa )都会在该位置替换链接。这很管用，只是没有找到正确的链接。

现在更令人困惑的是，第一个console.log console.log(faqLink{{ faq_link_pid }});将所有链接按顺序正确地打印在文件中。

<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  I have a semi-busy life so development may slow and speed up inconsistently. I have a goal to be done with all base features in June."
  hyper_link: ""
  link_description: ""
  faq_link_pid: 5

- question: "Will IR damage my eyes?"
  answer: "This project has safety in mind. If you do all of the safety measures we put in place and visually test the amount of IR light you will be fine. Please note we have not finished development of all safety stuff so be careful aaaaa  ."
  hyper_link: "https://dammedia.osram.info/media/bin/osram-dam-2496608/AN002_Details%20on%20photobiological%20safety%20of%20LED%20light%20sources.pdf"
  link_description: "here is a pdf with safety information"
  faq_link_pid: 6

- question: "How expensive will this be?"
  answer: "My goal is to keep it as cheap as possible with around $75 as the absolute max, with current projections being around $25-40"
  hyper_link: ""
  link_description: ""
  faq_link_pid: 7

- question: "How do I set up my avatar?"
  answer: "Check out the VR Chat face tracking wiki on our GitHub. Keep in mind that we currently only support float parameters. aaaa "
  hyper_link: "https://google.com"
  link_description: "Google"
  faq_link_pid: 8
---

Answer 1

我通过删除所有的javascript和REGEx并简单地使用液态replace函数来解决我的问题。不需要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>

Answer 2

为什么要使用regex + javascript来放置链接？最好将您想要的所有内容隐藏在<DIV class=hidden">中，然后使用javascript切换DIV的CSS属性display:none。

在关闭js的浏览器中，这也会更好地工作。更具体地说:用HTML编写所有内容，并将显示保留在您希望隐藏的DIVs上(即不要在CSS文件上设置任何显示)。然后使用js在页面上加载一个显示:所有这些DIV元素中都没有；然后使用js切换单个元素的显示。

例如，使用jquery，您将执行以下操作

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

然后，在clickable元素上使用slideToggle()切换下一个元素的显示(您必须查看DOM树才能准确地获得哪个元素)