I'm using jekyll with GitHub pages for my blog. How can I display a short sentence right below my post title in the index/ home page? As an example, I am trying to write text between the red brackets:
example image
I've seen other posts on this site that ask a similar question, but they are very old and it seems that jekyll has changed since then. Any help would be appreciated.
If these are posts you should be able to use {{ post.excerpt }}. You can see more in the docs: https://jekyllrb.com/docs/posts/
If it's a page (and not a post) you'll need to use {{ page.content | truncatewords: 30 }}. See more in the docs: https://shopify.github.io/liquid/filters/truncatewords/
A note about page.content: if that page is HTML code you'll need to use the strip_html filter. If that page has liquid, there is no filter to strip that and you will need to add the excerpt to the front matter. Something like this:
---
title: This is a post title
description: This is a post description.
excerpt: This is the post excerpt.
---
{{ page.excerpt }}
Related
In my Jekyll theme, some of my blog posts are shown as it is on the home page. But I want to limit them up to certain lines. That is, I want to show only 5-6 lines of the blog on the home page.
For example,
In,
1. 5 lines of the blog post are visible
2. Only two lines of the blog post are visible
3. In the last post of the page the entire blog post is visible on the homepage.
I am new to Jekyll and I don't know how can I do that. The theme I am using is the earlier version of White Paper
The preview text from each blog posts are from {{ post.excerpt }} in index.html[1]. It looks like the White Paper jekyll theme is using the default behavior of Post excerpts[2].
By default this is the first paragraph of content in the post, however
it can be customized by setting a excerpt_separator variable in front
matter or _config.yml.
If you want to control how much text is previewed for each blog post, you can stop using {{ post.excerpt }} and do something like {{ post.content | truncatewords: 60 }} instead.
These {{ ... }} code snippets are from the Liquid templating language [3][4]
[1] https://github.com/vinitkumar/white-paper/blob/3995398d74b42ee70ad2e4c82a0ab8955ad49955/index.html#L10
[2] https://jekyllrb.com/docs/posts/#post-excerpts
[3] https://jekyllrb.com/docs/liquid/
[4] https://shopify.github.io/liquid/
If you'd like to have more variation in excerpt size by each post, you can also use an excerpt-separator anywhere you'd like in the body of your posts [1].
By default this is the first paragraph of content in the post, however
it can be customized by setting a excerpt_separator variable in front
matter or _config.yml
[1] https://jekyllrb.com/docs/posts/#post-excerpts
Well, I'm trying to figure out how could I display highlighted syntax.
But actually I have two main issues. The principal one is that if I show the post.content using the template pipes:
For example: {{ post.content | markdownify }}
The following content is shown:
As you can see, the blocks of the main page is shown with a white background. While the posts are shown with dark background. I'm comparing the two templates to see if I'm missing something, but I don't see the thing I'm missing (I think is a CSS (missing include) problem).
Note: I already tried to include js.html from the theme. But I doesn't do so much.
Also, the other problem is that if I use more pipes to cut the content (because I don't want to see all the content), using: strip_html | truncatewords: site.post-preview-words in the {{ post.content | markdownify }} pipe. The following occurs:
Using only truncatewords the main page styles are broken.
Using also strip_html the contents are shown as plain content.
I know why this is happening. Is there any gem/plugin to truncate the content taking care of unclosed html tags? Is there any approach using the default pipes of Jekyll?
This is the theme I'm actually using: https://github.com/le4ker/personal-jekyll-theme
This is my main Github.io page: https://z3nth10n.github.io
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>
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've got some related posts in my Jekyll site, and I want to link them to each other. I'd like to just name the related posts in the yaml front matter, then when I render a post, include some nav bar that adds in links to the other posts.
For example:
title: This is Post One
layout: post
followup_post: 2013-02-02-two
---
Blah blah blah one.
Then in my post layout:
<h1>{{ page.title }}</h1>
{% if page.followup_post.size > 0 %}
follow up
{% endif %}
{{ content }}
However, this doesn't work, because post_url thinks I'm giving it a literal string when I want to give it a variable name.
Is there a way in Jekyll, without using a (GitHub-forbidden) plugin, to get a post URL for a post if the post's name in a variable?
Well, there is two things you could do:
1.) Loop over the site.posts array until you find the matching post object and use that
or
2.) Create the post url yourself, if you have a simple enough permalink (for example, i'm using simply :title)