I am making a simple jekyll blog and I have different categories of posts which hold different articles. At some places in my blog I want to display only the articles from that specific category. I keep my categories seperated in my _posts folder example:
---_posts
|
|-- category1
|-- category2
Inside my _posts folder I just have a folder for each category that keeps my articles. How can I display only the posts which are in catergory1 and category2, something like this:
{% for post in caregory1.posts limit: 2 %}
<div class="center-column">
<article>
<img src="../assets/images/test-img.jpg" alt="" class="test-img">
<p>12.12.2015</p>
<h1>Title</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum voluptates aperiam, repellendus est eius debitis
suscipit consequatur iure et sequi ipsum eos culpa, delectus magnam amet explicabo! Voluptatem, adipisci quam.</p>
</article>
Jekyll derives categories from a post's superdirectory.
Therefore instead of having _posts/category1, etc, organize into category1/_posts, category2/_posts, etc.
Then iterate through site.categories.category1 to render individual posts:
{% for post in site.categories.category1 %}
<h2>{{ post.title }}</h2>
// insert your code
{% endfor %}
Related
lstrip and trim options are used
Since an example is worth a thousand words:
Input template:
{% if True %}
Lorem
{% for i in range(3) %}
{{ i }}
{% endfor %}
Ipsum
{% endif %}
Of course this produce:
Lorem
0
1
2
Ipsum
My question is, what must be used to have this output:
Lorem
0
1
2
Ipsum
I tried varying the strip and trim options, and using the + and - modifier.
I just tryed to release my first Jekyll site from localhost to a live version and got some img-url problems. I have got a image folder in the root that contains a subfolder called staff where I get my staffmembers images.
My problem is that when I loop through my staff members on the staff.html
the page tryes to get the images from:
mysite/staff.html/images/staff/img1.png
... when the image accually is in:
mysite/images/staff/img1.png
The staff.html file looks like this:
{% for member in members %}
<div class="col-sm-12 col-md-10 col-lg-3">
<div class="card">
<img src="{{ member.img }}" class="card-img-top img-fluid" alt="{{member.name}}">
<div class="card-body">
<h4 class="card-title">{{ member.name }}</h4>
<ul>
<li><b>{{ member.position }} <br> {{ member.section }}</b></li>
<li> {{ member.email }} </li>
<hr>
<li>Mobil: {{ member.mobil }}</li>
<li>Kontor: {{ member.office }}</li>
</ul>
</div>
</div>
</div>
{% endfor %}
I also have a folder in the root called '_staff' that contains .md files for all staff members that looks like this:
name: Jon doe
position: supervisor
section: carpenter
email: jon#site.se
mobil: 073-000 00 00
office: 08-000 00 00
img: images/staff/img1.jpeg
any ideas how to solve?
Replace images/staff/img with /images/staff/img. The first slash tells the server to look in the root (top folder of the website).
Tip: You could/should also check that you set permalink: pretty in your _config.yml file. That should hide the .html exentsion in your URL's. Source
cupcakesTest is a folder which contains 2 markdown files. (Descriptions of cupcakes).
Its located in the project folder.
---
layout: post
title: Muffins
---
<h1>Our Cupcakessssss</h1>
<div class="cupcakes">
{{ site.cupcakesTest }}
{% for cupcake in site.cupcakesTest %}
<div class="cupcake">
<div class="image"><img src="{{ cupcake.image_path }}"/></div>
<h2>{{ cupcake.type }}</h2>
</div>
{% endfor %}
</div>
for site.cupcakesTest to be valid:
the "directory" should start with an underscore: (_cupcakesTest/)
and added as a collection in your _config.yml
# _config.yml
collections:
- cupcakesTest
Say I have following _teaser.twig partial:
<article>
<h2> {{ article.headline }} </h2>
<p> {{ article.lede }} </p>
{% if {{article.byline }} %}
<address>{{ article.byline }}</address>
{% endif %}
</article>
Which i include these ways:
<aside>
{% for article in teasrs %}
{% include '_teaser.twig' %}
{% endfor %}
</aside>
<section>
{% for article in opinion.items %}
{% include '_teaser.twig' %}
{% endfor %}
<section>
With the following data structure in a json file:
{
"article": {
"headline": "A short headline",
"lede": "A short descriptive lede paragraph"accusantium"
},
"teasers": {
"article1": {
"headline": "Some headline",
"lede": "A lede that describes the article, but without revealing too much, so that users still have a reason to click"
},
"article2": {}
},
"opinion": {
"article": {
"byline": "Anonymous"
},
"items": {
"article1: {},
"article2: {}
}
}
}
Ideally, I'd like the variable resolving to go up the scope, the same way it does in Mustache.
The desired output is:
<aside>
<article>
<h2> Some headline </h2>
<p>
A lede that describes the article,
but without revealing too much, so that
users still have a reason to click
</p>
</article>
<article>
<h2> A short headline </h2>
<p> A short descriptive lede paragraph </p>
</article>
</aside>
<section>
<article>
<h2> A short headline </h2>
<p> A short descriptive lede paragraph </p>
<address>Anonymous</address>
</article>
<article>
<h2> A short headline </h2>
<p> A short descriptive lede paragraph </p>
<address>Anonymous</address>
</article>
<section>
Unless I'm missing something, specifying the default using the default() filter isn't desirable, as I'd like the default content to be derived from the model, not the view. For instance, In the teasers, I don't want to have a fallback byline, but in the opinion section, I'd like to always show a byline, with a fallback to Anonymous, for which using default won't help with.
Use default pipe
doc : http://twig.sensiolabs.org/doc/filters/default.html
<article>
<h2> {{ article.headline|default('default value) }} </h2>
<p> {{ article.lede|default('default value) }} </p>
</article>
I've just installed Jekyll and I'm following a few tuts. I get that you define your content in a .md file in the root and that generates your html file based on the layout file you chose but what I don't get is how to split your {{ content }} up.
Say for instance I want one piece of content from my .md file in a <article> and the other in an <aside> How would I go about doing this? Code in question is pasted below. Thanks
.md file
---
layout: page
title: Page Test
permalink: /page-test/
bodyclass: page-test
---
Article content
* Hey this is my content!
Aside content
* Test links
Layout file
---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<article class="post-content">
{{ content }}
</article>
<aside>
</aside>
</div>
You can use the post.excerpt functionality.
_config.yml
excerpt_separator: "<!--more-->"
post
---
frontmatter
---
Excerpt text
<!--more-->
Body text
....
layout
---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<article class="post-content">
{% assign contentArray = page.content | markdownify | split: site.excerpt_separator %}
{{ contentArray.last }}
</article>
<aside>
{{ contentArray.first }}
</aside>
</div>
One more solution:
In frontmatter declare a variable and call it later via Liquid like so:
---
layout: page
title: Page Test
aside: "Here you can even use <strong>HTML</strong>. Even <a href='http://jekyllrb.com'>Links</a>. But it looks nasty."
---
Article content
* Hey this is my content!
Aside content
* {{ page.aside }}
You can use Liquid inside of .md-posts. And so you can use includes in a .md-post.
Example:
make a new file called aside.html inside a folder called _includes.
Put some content in it.
Call the include in your .md-post.
Code:
---
layout: page
title: Page with aside
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
{% include aside.html %}
More about includes › http://jekyllrb.com/docs/templates/#includes