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
Related
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 }}
I'm using Pelican 4.2.0, and I'd like to always display the full text of my latest blog post on the 'home' page, then have other posts listed on a separate 'Articles' page. Is this a setting, a template configuration, or...?
Full-content versus summary display behavior is entirely managed in theme templates. The default notmyidea theme included with Pelican, for example, has an index.html template that shows the most recent full-content article at the top, followed by summaries of previous articles below. The relevant line that displays the full article content contains the following template variable:
{{ article.content }}
… whereas the line that shows article summaries instead uses the following template variable:
{{ article.summary }}
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
This is my personal GH Pages site.
I have this set in my /_config.yml:
theme: jekyll-theme-cayman
title: iBug # GitHub
description: The small personal site for iBug
Now it shows a big title iBug # GitHub and a tagline on every page GH Pages generates. I want to set overrides for specific pages. I tried
---
title: Blog index
---
in /blog/index.html, but it doesn't work. It only changes the HTML title of the page (browser title bar), but not the "title" in the big block on the top of the page.
How do I set an override title for a single page?
Update: I have since submitted a pull request to change this in the theme, and the answer below is no longer necessary since it's already been applied when you use the theme as of now. All you need to do is to specify the title override in the front matter:
---
title: My custom title
---
To specify another title, you need to change the layout file.
Copy the default layout and place it in <GitHub repo>/_layouts/default.html, and change line 16 to this:
<h1 class="project-name">{{ page.title | default: site.title }}</h1>
Then Jekyll will respect the title set in the front matter, and place it there.
This is just the way this theme is implemented, if you check the default layout for Cayman theme on line 14 you can see what exact variable it is using.
<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
Hope that helps!
My approach is using javascript as follows.
<script>
document.getElementsByClassName("project-name").item(0).innerText = "{{ page.title }}";
</script>
You can write a html file in _includes dir and use {% include your_file.html %}.
In my index page, I want to show this:
If a post is short, I will not set the excerpt_separator to make it show the full content, it will display as the same as the single post page.
if a post is long, I will set excerpt_separator in the article, I want to show the excerpt in the post.
In the posts loop of index page,The show template is different between whole article and excerpt,like ellipsis and 'read more' link. So I need to know whether the excerpt separator is used in the current post.How can I judge this,thank you.
You can test your post.content like this :
{% if post.content contains site.excerpt_separator %}