I'm trying to write a static site with Jekyll that has a few layers to it. What's the best way to generate links to all subpages within a section?
For example, if I have a site structure like this:
landing
- Topic A
- Content 1
- Content 2
- Content 3
- Topic B
- Content 1
- Content 2
- Content 3
What would be the best way to create links to each of the Content pages from its Topic page? And, is there a simple way to link to all the Topic pages from the landing?
These are not posts, just static pages. It would be really great if I could just do {% for topic.each %} ...etc. and print the links out.
I would not use posts for this purpose (as yaitloutou suggests). I would read the hierarchy from the directory structure (solution 1) or create two seperate collections (solution 2). You can let the collections from solution 2 share the same layout if you want that.
1. Using pages
Create a directory structure with index.md pages and loop over the Jekyll veriable called 'site.pages' to create the menu.
index.md
topic-a/index.md
content-1/index.md
content-2/index.md
content-3/index.md
topic-b/index.md
content-1/index.md
content-2/index.md
content-3/index.md
And loop over all pages like this:
<ul>
{% assign sitepages = site.pages | sort: 'order' %}
{% for sitepage in sitepages %}
<li {% if page.url == sitepage.url %} class="active"{% endif %}>
{{ sitepage.title }}
</li>
{% endfor %}
</ul>
If you want the nested structure, you can do something like this. Or if you want only the results for Topic A, you can do this:
<ul>
{% assign sitepages = site.pages | sort: 'order' %}
{% for sitepage in sitepages %}
{% if sitepage.url contains 'topic-a' %}
<li {% if page.url == sitepage.url %} class="active"{% endif %}>
{{ sitepage.title }}
</li>
{% endif %}
{% endfor %}
</ul>
2. Using collections (simplest solution and quickest build)
Create a collection Topic A and create another collection Topic B. Your config file should look like this:
collections:
topic-a:
output: true
permalink: /topic-a/:path/
topic-b:
output: true
permalink: /topic-b/:path/
Outputting the items of one topic goes like this:
{% assign atopics = site.topic-a | sort: 'order' %}
{% for atopic in atopics %}
<li {% if page.url == atopic.url %} class="active"{% endif %}>
{{ atopic.title }}
</li>
{% endfor %}
</ul>
You should create a _topic-a and a _topic-b directory with your content-1.md, content-2.md, etc. files.
Note that both solutions have YML variables called 'order', to determine the order of appearance of the items/pages. This looks like this:
---
title: mytitle
layout: mylayout
order: 50
---
mycontent
I'll propose here 2 ways, you can determine the "best" according to your specific needs/situation, and which one sound more adapted to them.
first of all, "posts" and "pages" are basically just collections of md/html files. with some variables associated to each one.
to generate files with this structure, you can:
1. Using _posts and page.categories
put all the sub-files in _posts (the 2017-01-01- is just a place holder)
_posts/
- 2017-01-01-content-a-1.md
- 2017-01-01-content-a-2.md
- 2017-01-01-content-a-3.md
- 2017-01-01-content-b-1.md
- 2017-01-01-content-b-2.md
- 2017-01-01-content-b-3.md
add appropriate categories to each file:
2.1. for posts caontent-a-* add category: topic-a (in this order) by adding this line in the yaml front matter at top of each of them:
---
layout: page # or any appropriate layout
category: topic-a
---
2.2. for posts caontent-b-* add category: topic-b
set a premalink to ignore the date, and create the desired structure, by adding the following line to _config.yml:
defaults:
-
scope:
path: "_posts" # to all the file in posts
values:
permalink: /landing/:categories/:title.html # set this as default permalink value
you still can specify a permalinks per post in its front matter, or just add the permalink line to each md folder front matter.
the above will generate the desired structure.
loop through all the
{% for entry in site.posts %}
{% if entry.category == type-a %}
<!-- do A stuff -->
{% elsif entry.category == type-b %}
<!-- do B stuff -->
{% endif %}
{% endfor %}
2. Using collections:
it's similar to the above, but instead of using the already existent _postscollection you'll start by creating a new collection (one advantage is that you'll not need to add a date )
any of the approaches above will generate this structure inside _site
landing/
type-a/
content-a-1/
index.html
content-a-2/
index.html
...
type-b/
...
I am trying to make a navigation bar that is order by an order tag in the yaml frontmatter of the site (the site is made with jekyll). What i want to achieve is something like this (with the order value of the page next to it)
[home1] [solutions2] [talent3] [contact4]
This is the solution i am playing with. Solutions has a dropdown box when hovered over, hence the weird if divide.
{% assign pages = site.pages | sort:"order" %}
{% for page in pages %}
{% if page.categories contains "index" and page.categories <> "solutions" %}
<li>{{page.title}}</li>
{% endif %}
{% if page.categories contains "index" and page.categories contains "solutions" %}
<li><div class= "dropdown">
{{page.title}}
<div class= "dropdown-content">
<p> Our Service Solutions are:</p>
<ul>
{% for subpage in site.pages %}
... truncated ...
{% endfor %}
</ul>
</div>
</div></li>
{% endif %}
{% endfor %}
with the frontmatter
---
order: 1
categories: [ 'index', 'home' ]
---
or in the case of solutions,
---
order: 2
categories: [ 'index', 'solutions' ]
---
(both truncated for clarity)
This, however, does not work. What happens is this:
[home1][talent3][contacts4][solutions2]
does anyone know what is happening? Thank you.
I want to show a single content entry (from one content type) on a page and I want to access this page directly with a link.
So far I've created the content type "posts" (with wagon generate ...). It contains the fields "title","date" and "body". On the page "posts", all title's of the posts are listed and when you click on one of the title, you should be redirected to the subpage "post" which contains the rest of the content (depending on which post you selected).
posts.liquid:
{% extends parent %}
{% block main %}
{% for post in contents.posts%}
<li>{{ post.date }} - {{ post.titel }} </li>
{% endfor %}
{% endblock %}
This lists all posts.
post.liquid:
{% extends parent %}
{% block main %}
<h2>{{post.title}}</h2>
<h3>{{post.date}}</h3>
<p>{{post.body}}</p>
{% endblock %}
And this shoul be the template for the rest of the content on a single page.
How can I link the list elemnts to the correct post?
I'm using wagon to develop the site local.
I found a solution to my problem.
To access only one specific entry in the content type posts, you need to create a template which holds the content with the correct layout.
This means you need a file named "content-type-template.liquid" and this file has to be placed in a folder (in my case named "post") to define the parent:
/posts.liquid # Holds a list of all Posts
/post/content-type-template.liquid # Holds the layout for only one post
Also in the top of content-type-template.liquid you need to define the content-type and the slug:
---
title: Post Template
content_type: post
slug: content_type_template
---
The fields of the content type are now reachable with the following syntax:
{% extends parent %}
{% block main %}
<h2>{{post.title}}</h2>
<h3>{{post.date}}</h3>
<p>{{post.body}}</p>
{% endblock %}
If the content type is for example named "product", you need to rename everything above called "post" with "product".
Finally you can reach a single entry with it's slug.
{% extends parent %}
{% block main %}
{% for post in contents.posts%}
<li>{{ post.date }} - {{ post.titel }} </li>
{% endfor %}
{% endblock %}
Here are some links that helped me:
http://www.tommyblue.it/2011/02/28/how-to-build-a-website-with-locomotive-cms-from-scratch/
http://doc.locomotivecms.com/references/api/objects/content-entry
My blog is built with Jekyll on Github. In the navigation bar, the default order is Pages, Messages, About, Archives. I want to change the list to Pages, Archives, About, Messages. What should I do?
I think it is related to the code below
{% assign pages_list = site.pages %}
I think site.pages is what I should change, but I don't know how.
You can create custom order of your menu items like this:
In your pages front matter add the order field (you can name it as you prefer)
---
layout: default
published: true
title: Page title
order: 1
---
When getting pages, apply the 'sort' filter
{% assign sorted_pages = site.pages | sort:"order" %}
{% for node in sorted_pages %}
<li>{{node.title}}</li>
{% endfor %}
You'll end up with an ordered (ASC) list of pages, based on the 'order' field value you add to each page.
Update: Some ordering functionality seems to have been added to Jekyll: https://github.com/plusjade/jekyll-bootstrap/commit/4eebb4462c24de612612d6f4794b1aaaa08dfad4
Update: check out comment by Andy Jackson below – "name" might need to be changed to "path".
This seems to work for me:
{% assign sorted_pages = site.pages | sort:"name" %}
{% for node in sorted_pages %}
<li>{{node.title}}</li>
{% endfor %}
name is file name. I renamed pages to 00-index.md, 01-about.md etc. Sorting worked, but pages were generated with those prefixes, which looked ugly especially for 00-index.html.
To fix that I override permalinks:
---
layout: default
title: News
permalink: "index.html"
---
Sadly, this won't work with custom attributes, because they are not accessible as methods on Page class:
{% assign sorted_pages = site.pages | sort:"weight" %} #bummer
The order of your navbar menu is determined by the HTML template in _layout (which may be pulling in HTML fragments from _includes.
It sounds like your navbar is being programatically generated from the list of pages provided in site.pages using the liquid code
{% assign pages_list = site.pages %}
If you have only a small number of pages, you may prefer to just write the list out manually. site.pages is Jekyll's alphabetical list of all pages. Nothing stops you from just hardcoding this instead:
<div class="navbar" id="page-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">EverCoding.net</a>
<ul class="nav">
<li>Pages</li>
<li>Archive</li>
<li>About</li>
<li>Messages</li>
Whereas I'm guessing at the moment you have that list generated programmatically, perhaps by following the way Jekyll-bootstrap does with liquid code:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="{{ HOME_PATH }}">{{ site.title }}</a>
<ul class="nav">
{% assign pages_list = site.pages %}
{% assign group = 'navigation' %}
{% include JB/pages_list %}
</ul>
</div>
</div>
</div>
The liquid code in this second example is handy if you really want to determine the menu each time, but if you have a static menu in a static order you are probably best coding it by hand as in my first example, rather than modifying the liquid code to sort.
If you could link to the Jekyll source, rather than the published blog, we could be more specific.
I'm using Jekyll v2.5.3 and you can also number your actual markdown files (order them that way) and since you're using the Front Matter block you can still keep the titles and permalinks as you want them.
The parser will order your page links that way.
I.e.:
01_about.md
02_photos.md
03_projects.md
99_contact.md
I made pages.yml file in the _data directory it is look like similar:
- url: pages/test.html
title: Pages
group: navigation
- url: pages/front.html
title: Front
group: navigation
And I changed the default.html (from site.pages to site.data.pages):
<ul class="nav">
{% assign pages_list = site.data.pages %}
{% assign group = 'navigation' %}
{% include JB/pages_list %}
</ul>
And now I can use this yml file for the menu.
You could see the documentation: http://jekyll.tips/jekyll-casts/navigation/
There are good examples and explanations with navigation_weight.
---
layout: page
title: About
permalink: /about/
navigation_weight: 10
---
For minima:
<div>
{% assign navigation_pages = site.pages | sort: 'navigation_weight' %}
{% for p in navigation_pages %}
{% if p.navigation_weight %}
{% if p.title %}
<a class="page-link" href="{{ p.url | relative_url }}">{{ p.title | escape }}</a>
{% endif %}
{% endif %}
{% endfor %}
</div>
For minima theme
Put:
header_pages:
- pages.md
- archive.md
- about.md
- messages.md
in _config.yml to override default order. That's all.
Minima README:
Customize navigation links
This allows you to set which pages you want to appear in the
navigation area and configure order of the links.
For instance, to only link to the about and the portfolio page,
add the following to you _config.yml:
- about.md
- portfolio.md
You can see how it works in header.html file from minima _includes.
You were on the right path. You could sort by a custom variable named, say, 'order'.
In header.html insert and extra row:
{% assign pages_list = (site.pages | sort: 'order') %}
Then replace site.pages with pages_list in the for statement:
{% for my_page in pages_list %}
{% if my_page.title %}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{% endif %}
{% endfor %}
Then add 'order' into the YAML front matter for each page, and set it a suitable value:
---
layout: page
title: About
permalink: /about/
order: 0
---
The Jekyll Bootstrap 3 template requires that you include group navigation in the Jekyll header. Building on #Wojtek's answer, you can modify JB3's pages_list to use this group field to both filter, and sort.
Before calling pages_list, sort by group:
{% assign sorted_pages = site.pages | sort:"group" %}
Then, simply change one line in pages_list:
{% if group == null or group == node.group %} -> {% if group == null or node.group contains group %}
Now you can specify the group to be navigation-00, navigation-01, without having to rename your files or set up any permalinks, and you get sorting for free.
I made a simple plugin some time ago to sort pages according to a page_order array you can define your _config.yml:
pages_order: ['index', 'summary', 'overview', 'part1', 'part2', 'conclusion', 'notes']
It exposes page.prev and page.next in templates to allow navigation:
{% if page.prev %}
<a id="previous-page" href="{{page.prev}}.html">Previous</a>
{% endif %}
{% if page.next %}
<a id="next-page" href="{{page.next}}.html">Next</a>
{% endif %}
Note: Does not work on Github Pages.
I have a network of nodes, some of which are related to one another. I'm using Jekyll to power a website, and was hoping to use liquid tags to map those relationships.
So, the way I've been trying to do this is as follows.
A, which is in the category of 1, is related to B
B, which is in the category of 2, is related to A, and C
When I visit the page for A, I'd like to see B listed as being related.
I've defined the YAML front matter as such:
title: A
category: 1
tags:
- B.html
title: B
category: 2
tags:
- A.html
- C.html
My liquid template looks like:
<h2>{{ page.title }} <span class="label important">{{ page.category }}</span></h2>
<p>Last edited: {{ post.date | date_to_string }}</p>
<p><em>{{ content }}</em></p>
<h4>Related</h4>
<ul>
{% for post in site.tag.{{ post.url }} %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
To me, that looks like it should work. In reality, it doesn't.
Suggestions are welcome!
Also, relevant Github pages are here:
https://raw.github.com/salmonhabitat/salmonhabitat.github.com/master/_posts/2011-12-12-bycatch.md
https://raw.github.com/salmonhabitat/salmonhabitat.github.com/master/_posts/2011-12-12-accidental.md
https://github.com/salmonhabitat/salmonhabitat.github.com/blob/master/_layouts/post.html
What I was intending to happen was for 'Accidental injury' to show up under 'Marine bycatch's' Related nodes...
The first problem is that posts are basically "blind" to other posts in jekyll. It's impossible to the url (or title) of one post from inside another post in jekyll, with only the id of the former. Your site.tag.{{ post.url }}, while creative, would not work :) .
First, your front matter needs to be (unfortunately) a bit more complicated to be able to accomplish that:
title: A
category: 1
related_posts:
- title: B
href: /2010/01/01/B.html
- title: C
href: /2011/11/11/C.html
Notice that I've changed the name from "tags" to "related_posts". I feel it's more clear this way.
Now you can try this code:
<h2>{{ post.title }} <span class="label important">{{ post.category }}</span></h2>
<p>Last edited: {{ post.date | date_to_string }}</p>
<p><em>{{ content }}</em></p>
{% if post.related_posts %}
<h4>Related</h4>
<ul>
{% for related_post in post.related_posts %}
<li>{{ related_post.title }}</li>
{% endfor %}
</ul>
{% endif %}
While this is a bit more verbose than your version, it has an advantage - you can specify your own title in related posts, without being forced to use B or C.
Let me know if you have problems with this, and good luck!