Jekyll按钮组件调用：如何从数据数组取值渲染按钮？

Got it, let's walk through exactly how to get your button component pulling data from that Contentful array and rendering properly.

First, let's confirm your component setup: I'm assuming you've saved that Liquid code in an include file, say _includes/button.html (that's the standard Jekyll structure for reusable components).

1. Rendering a Single Button from the Array #

Your target data is site.data.contentful.spaces.links.navbar[0].item_name — that's the content text for your first navbar button. To pass this to your component, you'll use Jekyll's include tag and map the data to the component's parameters:

{% include button.html content=site.data.contentful.spaces.links.navbar[0].item_name %}

This will pass the item_name value as the content parameter to your button component. The component will handle the rest: using the default button type and base c-button class.

2. Adding Custom Classes or Button Type (If Your Data Has Them) #

If your Contentful navbar items have extra fields (like a custom button class or a submit type for forms), you can pass those too. For example, if your data has button_class and button_type fields:

{% assign navbar_item = site.data.contentful.spaces.links.navbar[0] %}
{% include button.html 
  content=navbar_item.item_name
  class=navbar_item.button_class
  type=navbar_item.button_type
%}

Using assign first cleans up the code, making it easier to read if you're accessing multiple fields from the same item.

3. Rendering Multiple Buttons (Loop Through the Navbar Array) #

If your navbar array has multiple button items, you can loop through them to render all buttons at once:

{% for item in site.data.contentful.spaces.links.navbar %}
  {% include button.html 
    content=item.item_name
    class=item.button_class
    type=item.button_type
  %}
{% endfor %}

This will iterate over every item in the navbar array, rendering a button for each one with its respective content, class, and type.

Quick Notes to Avoid Issues #

• Empty Content Handling: Your component already checks if content exists before rendering the button, so if an item in your array has an empty item_name, it won't output anything — no broken buttons!
• Liquid Whitespace: If you notice extra spaces in your rendered HTML, you can add hyphens to your Liquid tags (like {%- include ... -%}) to trim whitespace.

内容的提问来源于stack exchange，提问作者Yakalent