I'm trying to create a jekyll page with all of my posts listed sequentially. The problem is that some posts use different layouts, which are then specified in the post frontmatter. I've disabled individual page output for the posts (actually a custom category), so the layouts are partials.
For example, say I have some red posts and green posts:
_posts/01_post1.md:
---
layout: redpost
---
Post 1 (red)
_posts/02_post2.md:
---
layout: greenpost
---
Post 2 (green)
I want these to get processed using the correct layout. I also would prefer to use inheritance, which I think precludes the use of {%include%}.
_layouts/post.html:
<article class="post">
{{ content }}
</article>
_layouts/redpost.html:
---
layout: post
---
<div style="color:red">
{{ content }}
</div>
Then in my top-level page I want to loop over all the posts, render them using the appropriate template, and concatenate the result. Obviously no RENDER filter exists, although perhaps I was just unable to find it's name in the documentation.
_layouts/index.html:
<html>
...
{% for post in site.posts %}
{{ post | RENDER }}
{% endfor %}
</html>
The desired final HTML would then look like:
<html>
<article class="post">
<div style="color:red">
<p>Post 1 (red)</p>
</div>
</article>
<article class="post">
<div style="color:green">
<p>Post 2 (green)</p>
</div>
</article>
</html>
Is this possible without plugins?
The solution was trivial, which is why it isn't mentioned in the documentation. A document object gets rendered with the correct template just by being printed directly:
{% for post in site.posts %}
{{ post }}
{% endfor %}
What is wrong with the following? Seems like a solution to me.
_layouts/index.html:
<html>
...
{% for post in site.posts %}
{% include post.html %}
{% endfor %}
</html>
_includes/post.html:
<article class="post">
{% if post.layout == 'greenpost' %}
{% include greenpost.html %}
{% endif %}
</article>
_includes/greenpost.html:
<div style="color:green">
{{ post.content }}
</div>
Related
I am trying to make a little website with django when I ran into a problem:
I have a site where I want to look at a post in detail, but not every post has an image attribute - so I am getting an error when I try to display images, since some arent existent.
So the solution would be to check if an image is given, but... How do I do that?
I tried something like this but it did not work:
</div>
<p>{{ object.content }}</p>
{% if object.image.url == True %} <!-- In no case an image is displayed -->
<p>
<img src="{{ object.image.url }}">
</p>
{% endif %}
</div>
You should check the truthiness object.image attribute, not its URL, so:
{% if object.image %}
<p><img src="{{ object.image.url }}"></p>
{% endif %}
I have a personal website built with jekyll and hosted on Github pages. I am trying to add a sub-site blog within the same domain. For this, I set up a blog.md page and followed the instructions from this website: https://www.garron.me/en/blog/multi-blog-site-jekyll.html. The idea is that if I access http://<mydomain>.com it will go to my personal website, and if I go to http://<mydomain>.com/blog it will go to a different site also set up with jekyll.
My file structure is different than what they suggest in the link above. It is like this:
/personalwebsite
config.yml
index.md
(other personal website pages).md
blog.md
/_site
/_layouts
/_posts
My index.md page is completely customized, and I wrote my own layout for that website. It is a static site and everything in _posts is ignored by it. My blog.md page is also on the root folder and it changes according to _config.yml. I am trying to use Github jekyll themes for it. The theme loads, but instead of showing the posts, it shows the code:
This is what blog.md looks like:
---
layout: blog
title: the blog
permalink: blog
---
{% raw %}
{% for post in site.posts %}
{% if post.categories contains 'blog' %}
<div class="post">
<h3 class="title">{{ post.title }}</h3>
<p class="meta">Date: {{ post.date }}</p>
<div class="entry">
{{ post.content | strip_html | truncatewords: 100 }}
</div>
</div>
{% endif %}
{% endfor %}
{% endraw %}
And this is what a post looks like:
---
layout: post
title: New test
category: blog
---
This is a test post
If I remove the {% raw %} parts in blog.md, the posts show up like this:
I have already checked that my posts are in the right place, the category parameter is filled in, the dates and post filenames are properly formatted. What am I doing wrong? Jekyll does not show any error messages other than a Github metadata warning:
GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data
blog.md is a markdown file.
In markdown a four space indentation represents code or preformatted text.
Kramdown will wrap this code in <pre> tag, resulting on what you actualy see on your site.
If you remove your indentation (or keep it under 4 spaces), your problem is solved.
{% for post in site.posts %}
{% if post.categories contains 'blog' %}
<div class="post">
<h3 class="title">{{ post.title }}</h3>
<p class="meta">Date: {{ post.date }}</p>
<div class="entry">
{{ post.content | strip_html | truncatewords: 100 }}
</div>
</div>
{% endif %}
{% endfor %}
Instead of using auto-generated excerpt, I'm trying to set a custom excerpt in post's YAML frontmatter.
---
layout: post
title: My Post
excerpt: My custom excerpt
---
But this custom excerpt doesn't get picked up in my post list page. My index.html template looks like this
<div class="home">
<div class="posts">
{% for post in paginator.posts %}
<div class="post py3">
<p class="post-meta">{{ post.date | date: site.date_format }}</p>
<h3 class="h1 post-title">{{ post.title }}</h3>
<p class="post-summary"> {{ post.excerpt }} </p>
</div>
{% endfor %}
</div>
{% include pagination.html %}
</div>
I'm using jekyll#3.7.2 and have jekyll-pagination plugin enabled. It should be pretty straight-forward, but I just cannot figure out what's going wrong. Am I missing anything?
Update
Actually I've made a very dumb mistake that I'm editing the wrong files. And setting excerpt actually does work.
post.excerpt is assigned by Jekyll, so, you cannot reassign it.
You can change the name of your variable to myexcerpt.
I get the same problem, and I figure out it was because of the length of the custom excerpt. If I reduce it to some amount of words, it worked. Otherwise, I will get a empty string.
I'm using the following code to add classes to the page header that correspond with the post categories, or alternatively a custom variable called imgclass that I'm using to set a custom header image on some posts:
<header class="page-header {% if page.imgclass %}{{ page.imgclass }} {% else %}{{ page.categories }} {% endif %}">
<p>some stuff</p>
</header>
The problem is that after running jekyll build it's outputting categories with no space between them. Where the categories are cat1 and cat2 jekyll will output:
<header class="page-header cat1cat2">
<p>some stuff</p>
</header>
Why is this happening and how do I resolve?
It's happening because post.categories is an array and liquid is basically just #to_s'ing it. You probably want {{ post.categories | join: ' ' }}.
I'm trying to show the top 3 blog posts in Jekyll. Using Jekyll bootstrap, I see that there is a layout for a post (a layout and an underlying theme page) - what I want to do is repeat that post layout for each of the posts.. Something like:
{% for post in site.posts %}
-- Render the post layout for this post.
{% endfor %}
I'm not sure how to do this without having to copy the content for the post layout, and either add it inside that for loop, or create a JB include, which still doesn't solve the problem 'cos I'll still have to copy and paste the post html markup.
In the end, I realised that I don't need most of the markup from the post layout, so I took what I need and embedded this in the for loop..
{% for post in site.posts %}
{% include JB/post_content %}
{% endfor %}
and post_content
<article class="unit-article layout-post">
<div class="unit-inner unit-article-inner">
<div class="content">
<div class="bd">
<div class="entry-content">
{{ post.content }}
</div><!-- entry-content -->
</div><!-- bd -->
</div><!-- content -->
</div><!-- unit-inner -->
</article>
Yup. We ended up using a similar format:
<h3>Posts</h3>
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>