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!
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
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With