My front matter:
menu_links:
- donate: "/donate"
- shop: "/shop"
My loop:
{% for menu_link in page.menu_links %}
<div><a class="menu-item" href="{{ menu_link[1] }}">{{ menu_link[0] }}</a></div>
{% endfor %}
What am I doing wrong here?
The way it is defined is parsed as: [{"donate"=>"/donate"}, {"shop"=>"/shop"}]
so you would be able to access them with:
{{page.menu_links[0]['donate']}}
{{page.menu_links[1]['shop']}}
A better one would be:
menu_links:
donate: "/donate"
shop: "/shop"
so you can access directly:
{{page.menu_links['donate']}}
{{page.menu_links['shop']}}
then your original code would work.
Solution:
{% for menu_link in page.menu_links %}
{% for item in menu_link %}
<div><a class="menu-item" href="{{ item[1] }}">{{ item[0] }}</a></div>
{% endfor %}
{% endfor %}
Each item needs to be looped through a second time in order to get the key/value pair of each menu_link.
Related
I have a bunch of documentation pages in a collection, which all have a Category, which I am using a group_by filter on like so:
{% assign docs_by_category = site.documentation | group_by: "category" %}
Then I use these groupings to create a menu structure, where items for each category are listed under a header. This is all good.
However, my problem lies in, being able to sort, which category is shown first, so I would like to be able to somehow prioritize them.
Say, if I have a the following categories: tutorials, getting started, advanced. I wouldn't want advanced to show up as the first category, but rather getting started.
The current code for generating the menu looks something like:
{% assign navurl = page.url | remove: 'index.html' %}
{% assign docs_by_category = site.documentation | group_by: "category" | reverse %}
{% for category in docs_by_category %}
<div class="category_wrapper">
<div class="category">{{ category.name }}</div>
<ul>
{% for item in category.items %}
<li class="collapsed">
<a href="{{ site.baseurl }}{{ item.url }}">
{% if item.url == navurl %}
<u>{{ item.title }}</u>
{% else %}
{{ item.title }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
TL;DR: How do I sort groups by some kind of priority?
You can use a configuration array to store categories order :
# _config.yml
categories-order:
- getting started
- tutorials
- advanced
Then :
{% assign docs_by_category = site.documentation | group_by: "category" %}
{% for cat in site.categories-order %}
{% assign currentCat = docs_by_category | where: 'name', cat | first %}
<div class="category_wrapper">
<div class="category">{{ currentCat.name }}</div>
<ul>
{% for item in currentCat.items %}
<li class="collapsed">
<a href="{{ site.baseurl }}{{ item.url }}">
{% if item.url == navurl %}
<u>{{ item.title }}</u>
{% else %}
{{ item.title }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
This implies that you reference all you categories in you config, otherwise, they will not appear in this listing.
I am trying to make a blog and I want to make id tags that correspond with each time a for loop runs (e.g. #section_1, #section_2,#section_(insert variable) ).
Is there some way to do that in Jekyll?
This should produce what you're looking for:
{% assign indices = "1|2|3" | split: "|" %}
{% for index in indices %}
<div id="{{ index }}">This is div {{ index }}</div>
{% endfor %}
You'll have to know in advance how many sections that you want created, and add each ID to the 1|2|3 bit in the first line.
Use the forloop.index
The menu part :
<ul>
{% for posts in site.posts %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
Content part :
{% for posts in site.posts %}
<h2 id="section_{{ forloop.index }}">{{ post.title }}</h2>
{{ post.content }}
{% endfor %}
I'm sure this is simple but cant find the answer.
There is a standard Jekyll/Liquid post iterator. How do i use the {% if %} statement below to put the <hr> element for each post except the last?
<ul class="post-list">
{% for post in site.posts %}
{% if post.url %}
<br>
<li>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
</li>
**** {% if post != $last %} ***** How do i do this??
<hr>
{% endif %}
{% endif %}
{% endfor %}
</ul>
Yep, there's an easy solution for this.
Liquid has the forloop object, which can be used inside a loop to access some of its properties.
One of those properties is forloop.last:
Returns true if it's the last iteration of the for loop. Returns false if it is not the last iteration.
In other words, you can just do this:
{% if forloop.last == false %}
<hr>
{% endif %}
I've got the following code in my index.html for Jekyll. I'm trying to find a way to link the categories associated with each post to the actual post themselves. So, if a post contains the category "travel" I want to click on a link that says "travel" which will bring me to all posts categorized as such.
<ul class="post-list" style="list-style-type: none;">
{% for post in paginator.posts %}
{% unless post.categories contains 'portfolio' %}
<li>
<h3>{{ post.title }}</h3>
<span class="post-meta">{{ post.date | date: "%c" }}</span>
Filed In:
{% unless p.categories == empty %}
{% for categories in post.categories %}
{{ categories }} //problem area
{% endfor %}
{% endunless %}
{{ post.excerpt }} Find out more...<br><br>
</li>
{% endunless %}
{% endfor %}
</ul>
Figured it out. For anyone else wondering how to do the same, first setup a categories.html page in your root directory. This page will list all posts that meet a specific category. It does by turning the category names into named anchor slugs as such <a href="#{{ category | first | remove:' ' }}" and then the preceding code creates the actual named anchor div which displays the post associated with that category. Finally, under the page or section where you want to display the list of categories, you present the final bit of code which links to the named anchor section in your categories.html page.
First piece of code to go into Categories.html:
<h2>Posts by Category</h2>
<ul>
{% for category in site.categories %}
<li><strong>{{ category | first }}</strong></li>
{% if forloop.last %}
{% else %}
{% endif %}
{% endfor %}
</ul>
Second piece of code to go into Categories.html:
{% for category in site.categories %}
<div class="catbloc" id="{{ category | first | remove:' ' }}">
<h2>{{ category | first }}</h2>
<ul>
{% for posts in category %}
{% for post in posts %}
{% if post.url %}
<li>
<a href="{{ post.url }}">
<time>{{ post.date | date: "%B %d, %Y" }}</time> -
{{ post.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
{% endfor %}
Third piece of code to go where you want to display your named anchor linked categories:
Filed In:
{% unless p.categories == empty %}
{% for categories in post.categories %}
{{ categories }}
{% endfor %}
{% endunless %}
Use the following CSS to prevent the sections from displaying prematurely before you click on them:
.catbloc:not(:target){
display: none;
}
Hope this helps!
I have a question in Jekyll Liquid.
I have layout, where I want to show pages from category. To show category I use page.categories variable. When I show in bracket {{page.categories}} is correct.
but I don't know, how to pass to loop?
{% for post in site.categories[page.categories] %}
<li>{{ post.title }}</li>
{% endfor %}
{% for post in site.categories[{{page.categories}}] %}
<li>{{ post.title }}</li>
{% endfor %}
Don't work.
If I passed explicite:
{% for post in site.categories['cat1'] %}
<li>{{ post.title }}</li>
{% endfor %}
It works.
I found another topic:
Jekyll site.categories.{{variable}}?
But it doesn't work.
page.categories is a list (see Page Variables), so you need to loop through it first and pass each category to the loop from your question:
{% for cat in page.categories %}
<h1>{{ cat }}</h1>
<ul>
{% for post in site.categories[cat] %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
This will first display all posts for the page's first category in descending order, then all posts for the page's second category in descending order, and so on.
Thank you. It's work.
Also I can use this code (use first on element of array, because in my case I have only one category per page):
{% assign pcat = page.categories %}
<ul>
{% for post in site.categories[pcat.first] %}
<li {% if post.url == page.url %}class="active"{% endif %}>{{ post.title }}</li>
{% endfor %}
</ul>