[SOLVED] Jekyll adding unwanted space before and after links

Jekyll adding unwanted space before and after links

I'm learning Jekyll. I finished the step by step tutorial: https://jekyllrb.com/docs/step-by-step/01-setup/

Variables seem to generate spaces before and after. Eg. item.name is now outputting the following:

<a href="#"> Home </a>
<a href="#"> Blog </a>
<a href="#"> About </a>
<a href="#"> Staff </a>

Which visually puts a space after each link. Ugly and potential for styling mishaps.

Do I have to make it, not do that? Am I OCD? Or am I doing it wrong?

Reference:

_includes/nav.html

<nav>
  {% for item in site.data.nav %}
  <a href="{{ item.link }}" {% if page.url==item.link %}class="current" {% endif %}>
    {{ item.name }}
  </a>
  {% endfor %}
</nav>

that .current class

.current {
  color: green;
}

_data/nav.yml

- name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html
- name: Staff
  link: /staff.html

Solution

It doesn't happen to me, but this can be fixed by adding | strip after item.name like so:

_includes/nav.html

<nav>
  {% for item in site.data.nav %}
  <a href="{{ item.link }}" {% if page.url==item.link %}class="current" {% endif %}>
    {{ item.name | strip }}
  </a>
  {% endfor %}
</nav>

EDIT: Seems like in OP's case, it's caused by indentation's spacings. To fix this, you must replace any occurrence of {{ with {{-, }} with -}}, {% with {%-, and %} with -%}. Here's the reference.