Using Liquid within an anchor tag?

[FlyersPh9]

I am editing button.md and component-detail.html. In the button.md file I am creating a new variable called yammer.

fine-print:
- version: 0.3
  update: April 27, 2017
  owner: Jane Doe
  yammer:  http://github.com

In the component-detail.html file I am trying to use the yammer variable in an anchor tag like this:

<ul>
  <li>Yammer: {{ print.yammer }}</li>
</ul>
<a href="{{ print.yammer }}" class="c-btn">Discuss this on Yammer</a>

When the page renders, Yammer's value does appear in the unordered list, but does not appear within the anchor tag. Any ideas how to get this to work?

[frostyweather]

@FlyersPh9 You are missing the second bracket after print.yammer on the list item. Do you think that is the issue?

[frostyweather]

Also, there should be a liquid loop that should be around the fine print list items as well. That may be the reason if the typo isn't the error.

[FlyersPh9]

@frostyweather My mistake, the second bracket is actually there in my working example. I'll correct it in the original post.

[frostyweather]

@FlyersPh9 Alrighty. Basically you need a liquid loop around the list. Something like this (you'll need to add the link within the loop for it to work to):

{% for print in page.fine-print %}
        <ul>
        <li>Yammer: {{ print.yammer }}</li>
        </ul>
      <a href="{{ print.yammer }}" class="c-btn">Discuss this on Yammer</a>
 {% endfor %}

This should work.

[FlyersPh9]

Thank you @frostyweather! You were right, I did not have a liquid loop around the button. It's been a bit rocky as I try to learn how to use StyleGuideGuide but I am slowly learning over time. Thanks again!

[frostyweather]

@FlyersPh9 Glad I could help! Take a look at this site if you need some help with liquid stuff. https://shopify.github.io/liquid/tags/iteration/

I dealt with quite a bit of confusion while first learning liquid as well, but once you understand it, you get it. Best of luck with all of this!