从 yml 文件对象中显示无限数量的特定元素

Question

所以我有一个显示带有简短摘要的故事的页面，当单击单个故事时，您可以查看更深入的模式，其中包含有关所单击故事的更多详细信息。在 "fullstory"（更详细的版本）中显示图像时出现问题。我希望能够根据 yml 文件中包含的图像数量在故事中显示无限图片。

YML 文件包含以下故事：

- name: The Playful Story
  description: Joy Project volunteers built a sensory gym for a family with children who have special needs.
  image_url: sensory-gym
  date_of_event: April 2015
  uniqueID: 0008
  fullheader: Sensory Gym Build Day
  fullstory: In January of 2015, over a dozen Joy Project volunteers built a sensory gym for a family with several children with special needs. We created a room for the children to enjoy that included a climbing structure, suspended equipment, and several sensory toys. <br>Check out the video below for a further look into our day!
  fullimage: sensory-gym
  embededvideo: #

并且 YML 对象由以下 HTML 读取：

{% for story in site.data.stories %}
     <h3 class="center" >{{story.name}}</h3>

     <!-- Short Description -->
     <p><b>Date of Event: </b> {{story.date_of_event}}</p>
     <p>{{story.description}}</p>

<h3 class="center" >{{story.name}}</h3>

                <!-- Short Description -->
            <p><b>Date of Event: </b> {{story.date_of_event}}</p>
            <p>{{story.description}}</p>

<!-- Modal -->
<div id="myModal{{story.uniqueID}}" class="modal fade" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title center">{{story.fullheader}}</h4>
      </div>
      <div class="modal-body">
        <p>{{story.fullstory}}</p>

        <!-- Display up to 3 images -->
        {% for story.fullimage in story %} <!-- Image 1 spot -->
        <img class="center" id="{{story.fullimage}}" src="/assets/img/stories/{{story.fullimage}}.png" alt="{{story.name}}" style="padding-bottom: 10px">
        {% endif %}
        <!-- /Image area --> 

        {% if story.embededvideo %} <!-- Video spot -->
        <br><object data="{{story.embededvideo}}" width="560" height="315"></object>
        {% endif %}

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div> <!-- Close Modal --> 

        {% endfor %}

长话短说，在一个名为 "stories.yml" 的 YML 文件中有多个故事，我想为每个故事提供无限数量的 "fullimage"，它会在模态中显示所有故事。有什么建议吗？

Answer 1

首先设置你的 yml 来保存所有的图像

- name: The Playful Story
  description: Joy Project volunteers built a sensory gym for a family with children who have special needs.
  image_url: sensory-gym
  images:
     - url: sensory-gym-1
       alt: Use alt text on your images for better SEO
     - url: sensory-gym-2
       alt: Use alt text on your images for better SEO
     - url: sensory-gym-3
       alt: Use alt text on your images for better SEO
  date_of_event: April 2015
  uniqueID: 0008
  fullheader: Sensory Gym Build Day

然后你可以遍历它们：

{% for image in story.images %}
   <img class="center" id="{{ image.url }}" src="/assets/img/stories/{{ image.url }}.png" alt="{{ image.alt }}" style="padding-bottom: 10px">
{% endfor %}

如果您希望将前三张图像与其他图像分开，您可以使用计数器：

{% assign count = 0 %}
{% for image in story.images %}
  {% assign count = count | plus: 1 %}
  {% if count < 3 %}
    <img class="center" id="{{ image.url }}" src="/assets/img/stories/{{ image.url }}.png" alt="{{ image.alt }}" style="padding-bottom: 10px">
  {% else %}
     {% break %}
  {% endif %}
{% endfor %}

从 yml 文件对象中显示无限数量的特定元素

Displaying unlimited amount of specific elements from a yml file object

html

liquid