I'm learning Jekyll. I finished the step by step tutorial: https://jekyllrb.com/docs/step-by-step/01-setup/
Variables seem to generate spaces before and after. Eg. item.name is now outputting the following:
Home
Blog
About
Staff
Which visually puts a space after each link. Ugly and potential for styling mishaps.
Do I have to make it, not do that? Am I OCD? Or am I doing it wrong?
Reference:
_includes/nav.html
<nav>
{% for item in site.data.nav %}
<a href="{{ item.link }}" {% if page.url==item.link %}class="current" {% endif %}>
{{ item.name }}
</a>
{% endfor %}
</nav>
that .current class
.current {
color: green;
}
_data/nav.yml
- name: Home
link: /
- name: About
link: /about.html
- name: Blog
link: /blog.html
- name: Staff
link: /staff.html
It doesn't happen to me, but this can be fixed by adding | strip after item.name like so:
_includes/nav.html
<nav>
{% for item in site.data.nav %}
<a href="{{ item.link }}" {% if page.url==item.link %}class="current" {% endif %}>
{{ item.name | strip }}
</a>
{% endfor %}
</nav>
EDIT:
Seems like in OP's case, it's caused by indentation's spacings. To fix this, you must replace any occurrence of {{ with {{-, }} with -}}, {% with {%-, and %} with -%}. Here's the reference.
Related
I am having hard time adding navbar to the github page.
I downloaded Monophase jekyll theme via this link :
http://jekyllthemes.org/themes/monophase/
I saw a navbar in the demo, but when i applied to the github.io page, I am missing navbar.
Index.markdown:
---
layout: default
---
If I set layout to default, nothing shows up and if I set to home all the posts are displaying but it does not navbar.
And there is no such thing as _data/navigation.yml in the monophase package zip I downloaded.
_site is set to .gitignore from what I received so I did not include the _site folder to the git as it was originally set, but do I need to add _site to git and create _data and navigation.yml inside this folder? to make the navigation bar?
I tried doing this but it did not work out so I'm not sure if I'm doing things right but would be nice if someone can explain what I'm doing wrong ;~;
default.html:
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
{% include head.html %}
<body>
<div class="container">
{% include header.html %}
<div>hello</div>
<main>{{ content }}</main>
{% include footer.html %}
</div>
{% if page.math %} {% include mathjax.html %} {% endif %} {% if
jekyll.environment == 'production' and site.google_analytics %} {% include
google-analytics.html %} {% endif %}
</body>
</html>
Header.html :
<header class="masthead">
<div class="masthead-title">
{{ site.title }}
<small class="tagline">{{ site.tagline }}</small>
</div>
{% if site.data.navigation %}
<nav class="nav">
<ul class="nav-list">
{% for item in site.data.navigation %}
<li class="nav-item">
<a href="{{ item.url | relative_url }}" class="{% if page.url == item.url %}current{% endif %}">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
</header>
Home.html:
---
layout: default
title:home
---
<div class="posts">
{% assign posts = site.posts %} {% if paginator %} {% assign posts =
paginator.posts %} {% endif %} {% for post in posts %}
<div class="post">
<h2 class="post-title">
{{ post.title }}
</h2>
<time datetime="{{ post.date | date_to_xmlschema }}" class="post-meta"
>{{ post.date | date_to_string }}</time
>
<p class="post-excerpt">
{% if post.description %} {{ post.description | strip_html }} {% else %}
{{ post.excerpt | strip_html }} {% endif %}
</p>
</div>
{% endfor %}
</div>
{% if paginator %}
<div class="pagination">
{% if paginator.next_page %}
<a
class="pagination-item older"
href="{{ paginator.next_page_path | relative_url }}"
>Older</a
>
{% else %}
<span class="pagination-item older">Older</span>
{% endif %} {% if paginator.previous_page %}
<a
class="pagination-item newer"
href="{{ paginator.previous_page_path | relative_url }}"
>Newer</a
>
{% else %}
<span class="pagination-item newer">Newer</span>
{% endif %}
</div>
{% endif %}
Yes, or at least it's possible, but unclear given what you've shared.
With Jekyll on your desktop, you are locally building an html directory which would be a static version of your site. This is very likely the _site folder. If this is what you did (successfully), then the contents of that directory are a complete website; *.html files, etc.. Copy the content of this folder to your Git Pages repo, and they should work as-is. _site is in .gitignore because it is a by-product of your code, and in a sense, a duplicate, just in different format.
The advantage of this route is you can view the built html and iterate on your code more quickly, without taking your site down or testing changes live. More to the point, you can open the _site folder and view index.html or similar in your browser to see how things are working. The Demo for this style wasn't working when I tried to access it, and I wasn't able to find the source code for the default implementation (which DID have a nav bar), to be able to tell you how they set it up.
The alternative route is to maintain your Git repo with Jekyll-themed files, and Github will build the site for you. Assuming up-to-date versions, this should be the same as what you did on your desktop.
For this route, I'd suggest reading documentation on how to add a menu/navigation to your _config.yml file. This is usually where the navigation is specified, but you can certainly override it or customize a navigation in supporting css files. This is also something that you'll want to consult documentation for.
I have been looking at multiple answers to similar questions here on stack overflow and other sources, but simply cannot solve my problem.
I have a page consisting of index.md which has the following frontmatter:
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
title: title
layout: default
pagination:
enabled: true
---
And this is what I do to list my post:
<!--
Here is the main paginator logic called.
All calls to site.posts should be replaced by paginator.posts
-->
{% for post in paginator.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
</h2>
</li>
{% endfor %}
</ul>
<!--
Showing buttons to move to the next and to the previous list of posts (pager buttons).
-->
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.previous_page %}
<li class="previous">
← Newer Posts
</li>
{% endif %}
{% if paginator.next_page %}
<li class="next">
Older Posts →
</li>
{% endif %}
</ul>
{% endif %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="previous">
Previous
</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">
Page: {{ paginator.page }} of {{ paginator.total_pages }}
</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
I have added the gem to plugin list and to the gem file and run bundle install, and my configuration looks like this:
pagination:
enabled: true
per_page: 3
offset: 2
permalink: '/page/:num/'
title: ':title - page :num of :max'
limit: 0
sort_field: 'date'
sort_reverse: true
However when I run bundle exec jekyll s my test post is not listed.
But if I use:
{% for post in site.posts%}
{{post.title}}
{% endfor %}
My test post is listed as I intent. Anyone who can help me towards, what I am doing wrong, I simply cannot spot it.
Do you have a specific reason for including offset: 2 in the _config.yml? This will exclude the first 2 posts from appearing in the pagination so if you don't have at least 3 posts in your project nothing will be displayed.
Try removing the offset line from your config file, rerun bundle exec jekyll serve, and see if the functionality works.
For offset usage check the jekyll-paginate-v2 README section "Offsetting posts".
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");
}
});
In my index of blog posts I'd like to grab the first image from the post to display it in the index using just liquid so it works on github pages.
I have a feeling split is the way to go, but I'm not good with liquid.
I'd like to be able to get the image url and put it in a variable to style it.
The ideal solution would be something like:
{% for post in site.posts %}
<li>
{{post.content | first_image}}
</li>
{% endfor %}
Any ideas?
You can define a custom variable to your Front Matter called "image", so it's going to work like Wordpress's posts Featured Image:
---
image: featured-image.jpg
---
Note to remember where is your image saved. In my case, I created a directory called "imagens" (PT-BR here). Then, go to your index.html and add the image to your template, wherever you want. In my site it looks like this:
<ul class="post-list">
{% for post in site.posts %}
<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>
<span class="post-meta">por</span>
<span class="post-meta">{{ post.author }}</span>
</li>
//IMAGE
<img src="{{ site.baseurl }}/imagens/{{ post.image }}">
//IMAGE
{{ post.excerpt }}
<a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}">Continuar lendo</a>
{% endfor %}
</ul>
That's it.
Some solutions to your problem :
1 - Use the Post Excerpt tag Documentation is here
Your post :
---
layout: post
title: Testing images
---
## Title
Intro Text
More intro text
Some more text blah !
Your template :
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
As your image tag appears before the excerpt_separator (\n\n = two newlines) it will be in the post excerpt.
2 - Use your post's Yaml front matter to store your image's datas
Post :
---
layout: post
title: Testing images
images:
- url: /assets/img/cypripedium-calceolum.jpg
alt: Cypripedium Calceolum
title: Cypripedium Calceolum
- url: /assets/img/hello-bumblebee.jpg
alt: Hello bumblebee !
title: Hello bumblebee !
---
Intro here yo ! <-- THIS IS THE EXCERPT
Post body begin, and first image not in excerpt
{% assign image = page.images[0] %} <-- first element of the array is zero
{% include image.html image=image %}
Some more text blah !
{% assign image = page.images[1] %}
{% include image.html image=image %}
_includes/image.html (centralized in an include for standardization, but can be in the template) :
<img src="{{ site.baseurl }}{{ include.image.url }}" alt="{{ include.image.alt }}" title="{{ include.image.title }}">
The index page :
<ul class="posts">
{% for post in site.posts %}
<li>
<span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
{{ post.excerpt }}
{% assign image = post.images[0] %}
{% include image.html image=image %}
</li>
{% endfor %}
</ul>
Got it to work. Not sure how it will scale, but this liquid code loops through all the posts and grabs the source for the first image from a post and displays that post. I tested it with multiple images and it works as expected.
<ul>
{% for post in site.posts %}
<li>
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<img " %}
{% for image in images %}
{% if image contains 'src' %}
{% if foundImage == 0 %}
{% assign html = image | split:"/>" | first %}
<img {{ html }} />
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}
{{ post.title }}
</li>
{% endfor %}
</ul>
If you just need the image URL instead of the whole thing in img tag, you can use the following method.
Install Liquid filter match_regex:
gem install match_regex
Then add it to your Jekyll config:
plugins:
- match_regex
Create a capture snippet in your template:
{% capture post_first_image %}
{% assign hero_image = page.content | match_regex: '<img .*?src="([^"]+)"' %}
{% if hero_image == nil %}
{% assign hero_image = "/placeholder-image.png" | prepend: site_base %}
{% endif %}
{{ hero_image }}
{% endcapture %}
Template:
<meta property="og:image" content="{{ post_first_image | strip }}">
You can simply remove the if condition if you don't need placeholder image.
I've taken David's answer and found a way to get just the src attribute from the img tag.
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<img " %}
{% for image in images %}
{% if image contains 'src' %}
{% if foundImage == 0 %}
{% assign html = image | split:"/>" | first %}
{% assign tags = html | split:" " %}
{% for tag in tags %}
{% if tag contains 'src' %}
<img {{ tag }} />
{% endif %}
{% endfor %}
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}
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");
}
});