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>
Related
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>
I have a basic website set up with Django and have been following the sentdex tutorials. I cannot figure out how to include the blog posts (I'm assuming this would be either blog.html or post.html) in the bootstrap 'about' section, which I Have renamed blog. Basically, I want the blog posts (derived from the database) to appear here in the 'about' section in bootstrap, rather than at the bottom or in a separate page.
I have an 'aboutme' app (main website) that contains the home.html
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website:
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
{%block blogcontent%}
{% endblock %}
..and a header.html which contains the whole index.html of the bootstrap site itself. Below is the about section of the bootstrap websit about/blog section that includes the django templating logic (block content)
<!-- About Section (Blog)-->
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">Blog</h2>
<hr class="star-light mb-5">
<div class="row">
<div class="col-lg-4 ml-auto">
<p class="lead">This is the blog section</p>
{%block blogcontent%}
{%endblock %}
</div>
<div class="col-lg-4 mr-auto">
<p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
</div>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fa fa-download mr-2"></i>
Download Now!
</a>
</div>
</div>
</section>
Finally, I have another app called 'blog', and inside the templates/blog directory for that app:
post.html and blog.html
blog.html
{% extends "aboutme/header.html" %}
{%block content %}
{% for post in object_list %}
<h5>{{post.date|date:"Y-m-d"}}{{post.title}}</h5>
{% endfor %}
{% endblock %}
post.html
{% extends "aboutme/header.html" %}
{%block content %}
<h3>{{post.title}}</h3>
<h6>on{{post.date}}</h6>
{{post.body|safe|linebreaks}}
{% endblock %}
at the moment when I type http://127.0.0.1:8000/blog ...the blog posts appear at the bottom of the page, or wherever I place the {%block content %}{% endblock %} (but it only seems to work at the bottom of the page).
How do I get the blog posts to appear in the 'about me' section of the bootstrap website?
I'd also love an explanation on what exactly the home.html page does and can it be named anything or does it have to be 'home'. Is there where everything is defined in terms of what is displayed, and how does it work?
Edit/Design your codes like that:
Html stuff for index or aboutme/header.html
// codes here
{% block blogcontent %}
{% include 'path/blog.html' %}
{% enblock %}
// codes here
{% block postcontent %}
{% include 'path/post.html' %}
{% enblock %}
<!-- end -->
when you call 127.0.0.1:8000, everything will be available there.
and for other links, if you don't want to display the blog or post block,
just use {% block blogcontent %}{% endblock %} {% block postcontent %}{% endblock %} whitout anything inside
I've just created a portfolio collection in Jekyll and I've managed to include extra html sections on my single-project.html layout with a simple Liquid syntax.
Those extra html sections came to the rescue so that a single project's page contents would not explicit have to reside within a unique container/wrapper defined for the {{ content }} variable.
So (visually speaking) I can put any html stuff within a <section></section> and style it accordingly in a way the single-project.html layout can be enriched with fullwidth container/elements and so on. However, I'm stuck with the possibility of injecting fullwidth contents only above and bellow the {{ content }} variable.
Would there be a workaround to achieve a dynamic layout structure to include sections on a page in Jekyll?
In a project.md document
For each single project I want to have extra html sections, I define in the document's front-matter the names of the html files I'd {% include %} in a single-project.html layout.
---
### Project Details
layout: project
title: Cards Mockup project
# Project Extra Sections
sections_top:
sections: ['section-intro.html', 'section-services-provided.html']
#
sections_bottom:
sections: ['section-fullwidth-figure.html']
---
In the single-project.html layout
I conditionally include the html sections provided earlier on each document's front-matter like bellow:
<div class="main-container">
{% if page.sections_top %}
<div class="container-fluid no-pad">
{% assign sections_top = page.sections_top['sections'] %}
{% for section in sections_top %}
{% include {{ section }} %}
{% endfor %}
</div>
{% endif %}
<!-- Section main content -->
<section class="article-body">
<div class="container">
<div class="row">
<div class="col-sm-12">
{{ content }}
</div>
</div>
</div><!-- end .container -->
</section><!-- end section main content -->
{% if page.sections_bottom %}
<div class="container-fluid no-pad">
{% assign sections_bottom = page.sections_bottom['sections'] %}
{% for section in sections_bottom %}
{% include {{ section }} %}
{% endfor %}
</div>
{% endif %}
</div><!-- end .main-container -->
Here's a screenshot: https://cloudup.com/cK-_jbTdTqU (everything in between the fullwidth images is the {{ content }}, the fullwidth images are html sections.
I guess you want something like this: https://github.com/y7kim/agency-jekyll-theme/blob/gh-pages/_layouts/default.html
You can just replace one of the includes with your {{ content }} tag.
If you (really) want the content editor to be able to select the sections and their order, you have to create a YAML array with the section names on top of your .md file and loop through them.
I'm looking to make the front page of my Jekyll site have the most recent post followed by links to the 3 or so other most recent posts. I would have thought that this would do so:
<!-- first post -->
{% for post in site.posts[1..3] %}
<!-- link to posts -->
{% endfor %}
How can I get the second through fourth posts?
Try this:
{% for post in site.posts limit:3 offset:1 %}
<!-- link to posts -->
{% endfor %}
I created a landing page for my octopress website and I'd like to have the most recent blog post displayed on the home page, but just the most recent blog. I am not sure quite how to proceed. Is there a code like {% include post %} that will allow me to do this?
Thanks.
As per usual, I tend to find the solution after I ask it.
On home page:
<div class="blog-index">
{% assign post = site.posts.first %}
{% assign content = post.content %}
{% include custom/asides/recent_post.html %}
</div>
In separate document saved to custom/asides/recent_post.html:
<h2 class="entry-title">
{% if post.title %}
{{ post.title }}
{% endif %}
</h2>
<div class="entry-content">{{ content | excerpt }}</div>
<a class="btn btn-default" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
Found solution here: https://gist.github.com/nimbupani/1421828