如何使用 jekyll & javascript/jquery 做动态模态弹出窗口

Question

我想知道 jekyll 是否可以实现以下功能：

一个网页有列表，您可以在其中单击每个项目。 > Sample image
使用 _data 文件夹 (jekyll) 中 data.yml 文件中的数据通过循环列出每个项目
当点击一个项目时，将出现一个弹出模式，内容应基于点击的项目。 > Sample Image
这些内容也存储在data.yml文件中

如果可行，当用户单击某个项目时，我如何提取 data.yml 中的数据？

Answer 1

要完成您想要实现的目标，您需要使用 for 循环。让我们调用您的数据文件 members.yml 并将其放在 _data 目录中。

我们假设您将拥有与此类似的内容

- name: John
  music: Rock

- name: Parker 
  music: Hip-Hop

- name: Lissie
  music: Jazz

现在我们可以在 html

中引用它

<ul>
  {% for member in site.data.members %}
    <li>
      <a href="#" class="show-message">
        {{ member.name }}, click me to see something
      </a>
      <div class="modal hide"> My favorite music is {{ member.music}}</div>
    </li>
  {% endfor %}
</ul>

这将生成一个列表。 class hide 会默认隐藏我们的模态框，你可以按照你喜欢的方式设置模态框的样式。这里有一些 jquery 会在您单击 link 并释放模式时移除隐藏 class。

$(document).ready(function () {
      $("a.show-message").on("click", function () {
          console.log("clicked");
          $(this).next().removeClass("hide");
      });
});

如何使用 jekyll & javascript/jquery 做动态模态弹出窗口

How to do a dynamic Modal Pop-up with jekyll & javascript/jquery

ruby

liquid

jekyll