CODEWITHSUNDEEP
htmljekyllliquid
S1LV3R
S1LV3R

Reputation: 135

Adding tags to jekyll post breaks page

Let's say i have the following front matter:

title: example
date: 2019-09-16 00:00:00+2000
layout: post
categories: blog

And the following HTML code:

{% for post in site.posts %}
    {% for tag in post.tags %}
        <input type="checkbox">{{tag}}<br>
    {% endfor %}
{% endfor %}

As expected the page looks like it should and the code looks like what you would expect:

How it should look:

Correct display Correct code

But, if i add the following front matter:

tags: ["code", "test", "example", "python"]

Everything breaks:

WRONG

Broken display (Top) Broken code

What is happening?

jekyll -v >> jekyll 4.0.0

Gems:

EDIT: Seems it grabs the entire post and not just the category if i add this:

{% for category in site.categories %}
    <input type="checkbox" name="{{category}}" value="{{category | capitalize }}">
{% endfor %}

Which is clearly wrong

Upvotes: 0

Views: 104

Answers (1)

ashmaroli
ashmaroli

Reputation: 5444

The bug is because of the following code in your site's meta:

<meta name="keywords" content="{{site.tags}}">

site.tags is a hash of all posts tagged to a given string. A hash here denotes a container of key-value pairs. For example:

{"foo" => "bar", "alpha" => "beta"}

Solutions

Use some other variable to denote the keywords. For example, keywords. In your config file, replace the key tags with keywords.

keywords: [
  "HTML",
  "Python",
  "CSS",
  "Coding",
  "Blog"
]

Then update your head.html include:

<meta name="keywords" content="{{ site.keywords }}">

Regarding the rendering of checkboxes, you need to know that kramdown considers all lines with 4 leading spaces to denote a code-block. Therefore the following

{% for post in site.posts %}
    {% for tag in post.tags %}
        <input type="checkbox">{{tag}}<br>
    {% endfor %}
{% endfor %}

will only produce

    <input type="checkbox">code<br>

    <input type="checkbox">test<br>

    <input type="checkbox">example<br>

    <input type="checkbox">python<br>

(They're not rendered as HTML inputs but as raw code.)

To see the internal representation of any object you intend to use in Liquid, you can pass it to the inspect filter. For example, to see what site.tags (or site.categories even) are actually, you could inspect them via:

<pre>{{ site.tags | inspect }}</pre>

Upvotes: 2

Related Questions