Jekyll: Liquid custom output statement for dynamic CSS classes

Question

My Jekyll website has two kinds of content: personal, and professional.

I would like to emphasize which kind of content a visitor is currently reading with dynamic CSS classes:

If the visitor is on a page tagged as "personal", my <main> element's class should be "personal-content".
If the visitor is on a page tagged as "professional", my <main> element's class should be "professional-content".
Otherwise, the class should be "site-content".

In the front-matter of each page, I'm creating an output statement that I set either at "personal" or "professional", for example:

---
content: "personal"
----

Then I'm using this output statement in my tag like this: (indented for reading purposes)

<main
{% if page.content %}
    class="{{ page.content }}-content"
    {% else %}
        class="site-content"
{% endif %}
>

However I'm only seeing styling from my site-content class. What did I do wrong?

Does the other class (personal-content or professional-content) appear in the HTML output? — APerson, Jul 27 '18 at 15:25
`{{ page.content | inspect }}` can give you a clue on what is going on. — David Jacquel, Jul 27 '18 at 19:37
Thanks @APerson, I looked at the generated HTML and found that this is my opening
tag: ` — Robin Métral, Jul 27 '18 at 23:46
@DavidJacquel thanks to this I think I figured it out: Jekyll is already using "content" to include markdown articles into layouts! {{ page.content | inspect }} actually returned my page's copy. — Robin Métral, Jul 27 '18 at 23:49

score 0 · Accepted Answer · answered Jul 28 '18 at 00:06

Thanks to the comments above, I fixed it!

The problem was that I was not using a custom output statement as I thought I was: {{ content }} is already used by Jekyll to include markdown articles into HTML layouts.

So I switched {{ page.content }} to {{ page.contenttype }} and it works fine!

Caveat: I also had to change the values I was giving my output statement. professional was working fine, but for some reason personal was returning nil. So I simply switched them for pro and perso and voilà.

Jekyll: Liquid custom output statement for dynamic CSS classes

1 Answers1