if and statement possible in html files Jekyll

1
votes

I want to create and if/and statement in my code to offer 3 different options for a link.

I've tried the if/else code and it works. Having two if statements (one with the 'AND') will not work because the error states there should be a closing statement after the first 'if'. I've tried using 'elseif' and 'else if' in the second statement, as well, with no luck. Is there a way to do this that I'm not finding?

<li class="{% if page.body_class == 'language' %}active{% endif %} hidden-md hidden-lg">
                {% if page.alternate_mx == null %}
                  <a href="/mx/" title="En Español">Español</a>
                {% if page.alternate_mx == null and page.translate_mx %}
                  <a href="/mx/{{page.translate_mx}}" title="En Español">Español</a>
                {% else %}
                  <a href="{{ site.url }}{{site.baseurl}}{{page.alternate_mx}}" title="En Español">Español</a>
                {% endif %}
   </li>
  • If there is no page.alternate_mx then the first link should appear.
  • BUT If there is no page.alternate_mx AND there is a page.translate_mx use the second link.
  • If there is a page.alternate_mx use the third link.

I am getting this error: "Liquid Exception: Liquid syntax error (line 144): 'if' tag was never closed in /usr/src/app/_includes/header/header-en.html, included in /_layouts/default.html web_1  |              Error: Liquid syntax error (line 144): 'if' tag was never closed web_1  | ...error: web_1  |              Error: Run jekyll build --trace for more information."

2
jekylljekyll-bootstrap

2 Answers

2
votes

It's not working because you have if if else endif there, the first if block is not closed. If elsif is not working for you, you can try to rearrange statements like so:

<li class="{% if page.body_class == 'language' %}active{% endif %} hidden-md hidden-lg">
        {% if page.alternate_mx == null %}
            {% if page.translate_mx %}
                <a href="/mx/{{page.translate_mx}}" title="En Español">Español</a>
            {% else %}
                <a href="/mx/" title="En Español">Español</a>
            {% endif %}
        {% else %}
          <a href="{{ site.url }}{{site.baseurl}}{{page.alternate_mx}}" title="En Español">Español</a>
        {% endif %}
</li>

Also you probably should use && instead of and because they have different precedence.

<li class="{% if page.body_class == 'language' %}active{% endif %} hidden-md hidden-lg">
                {% if page.alternate_mx == null %}
                  <a href="/mx/" title="En Español">Español</a>
                {% elsif page.alternate_mx == null && page.translate_mx %}
                  <a href="/mx/{{page.translate_mx}}" title="En Español">Español</a>
                {% else %}
                  <a href="{{ site.url }}{{site.baseurl}}{{page.alternate_mx}}" title="En Español">Español</a>
                {% endif %}
   </li>
1
votes

I ended up using this and it worked great.

<li class="{% if page.body_class == 'language' %}active{% endif %} hidden-md hidden-lg">

{% if page.translate_mx %}
          <a href="{{page.translate_mx}}" title="En Español">Español</a>
    {% elsif page.alternate_mx == null %}
           <a href="/mx/" title="En Español">Español</a>
    {% else %}
          <a href="{{page.alternate_mx}}" title="En Español">Español</a>
 {% endif %}

</li>```