It's been all the morning having this situation and I'm going crazy with it.
I have 2 files, a.html and b.html, I created a Jekyll tag with the name render_menu_options, the parent_name parameter returns name of a subdirectory of the actual menu, the parent_name value is passed in the route_filter parameter of the include function, but in the render_menu_options the actual value is always the name of the parameter, in this case include.route_filter
a.html
{% render_menu_options level:2 iterator:item sort:menu_order level_name:parent_name %}
<div class="menu-header">
{{ item.text }}
</div>
<ul class="menu-container">
<li>
{% assign abc = parent_name %}
parent_name: {{ abc }}
</li>
{% include s.html route_filter=parent_name %}
</ul>
{% endrender_menu_options %}
b.html
<ul class="menu-container">
{% render_menu_options level:3 iterator:subitem part_name:include.route_filter part_number:1 sort:menu_order %}
<li>
<a href="{{ subitem.url }}">
{{ subitem.text }}
</a>
</li>
{% endrender_menu_options %}
</ul>
It is possible to pass the value of the parameter to the tag?
Difficult to spot where is the real problem without your plugin's code.
You can always try to put curly braces around your variable name.
{% render_menu_options level:3 iterator:subitem
part_name:{{ include.route_filter }} part_number:1 sort:menu_order %}
Related
Firstly, I don't know anything about HTML. I am trying to build a website using Jekyll and found a template for the website, to which I am making modifications.
I have the following code:
{% for publi in site.data.publist %}
{% assign even_odd = number_printed | modulo: 2 %}
{% if even_odd == 0 %}
<div class="row">
{% endif %}
<div>
<ol>
<li>{{ publi.title }}</li>
<!-- <img src="{{ site.url }}{{ site.baseurl }}/images/pubpic/{{ publi.image }}" class="img-responsive" width="33%" style="float: left" />
--> <p>{{ publi.description }}</p>
<p><em>{{ publi.authors }}</em></p>
<p><strong>{{ publi.link.display }}</strong></p>
<!-- <p class="text-danger"><strong> {{ publi.news1 }}</strong></p>
<p> {{ publi.news2 }}</p> -->
</ol>
</div>
{% assign number_printed = number_printed | plus: 1 %}
{% if even_odd == 1 %}
</div>
{% endif %}
{% endfor %}
There is a YAML file in the site.data.publist which has a number of members, each with different fields. The for loop helps to go through all the members of the YAML file.
As you can see in the code, I am using the <ol> tag in the for loop and I have used the <li> tag for the publi.title (a field in the members of the YAML file). But all I get is one repeating for all the members in the YAML file. I have attached the output I get.
As sirko mentioned in his comment, you are generating invalid HTML.
First of all, the <ol> may only contain li as direct children. So make sure to put everything else also within the li tag.
But your real problem is that you generate the ol tags within your loop. As mentioned in the comment, your output the contains multiple lists with one element each, not one list with n elements.
In order to change that, you have to move the ol outside of the for loop. (And then make sure you still generate valid HTML => see point 1.)
I am using github to host a static site and Jekyll to generate it.
I have a menu bar (as <ul>) and would like the <li> corresponding to the current page to be assigned a different class for CSS highlighting.
So something like pseudo code:
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
Or perhaps even generate the whole <ul> in Jekyll.
How can this be done with minimal changes outside of the offending <ul>?
Yes you can do this.
To accomplish this we will take advantage of the fact that the current page is always represented by the liquid variable: page in the template, and also that each post/page has a unique identifier in its page.url attribute.
This means that we just have to use a loop to build our navigation page, and by doing so we can check page.url against every member of the loop. If it finds a match, it knows to highlight that element. Here we go:
{% for node in site.pages %}
{% if page.url == node.url %}
<li class="active">{{node.title}}</li>
{% else %}
<li>{{node.title}}</li>
{% endif %}
{% endfor %}
This works as expected. However you probably don't want all your page's in your nav bar. In order to emulate page "grouping" you can something like this:
## Put the following code in a file in the _includes folder at: ./_includes/pages_list
{% for node in pages_list %}
{% if group == null or group == node.group %}
{% if page.url == node.url %}
<li class="active">{{node.title}}</li>
{% else %}
<li>{{node.title}}</li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
Now pages can be "grouped". To give a page a group you need to specify it in the pages YAML Front Matter:
---
title: blah
categories: blah
group: "navigation"
---
Finally you can use your new code!
Wherever you need your navigation to go in your template, simply "call" your include file and pass it some pages and the group you want to display:
<ul>
{% assign pages_list = site.pages %}
{% assign group = 'navigation' %}
{% include pages_list %}
</ul>
Examples
This functionality is part of the Jekyll-Bootstrap framework.
You can see exact documentation for the code outlined here: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
Finally you can see it in action within the website itself. Just look at the righthand navigation and you will see the current page is highlighted in green: Example highlighted nav link
I feel like for the simplest navigation requirement, the listed solutions are overly complex. Here's a solution that involves no front matter, javascript, loops, etc.
Since we have access to the page URL, we can normalize and split the URL and test against the segments, like so:
{% assign current = page.url | downcase | split: '/' %}
<nav>
<ul>
<li><a href='/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>
<li><a href='/blog' {% if current[1] == 'blog' %}class='current'{% endif %}>blog</a></li>
<li><a href='/contact' {% if current[1] == 'contact' %}class='current'{% endif %}>contact</a></li>
</ul>
</nav>
Of course, this is only useful if static segments provide the means to delineate the navigation. Anything more complicated, and you'll have to use front matter like #RobertKenny demonstrated.
Here's my solution which I think is the best way to highlight the current page:
Define a navigation list on your _config.yml like this:
navigation:
- title: blog
url: /blog/
- title: about
url: /about/
- title: projects
url: /projects/
Then in your _includes/header.html file you must loop through the list to check if the current page (page.url) resembles any item of the navigation list, if so then you just set the active class and add it to the <a> tag:
<nav>
{% for item in site.navigation %}
{% assign class = nil %}
{% if page.url contains item.url %}
{% assign class = 'active' %}
{% endif %}
<a href="{{ item.url }}" class="{{ class }}">
{{ item.title }}
</a>
{% endfor %}
</nav>
And because you're using the contains operator instead of the equals = operator, you don't have to write extra code to make it work with URLs such as '/blog/post-name/' or 'projects/project-name/'. So it works really well.
P.S: Don't forget to set the permalink variable on your pages.
Similar to #ben-foster's solution but without using any jQuery
I needed something simple, this is what I did.
In my front matter I added a variable called active
e.g.
---
layout: generic
title: About
active: about
---
I have a navigation include with the following section
<ul class="nav navbar-nav">
{% if page.active == "home" %}
<li class="active">Home</li>
{% else %}
<li>Home</li>
{% endif %}
{% if page.active == "blog" %}
<li class="active">Blog</li>
{% else %}
<li>Blog</li>
{% endif %}
{% if page.active == "about" %}
<li class="active">About</li>
{% else %}
<li>About</li>
{% endif %}
</ul>
This works for me as the amount of links in the navigation are very narrow.
I used a little bit of JavaScript to accomplish this. I have the following structure in the menu:
<ul id="navlist">
<li><a id="index" href="index.html">Index</a></li>
<li>About</li>
<li>Projects</li>
<li>Videos</li>
</ul>
This javascript snippet highlights the current corresponding page:
$(document).ready(function() {
var pathname = window.location.pathname;
$("#navlist a").each(function(index) {
if (pathname.toUpperCase().indexOf($(this).text().toUpperCase()) != -1)
$(this).addClass("current");
});
if ($("a.current").length == 0)
$("a#index").addClass("current");
});
My approach is to define a custom variable in the YAML front matter of the page and output this on the <body> element:
<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}>
My navigation links include the identifier of the page that they link to:
<nav>
<ul>
<li>artists</li>
<li>contact</li>
<li>about</li>
</ul>
</nav>
In the page front matter we set the page id:
---
layout: default
title: Our artists
id: artists
---
And finally a bit of jQuery to set the active link:
// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
$("a[data-page-id='" + currentPage + "']").addClass("active");
}
The navigation of your website should be an unordered list. To get the list items to lighten up when they are active, the following liquid script adds an 'active' class to them. This class should be styled with CSS. To detect which link is active, the script uses ‘contains’, as you can see in the code below.
<ul>
<li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
Getting started
</li>
...
...
...
</ul>
This code is compatible with all permalink styles in Jekyll. The ‘contains’ statement succesfully highlights the first menu item at the following URL’s:
getting-started/
getting-started.html
getting-started/index.html
getting-started/subpage/
getting-started/subpage.html
Source: http://jekyllcodex.org/without-plugin/simple-menu/
Lot's of confusing answers here.
I simply use an if:
{% if page.name == 'limbo-anim.md' %}active{% endif %}
I refer directly to the page and putting it inside the class I want to
<li><a class="pr-1 {% if page.name == 'limbo-anim.md' %}activo{% endif %} " href="limbo-anim.html">Animación</a></li>
Done. Quick.
I've been using page.path and going off the filename.
home
Lot of good answers are already there.
Try this.
I slightly alter the above answers.
_data/navigation.yaml
- name: Home
url: /
active: home
- name: Portfolio
url: /portfolio/
active: portfolio
- name: Blog
url: /blog/
active: blog
In a page -> portfolio.html (Same for all pages with a relative active page name)
---
layout: default
title: Portfolio
permalink: /portfolio/
active: portfolio
---
<div>
<h2>Portfolio</h2>
</div>
Navigation html part
<ul class="main-menu">
{% for item in site.data.navigation %}
<li class="main-menu-item">
{% if {{page.active}} == {{item.active}} %}
<a class="main-menu-link active" href="{{ item.url }}">{{ item.name }}</a>
{% else %}
<a class="main-menu-link" href="{{ item.url }}">{{ item.name }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
if you're using the Minima theme for jekyll, you only need to add a ternary on the class attribute in header.html:
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">
the full excerpt:
<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
add this to your _config.yml
header_pages:
- classes.markdown
- activities.markdown
- teachers.markdown
And then of course your css:
a.active {
color: #e6402a;
}
Here is a jQuery method to do the same
var pathname = window.location.pathname;
$(".menu.right a").each(function(index) {
if (pathname === $(this).attr('href') ) {
$(this).addClass("active");
}
});
I have a Jekyll template pulling in text from data objects.
eg.
{% for speaker_hash in site.data.2015.speakers %}
{% assign speaker = speaker_hash[1] %}
<li>
<div class="speaker">
<img class="head" src="/img/2015/speakers/sample.jpg">
<h2> {{ speaker.name}} </h2>
</div>
</li>
{% endfor %}
However I would like to have each page specify what year its for with a page.year property.
Is it possible to create the same for loop but specify the year dynamically?
eg
{% for speaker_hash in site.data.[page.year].speakers %}
Answer yes.
1 - Your page.year must be a string as hash indexes are strings. So in you front matter : year: '2015'
2 - Get speakers depending on page.year :
{% for speaker_hash in site.data[{{page.year}}].speakers %}
I am using github to host a static site and Jekyll to generate it.
I have a menu bar (as <ul>) and would like the <li> corresponding to the current page to be assigned a different class for CSS highlighting.
So something like pseudo code:
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
Or perhaps even generate the whole <ul> in Jekyll.
How can this be done with minimal changes outside of the offending <ul>?
Yes you can do this.
To accomplish this we will take advantage of the fact that the current page is always represented by the liquid variable: page in the template, and also that each post/page has a unique identifier in its page.url attribute.
This means that we just have to use a loop to build our navigation page, and by doing so we can check page.url against every member of the loop. If it finds a match, it knows to highlight that element. Here we go:
{% for node in site.pages %}
{% if page.url == node.url %}
<li class="active">{{node.title}}</li>
{% else %}
<li>{{node.title}}</li>
{% endif %}
{% endfor %}
This works as expected. However you probably don't want all your page's in your nav bar. In order to emulate page "grouping" you can something like this:
## Put the following code in a file in the _includes folder at: ./_includes/pages_list
{% for node in pages_list %}
{% if group == null or group == node.group %}
{% if page.url == node.url %}
<li class="active">{{node.title}}</li>
{% else %}
<li>{{node.title}}</li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
Now pages can be "grouped". To give a page a group you need to specify it in the pages YAML Front Matter:
---
title: blah
categories: blah
group: "navigation"
---
Finally you can use your new code!
Wherever you need your navigation to go in your template, simply "call" your include file and pass it some pages and the group you want to display:
<ul>
{% assign pages_list = site.pages %}
{% assign group = 'navigation' %}
{% include pages_list %}
</ul>
Examples
This functionality is part of the Jekyll-Bootstrap framework.
You can see exact documentation for the code outlined here: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
Finally you can see it in action within the website itself. Just look at the righthand navigation and you will see the current page is highlighted in green: Example highlighted nav link
I feel like for the simplest navigation requirement, the listed solutions are overly complex. Here's a solution that involves no front matter, javascript, loops, etc.
Since we have access to the page URL, we can normalize and split the URL and test against the segments, like so:
{% assign current = page.url | downcase | split: '/' %}
<nav>
<ul>
<li><a href='/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>
<li><a href='/blog' {% if current[1] == 'blog' %}class='current'{% endif %}>blog</a></li>
<li><a href='/contact' {% if current[1] == 'contact' %}class='current'{% endif %}>contact</a></li>
</ul>
</nav>
Of course, this is only useful if static segments provide the means to delineate the navigation. Anything more complicated, and you'll have to use front matter like #RobertKenny demonstrated.
Here's my solution which I think is the best way to highlight the current page:
Define a navigation list on your _config.yml like this:
navigation:
- title: blog
url: /blog/
- title: about
url: /about/
- title: projects
url: /projects/
Then in your _includes/header.html file you must loop through the list to check if the current page (page.url) resembles any item of the navigation list, if so then you just set the active class and add it to the <a> tag:
<nav>
{% for item in site.navigation %}
{% assign class = nil %}
{% if page.url contains item.url %}
{% assign class = 'active' %}
{% endif %}
<a href="{{ item.url }}" class="{{ class }}">
{{ item.title }}
</a>
{% endfor %}
</nav>
And because you're using the contains operator instead of the equals = operator, you don't have to write extra code to make it work with URLs such as '/blog/post-name/' or 'projects/project-name/'. So it works really well.
P.S: Don't forget to set the permalink variable on your pages.
Similar to #ben-foster's solution but without using any jQuery
I needed something simple, this is what I did.
In my front matter I added a variable called active
e.g.
---
layout: generic
title: About
active: about
---
I have a navigation include with the following section
<ul class="nav navbar-nav">
{% if page.active == "home" %}
<li class="active">Home</li>
{% else %}
<li>Home</li>
{% endif %}
{% if page.active == "blog" %}
<li class="active">Blog</li>
{% else %}
<li>Blog</li>
{% endif %}
{% if page.active == "about" %}
<li class="active">About</li>
{% else %}
<li>About</li>
{% endif %}
</ul>
This works for me as the amount of links in the navigation are very narrow.
I used a little bit of JavaScript to accomplish this. I have the following structure in the menu:
<ul id="navlist">
<li><a id="index" href="index.html">Index</a></li>
<li>About</li>
<li>Projects</li>
<li>Videos</li>
</ul>
This javascript snippet highlights the current corresponding page:
$(document).ready(function() {
var pathname = window.location.pathname;
$("#navlist a").each(function(index) {
if (pathname.toUpperCase().indexOf($(this).text().toUpperCase()) != -1)
$(this).addClass("current");
});
if ($("a.current").length == 0)
$("a#index").addClass("current");
});
My approach is to define a custom variable in the YAML front matter of the page and output this on the <body> element:
<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}>
My navigation links include the identifier of the page that they link to:
<nav>
<ul>
<li>artists</li>
<li>contact</li>
<li>about</li>
</ul>
</nav>
In the page front matter we set the page id:
---
layout: default
title: Our artists
id: artists
---
And finally a bit of jQuery to set the active link:
// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
$("a[data-page-id='" + currentPage + "']").addClass("active");
}
The navigation of your website should be an unordered list. To get the list items to lighten up when they are active, the following liquid script adds an 'active' class to them. This class should be styled with CSS. To detect which link is active, the script uses ‘contains’, as you can see in the code below.
<ul>
<li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
Getting started
</li>
...
...
...
</ul>
This code is compatible with all permalink styles in Jekyll. The ‘contains’ statement succesfully highlights the first menu item at the following URL’s:
getting-started/
getting-started.html
getting-started/index.html
getting-started/subpage/
getting-started/subpage.html
Source: http://jekyllcodex.org/without-plugin/simple-menu/
Lot's of confusing answers here.
I simply use an if:
{% if page.name == 'limbo-anim.md' %}active{% endif %}
I refer directly to the page and putting it inside the class I want to
<li><a class="pr-1 {% if page.name == 'limbo-anim.md' %}activo{% endif %} " href="limbo-anim.html">Animación</a></li>
Done. Quick.
I've been using page.path and going off the filename.
home
Lot of good answers are already there.
Try this.
I slightly alter the above answers.
_data/navigation.yaml
- name: Home
url: /
active: home
- name: Portfolio
url: /portfolio/
active: portfolio
- name: Blog
url: /blog/
active: blog
In a page -> portfolio.html (Same for all pages with a relative active page name)
---
layout: default
title: Portfolio
permalink: /portfolio/
active: portfolio
---
<div>
<h2>Portfolio</h2>
</div>
Navigation html part
<ul class="main-menu">
{% for item in site.data.navigation %}
<li class="main-menu-item">
{% if {{page.active}} == {{item.active}} %}
<a class="main-menu-link active" href="{{ item.url }}">{{ item.name }}</a>
{% else %}
<a class="main-menu-link" href="{{ item.url }}">{{ item.name }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
if you're using the Minima theme for jekyll, you only need to add a ternary on the class attribute in header.html:
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">
the full excerpt:
<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
add this to your _config.yml
header_pages:
- classes.markdown
- activities.markdown
- teachers.markdown
And then of course your css:
a.active {
color: #e6402a;
}
Here is a jQuery method to do the same
var pathname = window.location.pathname;
$(".menu.right a").each(function(index) {
if (pathname === $(this).attr('href') ) {
$(this).addClass("active");
}
});
I've been using Jekyll for a static site (so that its easy to maintain), and have been stuck at the following feature :
This is my link bar :
<ul id="links">
<li class="first"><a class="active" href="/">Home</a></li>
<li>Associate With Us</li>
<li>Media</li>
<li>Clients</li>
<li class="last">Contact Us</li>
</ul>
The active class handles the coloring. What I want is this class be applied by jekyll depending on some variable set using liquid/YAML.
Is there some easy way to go about this?
Since the bar is common to all the pages, it is now in the default layout. I could go around by using Javascript to detect the url, and do the highlighting but was wondering if there was any way of doing this in Jekyll.
I do this in two pages I have set up in Jekyll.
The first thing I do is creating an entry inside _config.yml with the information of all the pages:
# this goes inside _config.yml. Change as required
navigation:
- text: What we do
url: /en/what-we-do/
- text: Who we are
url: /en/who-we-are/
- text: Projects
url: /en/projects/
layout: project
- text: Blog
url: /en/blog/
layout: post
Then, on my main layout, I use that information to generate the navigation links. On each link, I compare the url of the link with the url of the current page. If they are equal, the page is active. Otherwise, they are not.
There's a couple special cases: all blog posts must highlight the "blog" link, and the front pages (English and Spanish) must not present the nav bar. For both cases, I rely on the fact that blog posts and front pages have specific layouts (notice that the "Blog" and "Project" links on the yaml have an extra parameter called "layout")
The navigation code is generated like this:
{% unless page.layout == 'front' %}
<ul class="navigation">
{% for link in site.navigation %}
{% assign current = nil %}
{% if page.url == link.url or page.layout == link.layout %}
{% assign current = 'current' %}
{% endif %}
<li class="{% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}">
<a class="{{ current }}" href="{{ link.url }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
{% endunless %}
I still have to remember adding an entry to _config.yaml every time I add a new page, and then restart Jekyll, but it happens very infrequently now.
I think the navigation yaml could go inside an _include called "navigation" or something similar, but I haven't tried using yaml inside those so I don't know whether it will work. In my case, since I've got a multi-lingual site, it's easier to have everything inside config (missing translations are easier to spot)
I hope this helps.
As a further extension on the work of the other, here is a way to make it work without soggy index.html showing on all your beautiful URLs:
---
navigation:
- text: Home
url: /
- text: Blah
url: /blah/
---
{% assign url = page.url|remove:'index.html' %}
{% for link in page.navigation %}
<li {% if url == link.url %}class="active"{% endif %}>
{{link.text}}
</li>
{% endfor %}
The gold is in the assign statement which gets the page URL (which naturally includes the index.html and then strips it off to match the page.navigation pretty URLs.
This may be a new feature since the question first appeared, but I've discovered this can all be done in one file:
define the navigation as a variable in the yaml header
loop over the variable using liquid
So in my _layouts/base.html I have:
---
navigation:
- text: Home
url: /index.html
- text: Travel
title: Letters home from abroad
url: /travel.html
---
<ul>
{% for link in page.navigation %}
<li {% if page.url == link.url %}class="current"{% endif %}>
{{link.text}}</li>
{% endfor %}
</ul>
Which generates this on the Home page:
<ul>
<li class="current">Home</li>
<li>Travel</li>
</ul>
And this on the Travel page:
<ul>
<li>Home</li>
<li class="current">Travel</li>
</ul>
I needed something simple, this is what I did.
In my front matter I added a variable called active
e.g.
---
layout: generic
title: About
active: about
---
I have a navigation include with the following section
<ul class="nav navbar-nav">
{% if page.active == "home" %}
<li class="active">Home</li>
{% else %}
<li>Home</li>
{% endif %}
{% if page.active == "blog" %}
<li class="active">Blog</li>
{% else %}
<li>Blog</li>
{% endif %}
{% if page.active == "about" %}
<li class="active">About</li>
{% else %}
<li>About</li>
{% endif %}
</ul>
This works for me as the amount of links in the navigation are very narrow.
Same navigation on all pages
After reading all that answers, I came up with a new and easier to maintain solution:
Add {% include nav.html %} to your _layouts/layout.html file
Add a nav.html file to your _includes folder
Add the following content to your nav.html file. It will determine if your link is on the current page and add a class of active as well as remove index.html from your link. It will also work with a subfolder like /repo-name, which is needed for GitHub gh-pages Pages branch.
<nav>
<ul class="nav">
{% assign url = page.url|remove:'index.html' %}
{% for link in site.navigation %}
{% assign state = '' %}
{% if page.url == link.url %}
{% assign state = 'active ' %}
{% endif %}
<li class="{{ state }}nav-item">
{{ link.text }}
</li>
{% endfor %}
</ul>
</nav>
Then add the nav link array to your _config.yml file as following. Mind the right indentation, as YAML is pretty picky on that (Jekyll as well).
navigation:
- text: Home
title: Back to home page
url: /index.html
- text: Intro
title: An introduction to the project
url: /intro.html
- text: etc.
title: ...
url: /foo.html
Navigation only on home - "back" for others
Assuming that the link to your "Home"-page (index.html) is the first array part inside the _config.htmls navigation array, you can use the following snippet to show the navigation to the different pages on the main/home page and a link back to the home page on all other pages:
<nav>
<ul class="grid">
{% assign url = page.url | remove:'/index.html' %}
{% assign home = site.navigation.first %}
{% if url == empty %}
{% for link in site.navigation %}
{% assign state = '' %}
{% if page.url == link.url %}
{% assign state = 'active ' %}
{% endif %}
{% if home.url != link.url %}
<li class="{{ state }}nav-item">
{{ link.text }}
</li>
{% endif %}
{% endfor %}
{% else %}
<li class="nav-item active">
{{ home.text }}
</li>
{% endif %}
</ul>
</nav>
This works for me (sorry for non-english code):
<nav>
<a href="/kursevi" {% if page.url == '/kursevi/' %} class="active"{% endif %}>Kursevi</a>
<a href="/radovi" {% if page.url == '/radovi/' %} class="active"{% endif %}>Radovi</a>
<a href="/blog" {% if page.url == '/blog/' %} class="active"{% endif %}>Blog</a>
<a href="/kontakt" {% if page.url == '/kontakt/' %} class="active"{% endif %}>Kontakt</a>
</nav>
Navigation highlighting logic is the last thing I would do in server side. I'd rather stick with nice, clean and unobtrusive approach using JS/jQuery (if this option works for you).
The elements which need to be highlighted go inside a common layout like this:
<nav>
<a id="section1" href="#">Section 1</a>
<a id="section2" href="#">Section 2</a>
<a id="section3" href="#">Section 3</a>
</nav>
In your page (or even in nested layouts) you place an element with data-ref="#section1" (in fact, any jQuery selector will work).
Now, include following JS snippet (shown as jQuery, but any framework will do) in <head>:
$(function() {
$("[data-ref]").each(function() {
$($(this).attr("data-ref")).addClass("current");
});
});
This approach is nice, because it makes no assumptions on underlying architecture, frameworks, languages and template engines.
Update: As some folks pointed out you might want to omit the $(function() { ... }) part which binds the script to DOM ready event — and just push the script down to the bottom of your <body>.
Adding to the solution of incarnate, the simplest possible line of code with jQuery is this:
$( "a[href='{{ page.url | remove: "index.html" }}']" ).addClass("current");
Works perfectly for me.
I took a simple CSS approach. First, add an identifier in the front matter...
---
layout: page
title: Join us
permalink: /join-us/
nav-class: join <-----
---
Add this as a class in <body> and your nav...
<body class="{{ page.nav-class }}">
and
<li class="{{ page.nav-class }}">...</a></li>
Then link these for all pages in CSS, e.g:
.about .about a,
.join .join a,
.contact .contact a {
color: #fff;
}
The main downside being you need to hard code the style rules.
With Jekyll 3.4.3, this works :
<ul>
{% for my_page in site.pages %}
{% if my_page.title %}
<li {% if my_page.url == page.url %} class="active" {% endif %}>
<a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}
</a>
</li>
{% endif %} {% endfor %}
</ul>