2

I'm using jekyll-postfiles plugins to make my life easier. This plugin allows me to have static content in subfolders for my blog posts. For example:

_posts/
├── 2018-10-10-a.md
└── 2018-10-11-b/
    ├── 2018-10-11-b.md
    └── b.png

And I can use the image as a locall file in the markdown: ![](b.png) in the 2018-10-11-b.md. This plugin makes all the magic of copying the file and making the links work.

But now I want to use jekyll-seo-tag and I want to set YAML variables like this:

---
image: "{{ page.url }}b.png"
---

This is just to create custom metadata in the HTML file, i don't use the variable in my blog post. But I can't make this work. The page.url liquid variable is not expanded and the final metadata looks like this:

<meta property="og:image" content="myBlog/%7B%7B%20page.url%20%7D%7D%2Fmap.png" />

instead of:

<meta property="og:image" content="myBlog/2018/10/11/b/b.png" />

This property is in the head of the html page. Some questions here in StackOverflow show how to get a variable from the front matter and parse the liquid markup in the body of the document. What I need is to parse the liquid markup before the processing of the markdown file.

Is it possible to make the YAML front matter parse the liquid variables before processing the file?

Heitor
  • 339
  • 1
  • 3
  • 11

1 Answers1

-1

It is not clear to me why the front matter should contain a variable.

In most cases you do not need variables in the front matter. I think that this is also the case in your situation. I would move the front matter variable to the layout file. Thus, the layout file should look like this:

<meta property="og:image" content="myBlog/{{ page.url }}/{{ page.image }}" />

... and the front matter should look like this:

---
image: "b.png"
---

The SEO plugin can be easily exchanged by SEO without plugin, written by me. It is easy to adjust to your needs. Here is the code that it adds to the head:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
{% assign pagecontent_description = page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | strip_html | strip_newlines | replace: '  ', ' ' | truncate: 160 %}
<meta name="description" content="{% if pagecontent_description.size > 10 %}{{ pagecontent_description }}{% else %}{{ site.description }}{% endif %}">

<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="apple-touch-icon" href="/img/icon-196x196.png">

<!-- Facebook and Twitter integration -->
<meta property="og:title" content="{{ page.title }}"/>
{% if page.image %}<meta property="og:image" content="{{ page.image }}"/>{% endif %}
<meta property="og:url" content="{{ site.url }}{{ page.url }}"/>
<meta property="og:type" content="article">
<meta property="og:image" content="{{ site.url }}{{ page.image }}"/>
<meta property="og:site_name" content="{{ site.title }}"/>
<meta property="og:description" content="{% if pagecontent_description.size > 10 %}{{ pagecontent_description }}{% else %}{{ site.description }}{% endif %}"/>

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@{{ site.twitter_url }}">
<meta name="twitter:title" content="{{ page.title }}" />
{% if page.image %}<meta name="twitter:image" content="{{ site.url }}{{ page.image }}" />{% endif %}
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
<meta name="twitter:description" content="{% if pagecontent_description.size > 10 %}{{ pagecontent_description }}{% else %}{{ site.description }}{% endif %}" />

<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ "/sitemap.xml" | prepend: site.baseurl | prepend: site.url }}" />

If you have any questions, please let me know.

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • The front matter should contain a variable in this case because I have a plugin that creates all the HTML `` based on each page. If I change the layout, I'd be rewriting the plugin... – Heitor Nov 19 '18 at 13:14
  • You use a plugin to write a few lines of HTML in your head and you refuse to abandon or rewrite it when it does not do what you want? And you think the solution is to put variables in your front matter? I am sorry, but that is not the way to go. You are on the wrong path. – Mr. Hugo Nov 19 '18 at 13:47
  • Note that you cannot use variables in front matter: https://stackoverflow.com/questions/37512696/using-variables-in-jekylls-front-matter – Mr. Hugo Nov 19 '18 at 13:52
  • Oh, this _SEO without plugin_ black magic is exactly what I needed! – Heitor Nov 20 '18 at 14:55
  • 1
    `And you think the solution is to put variables in your front matter?` If Jekyll supported variables in the front matter, I'd definitely use variables in the front matter, as it is simpler than rewriting a plugin. – Heitor Nov 20 '18 at 14:56
  • I think your 'black magic' point is misplaced. I added the code to the answer. Are you sure you cannot read that? Please do not blindly copy-paste the code I wrote, but adjust it to your needs. I hope (and secretly expect) you will be happy with this solution in the long run. – Mr. Hugo Nov 20 '18 at 15:07