CODEWITHSUNDEEP
rubyjekyllliquid
Matt Smith
Matt Smith

Reputation: 2158

Jekyll tags that have spaces or multiple words

I'm using tags in Jekyll for my blog posts. The following is an example of tags I declare in the front matter in the Markdown file:

---
tags: [jekyll, tags, user experience]
---

The problem I have is that the "user experience" is rendered with a space, which breaks the link for the tag. I'd like to know if it's possible to have tags that have spaces or multiple words.

This is what my code looks like:

Markup with Ruby:

{% if page.tags.size > 0 %}
  <div class="post-tags">
    <ul>
      {% for tag in page.tags %}
        <li><a href="/tags#{{ tag }}">{{ tag }}</a>{% if forloop.last == false %},{% endif %}</li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

Does anyone have any ideas on how I can do that? Thanks!

Upvotes: 12

Views: 3505

Answers (3)

David Jacquel
David Jacquel

Reputation: 52829

You can use url_encode filter : {{ tag | url_encode }}.

Note that url_encode will turn a space into a + sign instead of a percent-encoded character. cf. Liquid doc

Upvotes: 9

Matt Smith
Matt Smith

Reputation: 2158

I discovered a fix. When you have spaces in the tags, e.g., "user experience", Jekyll isn't concatenating the words as part of the rendered link, leaving the space between both words: your.site/tags/user experience

I needed the two words joined by a + because my Tags page rendered a link to that section as #user+experience. So I added replace like this:

{{ tag | replace: " ","+" }}

This still feels like a bug in Jekyll, but this process works. Replace the space with whatever syntax you need.

Upvotes: 2

Christian Specht
Christian Specht

Reputation: 36441

I had the same problem when I created the tag pages in my blog.

My solution was simply to replace the blanks by dashes:

---
tags: [jekyll, tags, user-experience]
---

Example front-matter from one of my posts:

tags:
- backup
- bitbucket-backup
- roboshell-backup
- source-control

The finished HTML looks like this:

<p><small>tags:
    <span class="blog_post_categories">
        <a href="/tags/#backup">backup</a>, 
        <a href="/tags/#bitbucket-backup">bitbucket-backup</a>, 
        <a href="/tags/#roboshell-backup">roboshell-backup</a>, 
        <a href="/tags/#source-control">source-control</a>
    </span>
</small></p>

I'm sure that there is a more elegant solution which displays the blanks actually as blanks, but for me, dashes were good enough.

Upvotes: 6

Related Questions