19

New to Jekyll and wondering if it's possible to include custom variables in Jekyll Front Matter. It would be useful for nested layouts, for example something like:

layouts/artist.html

----
layout: default
title: {{ page.artist }} (Artist)
----

I get an error trying that.

mahemoff
  • 44,526
  • 36
  • 160
  • 222
  • 2
    YAML (which is what the head matter is, Liquid doesn't perform substitutions there I don't think) supports [references](https://en.wikipedia.org/wiki/YAML#References) but I haven't been able to get them to work in a layout (they work locally in a page though). – huon Apr 19 '12 at 01:30
  • I had a similar question where I needed pagination variables in the title. A solution was given here: http://stackoverflow.com/a/29729309/599477 – cornernote Apr 19 '15 at 22:09

2 Answers2

4

At the moment, Jekyll do not support Liquid variables in the front matter, and the only way to do that would be through a plugin, such as jekyll-conrefifier.


Alternatively, what you can do, though, is create variables that you re-use on the same file:

{% assign new_title = page.title | append: " (Artist)" %}
<h1>{{ new_title }}</h1>

and you can also pass variables to files that get included. For example, including a file from _includes\display-post.html passing the modified title as an argument:

{% assign new_title = page.title | append: " (Artist)" %}
{% include display-post.html post_title=new_title %}

And then getting the value of the value passed in (example content of _includes\display-post.html):

{% assign title_received = include.post_title %}

<h1>Title that as passed in: {{ title_received }}</h1>
C. Augusto Proiete
  • 24,684
  • 2
  • 63
  • 91
3

I'm not sure if there is a way to do this properly (i.e. server side), but a stop-gap measure could be to have a small snippet of Javascript that sets the correct title in the users browser. e.g.

---
title: Default title blah blah
---

[... content ...]

<span id="pagetitle" style="display: none">{{ page.artist | escape }} (Artist)</span>

<script type="text/javascript">
    var pagetitle = document.getElementById("pagetitle");
    if (pagetitle) {
        document.title = pagetitle.textContent;
    }
</script>

Notes:

The substitution of page.artist is performed in HTML rather than in the Javascript because it is easier to quote any HTML special characters (via escape) rather than the Javascript special characters ' or " or \ (there isn't a built-in filter to do this).

One could also move the pagetitle span to the top of the page so that it is near the other YAML front matter.

Unfortunately, this is a very poor way of achieving this, but it looks like it might be the only way other than writing a plugin.

huon
  • 94,605
  • 21
  • 231
  • 225
  • I ended up using this because I publish to GitHub Pages and GitHub Pages does not allow Jekyll plugins (except the ones [officially supported](https://pages.github.com/versions/)). So, the plugin solutions are not an option, but this one works. – weibeld Oct 29 '17 at 20:13
  • This is not safe. This is a client side change via DOM manipulation and Google will see "Default title blah blah" which could hurt your SEO ranking – goblinjuice Mar 08 '20 at 18:58