---
layout: post
title: Markdown:<br>Style Guide
---
I expect this to produce
<h1>Markdown:<br>
Style Guide</h1>
But there are two issues. The colon breaks the Yaml. Hence I need to put " " around it.
---
layout: post
title: "Markdown:<br>Style Guide"
---
But what I can't solve is the line break in the title. It displays <br> instead of actually breaking the line. Is there any way?
You probably use a default Jekyll template which uses {{ post.title | escape }}.
If you remove the escape filter, all your html will be preserved.
It now reads : {{ post.title }} or {{ page.title }} depending on the context.
Related
I am using a custom excerpt in my blog post, but I got an empty output if the length of excerpt is too long.
If I reduce some words in excerpt, then it worked.
Do you have any ideas how to fix it?
Thank you
My post configuration:
---
title: Test a Perceptual Phenomenon
layout: notebook
excerpt: In a Stroop task, participants are presented with a list of words, with each word displayed in a color of ink. The participant’s task is to say out loud the color of the ink in which the word is printed.
---
My blog page:
---
layout: default
title: Blog
---
<h1>Latest Posts</h1>
<ul>
{% for post in site.posts %}
<li>
<h2>{{ post.title }}</h2>
<p>{{ post.excerpt }}</p>
<p>{{ post.post_description }}</p>
</li>
{% endfor %}
</ul>
Ok. I managed to reproduce your problem using this file.
And it was because of a colon used in your front matter post_description.
eg : post_description: In a Stroop task, ... The task has two conditions: a congruent ...
To fix this, you can use quotes or double quotes.
post_description: 'Your text with escaped \'quotes\' and "double quotes" : success'
post_description: "Your text with 'quotes' and \"escaped double quotes\" : success'
Or you can use multi line string
post_description : >
A long text with special characters : success !
Another line.
I wonder if anyone can illuminate this puzzle. I am using a new installation of vanilla jekyll on a Mac. Everything seems to work fine, but I discovered that some text being shown in my page footer was rendering differently on posts and all other pages. On most pages the text would render as HTML, but in posts it was rendering as Markdown. I found a workaround, but it left me with even more questions.
Context
I have defined footer_sections as a collection to hold portions of the footer. In my _config.yml this looks like:
collections:
footer_sections:
output: false
A footer section is then defined in a Markdown file such as _footer_sections/address.md as:
---
title: Address
order: 1
---
**My Name**
123 My Street
My Town, ST 12345
123-555-5555
In my default.html I had a footer section in my HTML something like this:
<div id="footer">
{{ site.footer_sections | where: "title", "Address" }}
</div>
And my posts are set up like this example:
---
title: Silly new post
date: 2017-02-27T12:33:53+00:00
author: Eric Celeste
layout: post
---
Silly post.
And finally, the post layout is connected to the default layout like this:
---
layout: default
---
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date | date_to_string }}</p>
<div class="post">
{{ content }}
</div>
The Problem
Notice that the address.md file is defined in Markdown and then its content is shown in the footer by the inclusion of the section in default.html. On all regular pages this would render as HTML (a bold name, a plain address), but on posts like the silly post above, it would render as Markdown (a name surrounded by stars and an address without like breaks).
I thought maybe it had to do with different procedural steps between posts and pages, maybe the Markdown rendering is happening "later" on pages but has already happened "earlier" in posts. I am only two days old on Jekyll, so I really don't know how it works.
In order to test that theory, I tried forcing the Markdown rendering with the markdownify filter. I changed the liquid tags in default.html so that they read:
{% assign section = site.footer_sections | where: "title", "Address" %}
{{ section.content | markdownify }}
Oddly, this produced a worse result everywhere. Now no text of any sort appeared in the footer of regular or post pages.
On the theory that maybe the where filter is actually different from looping through members of an array with foreach I tried another approach:
{% for section in site.footer_sections %}
{% if section.title == "Address" %}
{{ section.content | markdownify }}
{% endif %}
{% endfor %}
That worked! Now the content of the footer sections rendered as HTML on both regular pages and posts.
My Questions
Why didn't the initial approach work? What is the difference between rendering of posts and other pages in Jekyll?
While I found workaround, I don't understand why it works. In what ways does pulling out an item from an array with a where filter differ from using a member from a foreach loop? How does this affect the results of the markdownify filter?
Is there a cleaner, simpler way to grab the HTML-rendered content from my sections than looping through them each time I want to use one of them?
Thanks for any insights you may have!
site.footer_sections is an array and the output of the 'where' filter is still an array (but only containing the values that match your condition).
In your case, you are getting a single-element array but it's still an array object.
To see this for yourself use the inspect filter:
{% assign section = site.footer_sections | where: "title", "Address" %}
{{ section.content | inspect }}
On the other hand, when you loop through the elements with a for loop, at each iteration you get the individual elements of the array. Try using inspect inside your loop to see how the two types of your section variable differ.
For the 'where' method to work you need to get the actual element from the array either with first or [0]:
{% assign section = site.footer_sections | where: "title", "Address" %}
{{ section.first.content | markdownify }}
OR
{% assign section = site.footer_sections | where: "title", "Address" %}
{{ section[0].content | markdownify }}
links:
array documentation
first documentation
where documentation
I want to use liquid tags in a page on a Jekyll site. I have used them successfully in layout files, but when I use them in a page they are not parsed by Liquid.
The page is in html format not Markdown. The page has valid YAML front-matter that is being successfully used by the layout file. Here's the code for the page that isn't parsing:
---
layout: default
title: Media
id: media
order: 2
---
<section id="photos">
<h2>Photographs</h2>
<div id="galleries">
{% for set in site.flickr-sets %}
<div class="gallery" data-set="{{ set }}"></div>
{% endfor %}
</div>
</section>
Is there any obvious reason why this isn't working? I really need to be able to access the site global variable...
EDIT
It seems this issue isn't confined to just that page. I tried creating a new page and using some liquid syntax and got the same result. It's also any liquid syntax not just tags.
In the layout file that these pages use I include the content of the page using {{ page.content }} rather than just {{ content }}. Could that be relevant?
{{ content }} works and it's different than {{ page.content }}
{{ content }} it's parsing all liquid syntax :)
Hope that helps.
So it seems that the answer is that as I suspected. I tested the same code using a new layout file that just called {{ content }} and it rendered correctly. I'm assuming this means that when Jekyll builds it stores raw content in the page object. This is why pages with only html (or Markdown) were being rendered correctly, but any Liquid syntax was not being parsed.
Although this technically answers the question, I still haven't figured out how to solve my problem! It would be useful if there was some sort of filter I could add to {{ page.content }} to make it parse the Liquid syntax.
I know this may be a little late, but I dug up something called {{ page.output }} which is the rendered content of the page.
I am using Jekyll to create a blog by following this excellent tutorial. I would like to add a post summary on the index page. I tried using:
post.content | truncatewords:50 | strip_html
it works but it displays the entire post until the 50 word count is reached. This includes the heading too. I would like to just summarize the actual content of the post. How can I structure my posts to do this?
Update 16 Nov, 2015
Now Jekyll support excerpt separator, In template you can do this:
{% if post.excerpt %}
{{ post.excerpt }}
{% endif %}
and In global config _config.yml you can set:
excerpt_separator: <!--more-->
and the same use with <!--more--> html comment tag.
Old answer
You can try this:
{% if post.content contains '<!--more-->' %}
{{ post.content | split:'<!--more-->' | first }}
{% else %}
{{ post.content }}
{% endif %}
and add <!--more--> tag in the article after summary, just like Wordpress.
Use YAML front matter and define a separate title per post, like this:
---
title: Efficient smuflet based kwoxel trees
---
Post content goes here.
Then you can use or not use post.title as you please.
Or, if you want to write a separate summary (not just the first n characters) for each post, just add a field for that summary in the front matter as well.
From the Jekyll documentation:
Each post automatically takes the first block of text, from the beginning of the content to the first occurrence of excerpt_separator, and sets it as the post.excerpt.
...
Because Jekyll grabs the first paragraph you will not need to wrap the excerpt in p tags, which is already done for you.
See http://jekyllrb.com/docs/posts/#post-excerpts for more info and an example.
Use {{ post.excerpt }} in your index.md file to get an excerpt of this post.
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.
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>
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.