Jekyll生成导航链接时文本前后出现多余空格的问题求助

这不是操作错误，是Jekyll处理模板空白时的正常表现，需要手动处理来消除多余空格。

问题原因 #

你的_includes/nav.html模板中，{{ item.name }}前后存在换行和缩进空格，Jekyll会保留这些空白字符，最终输出到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>

两种有效解决方法 #

1. 调整模板排版，直接消除空白
   把{{ item.name }}和<a>标签的起止标记放在同一行，去掉中间的换行和缩进：

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

2. 使用Liquid空白控制标记
   在Liquid标签或变量的首尾添加%-和-%>，自动去除前后的空白字符：

• 针对循环标签控制：

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

• 针对变量精准控制：

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

处理后效果 #

调整后输出的HTML会没有多余空格：

<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/blog.html">Blog</a>
<a href="/staff.html">Staff</a>

这样就不会出现视觉上的后置空格，也能避免引发样式问题。

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