How to display post summary on index page using Jekyll? - html

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.

Related

Trying to get a collection from a Front Matter value

Hi I'm new to Jekyll and have a basic blog set up. Now my idea is to loop through a collection per blog post to get some fancy HTML going on. Because as far as I'm aware you can't simply add HTML to the markdown.
// config.yml
collections:
- hollowknight
So I've set up a collection named hollowknight and I got a blog post about Hollow Knight.
In the Front Matter of the blog post I have collectionid: 'hollowknight'. And in the Layout I use for blog posts I tried the following:
// post.html
{% capture collection %}site.{{ page.collectionid }}{% endcapture %}
{% for section in collection %}
{{ section.title }}
{% endfor %}
So the idea was to set the collection variable to site.hollowknight as configured in the config and the Front Matter. I set up a single article inside the collection, but it isn't showing up.
Is there any way to realise this?
Edit: https://talk.jekyllrb.com/t/list-collection-with-name-from-front-matter/3619/6
Or is there a way to use paragraphs in the Front Matter, because then I could just use arrays and objects in the Front Matter of the posts to do my magic?
Edit: https://github.com/jekyll/jekyll/issues/246#issuecomment-1639375
Or am I just stretching to far from what Jekyll is supposed to be?
Edit
So I found out I was getting the collection the wrong way, https://talk.jekyllrb.com/t/list-collection-with-name-from-front-matter/3619/6.
{% for section in site.[page.collectionid] %}
{{ section.content | textilize }}
{% endfor %}
The only weird part is, everywhere I see | textilize being used but can't get it to work.
This is the final solutions:
{% for section in site.[page.collectionid] %}
{{ section.content | markdownify }}
{% endfor %}
It's markdownify instead of textilize.
Also I ended up using a Front Matter array with objects to loop through instead of a collection to keep it more organized.

Jekyll Post Excerpt: How to know if there was an auto generated excerpt?

If I understand correctly Jekyll takes the first paragraph as an excerpt unless you use one of the various methods mark or specify one manually.
In my case, I want to be able to distinguish in the templates whether there was no excerpt or not so I can effectively do this
{% if post.excerpt %}
{{ post.excerpt }}
{% else %}
{{ post.content }}
{% endif %}
Effectively if there was no excerpt use the entire post. As it is, since Jekyll auto generates excerpts the test will always fail.
I suppose one solution so to go to every post that has no excerpt and add <!-- more --> at the very bottom of the post but that's very error prone as in if I forget I'll get the wrong result. I'd prefer to make the default be if I didn't manually mark an excerpt then the entire post appears on the home page.
To put it another way I'm trying to port from Wordpress to Jekyll. Wordpress's behavior is that no excerpt = insert entire post.
Is that possible in Jekyll? Is there some flag or variable I can check in the templates on whether or not an excerpt was manually specified vs auto generated?
There is an alternative solution with Liquid. You need to check, if the excerpt separator is present in the post:
{% if post.content contains site.excerpt_separator %}
{{ post.excerpt }}
<p>Read more</p>
{% else %}
{{ post.content }}
{% endif %}
I don't know any method to tell if an excerpt is manual or generated. Maybe writing a plugin to analyze the raw file's front-matter can be an option (but that would not work on Github Pages for example).
But I may have a solution for this:
I'd prefer to make the default be if I didn't manually mark an excerpt then the entire post appears on the home page.
According to the documentation, you can set excerpt_separator for every page (you can also set it at once in defaults).
Try setting a value which you know will never appear in your posts. If Jekyll doesn't find the separator, it won't separate, so the generated excerpt will be the entire post.
Example:
---
title: Some title
excerpt_separator: "CANTFINDME!"
---
Post line 1
Post line 2
The generated excerpt will be the entire post:
<p>Post line 1</p>
<p>Post line 2</p>

Markdown rendering differs when invoked on members of foreach or via a where filter

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

Wildcard match in Liquid tag?

I'm trying to filter out part of a post from my site's RSS feed. I want the rest of the post, but just want to remove certain parts.
Is there a way to filter this out somehow? I've looked at these Liquid tags/filters, and the closest I've found were remove and replace, but they seem to match literally.
I'm trying to basically do this in my feed.xml:
{{ post.content | replace:'<span class="no-rss">*</span>','' | cdata_escape }}
Is there some way to use a wildcard in these filters, or achieve this otherwise that I'm not aware of? My Google-fu has run dry on this one.
Two solutions :
using excerpt with posts
Part of the post you want to inject in your feed is at the beginning of your post.
Use excerpt
isolating part of content with liquid filters
If you are in a page (they don't have excerpt), or in a post and want to select specific part of your content, you can use liquid filters.
string.split and array filters.
In any post or page
---
your front matter variables here
---
Head of my document
<!-- start -->
Text to extract
<!-- end -->
Bottom of my document
in your rss
{% for p in site.posts %}
{% if p.content contains "<!--start-->" %}
{% assign extract = p.content | split: "<!--start-->" | last | split: "<!--end-->" | first %}
{{ extract }}
{% else %}
{{ p.content }}
{% endif %}
{% endfor %}
Instead of removing the whole span you could get rid of the style class being applied to it:
{{ post.content | remove: ' class="no-rss"' | cdata_escape }}

How can I have multiple authors for one post in Jekyll?

I have the following header on a jekyll post with a single author "usman" which generates the this article. I would like to have something like "authors: usman, someone_else" so a colleague can also contribute to the article. Is this possible? How would I set it up.
---
layout: post
title: The pitfalls of building services using Google App Engine -- Part I
date: 2013-02-24 08:18:17
author: usman
categories:
- System Admin
tags:
- GAE
---
I took a look at the post template for the theme I am using and it has the following line:
{% assign author = site.authors[page.author] %}
This will obviously only support one author, Is there a way to get both authors of the page? i.e. page.author[0] for example?
If you want to specify multiple authors in your YAML Frontmatter, then you are going to want to use YAML's list syntax like you did with categories and tags, like this:
author:
- usman
- someone_else
This will be useful for dynamically injecting author information into each of the posts.
As for allowing multiple people to contribute to the same article, I don't think this has anything to do with Jekyll or what is specified in the Frontmatter. This is an issue of having your Jekyll content hosted in a shared place (such as on GitHub, like many do) where both you and your collaborator can both work on the file. That being said, be aware that you may run into nasty merge conflicts if you work on that same markdown file in parallel.
Update
This is an update based on the OP's edits to the original question.
A simple hacked approach would be to set your author tag like this:
author: Usman and Someone_Else
This doesn't give you much flexibility though. A better solution, which would require you to modify the template you are using, would be to do something like the following:
First, setup your YAML Front Matter so that it can support multiple authors.
authors:
- Usman
- Someone_else
Now, you modify the template to go through the authors specified in the YAML Front Matter.
<p>
{% assign authorCount = page.authors | size %}
{% if authorCount == 0 %}
No author
{% elsif authorCount == 1 %}
{{ page.authors | first }}
{% else %}
{% for author in page.authors %}
{% if forloop.first %}
{{ author }}
{% elsif forloop.last %}
and {{ author }}
{% else %}
, {{ author }}
{% endif %}
{% endfor %}
{% endif %}
</p>
Resulting HTML:
If no authors are specified:
<p>No author</p>
If one author is specified:
<p>Usman</p>
If two authors are specified:
<p>Usman and Someone_Else</p>
If more than two authors are specified:
<p>Usman, Bob, and Someone_Else</p>