下面的代码与所呈现的略有不同，我还没有进行更改。所以请记住这一点。
应该是
- 遍历YAML数据文件。
- 在需要的地方放置一个链接。
然而，目前，它只在我想要链接的地方放置for循环看到的最后一个元素。
我有一个带有两个链接的YAML文件，它没有将链接放在与其PID相关的块中，而是将第二个链接放在所有链接位置。
我使用REGEX来解析，因此在YAML文件中的任何地方都是aaaa，链接在该位置被替换。这是有效的，它只是没有放置正确的链接。
现在更令人困惑的部分是，第一个console.logconsole.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
---
为什么要使用regex + javascript来放置链接?最好是把你想要隐藏在<DIV class=hidden">内的HTML中的所有内容，然后使用javascript为DIV切换CSS属性display:none。
在浏览器关闭js的情况下也能更好地工作。更具体地说:在HTML中编写所有内容，并将显示留在您想要隐藏的div上(即不要在CSS文件上设置任何显示)。然后使用js在页面上加载一个display:none在所有这些DIV元素;然后使用js来切换单个元素的显示。
。使用jquery，您可以这样做
jQuery(document).ready(function($) {
//Set default open/close settings
var divs = $('.hidden').hide(); //Hide/close all containers
，然后在可点击的元素上使用slideToggle()来切换下一个元素的显示(您必须查看DOM树以准确获取哪个元素)
我通过删除所有javascript和REGEx并简单地使用Liquidreplace函数来解决我的问题。不需要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>