The excerpt is usually for displaying a small snippet of the page or post to display it elsewhere. By default, Jekyll uses the first paragraph (the first character of text, then the last character of text before a carriage return).
For example, let’s say you have two blog posts that look like this:
---
title: My bike ride today
layout: blogpost
date: 2021-04-25
---
Today I managed to get on a new biking trail and wanted to share that with you. You know the one I'm talking about, that winds its way to the ocean.
As you know, I mostly ride along this other trail, but today...
---
title: How to cook crispy french fries
layout: blogpost
excerpt_separator: <!--more-->
date: 2021-04-26
---
During a pandemic, you may not have a chance to get to that restaurant you really like that makes super crispy french fries.
When you order fries for delivery, they are soggy and no good. In this post, I am going to explain how to do it yourself! <!--more-->
First, you will need some peanut oil...
Now let’s say you have a web page that lists the excerpts from your posts. Let’s say you created a page called allposts.html
. The code might look something like this:
---
title: All blog posts
layout: default
---
<h2>All my blog posts with their excerpts</h2>
{%- for post in site.posts -%}
<p>Title: {{ post.title }}</p>
<p>Excerpt: {{ post.excerpt }}</p>
<p></p>
{%- endfor- %}
The output will look something like this:
Title: My bike ride today
Excerpt: Today I managed to get on a new biking trail and wanted to share that with you. You know the one I’m talking about, that winds its way to the ocean.
Title: How to cook crispy french fries
Excerpt: During a pandemic, you may not have a chance to get to that restaurant you really like that makes super crispy french fries.
When you order fries for delivery, they are soggy and no good. In this post, I am going to explain how to do it yourself!
Assuming your _config.yml
file does not contain a default excerpt setting, Jekyll defaults to setting the excerpt as the first paragraph. When you define a separator in your page or post like we did the second one, the excerpt continues until it sees the separator you defined, which in this case is the text <!--more-->
.
I highly recommend you decide what you want to use for a separator and put it in your _config.yml
file unless you really want to set a separator for each and every page or post. I actually use a period, so it just gives the first sentence, rather than the first paragraph, but you decide what works best for your situation.
For example, you can edit your _config.yml
file and place a line anywhere in the code that reads:
excerpt_ separator: <!--more-->
Since you modified the config file, you will need to stop and build Jekyll for this change to take effect.
Using the previous examples, here is what your new blog posts might look like:
---
title: My bike ride today
layout: blogpost
date: 2021-04-25
---
Today I managed to get on a new biking trail and wanted to share that with you. <!--more-->You know the one I'm talking about, that winds its way to the ocean.
As you know, I mostly ride along this other trail, but today...
---
title: How to cook crispy french fries
layout: blogpost
date: 2021-04-26
---
During a pandemic, you may not have a chance to get to that restaurant you really like that makes super crispy french fries.<!--more-->
When you order fries for delivery, they are soggy and no good. In this post, I am going to explain how to do it yourself!
First, you will need some peanut oil...
Notice I removed excerpt_separator: <!--more-->
from the YAML front matter of the first post. I don’t need it there since I have a default set in the _config.yml
file now (although I can add one for one-off purposes). Notice both posts use in-line text to determine where the excerpt ends.
The new output will look something like this:
Title: My bike ride today
Excerpt: Today I managed to get on a new biking trail and wanted to share that with you.
Title: How to cook crispy french fries
Excerpt: During a pandemic, you may not have a chance to get to that restaurant you really like that makes super crispy french fries.
Notice how the first biking post no longer shows the whole paragraph. That is because the <!--more-->
code displays at the end of the first sentence. Notice also that the second french fries post shows the first paragraph, because I moved the <!--more-->
text to end there.
Hope this helps.
Also, in the future, please put all your code in reverse apostrophes. When you are doing multiple lines, select the code and press the </>
button in the code editor, or just start and finish the code with three reverse apostrophes (```) and the code will format nicely.
Thanks!