Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Weland
42,478 PointsJekyll capture not working?
So I finally broke down and figured I'd check out Jekyll, I am running version 3.0.1 I decided not to use the project files but "translate" how Guil Hernandez does his work to a dummy project. At first I thought maybe I was not using proper Sass but upon inspecting elements in the DOM I have noticed that the anchor tag for navigation isn't even getting assigned the "page-link-current" class. Maybe I just have a typo, I just cut myself down to one cup of coffee a day recently so its totally possible
<!-- Capture and store URL -->
{% capture location %} {{ page.url | split:'/' }} {% endcapture %}
<header class="site-header">
<div class="wrapper">
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
<nav class="site-nav">
<a href="#" class="menu-icon">
<svg viewBox="0 0 18 15">
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
</svg>
</a>
<div class="trigger">
{% for page in site.pages %}
<!-- compare page title to url -->
{% assign current = page.title | downcase %}
{% if page.title %}
<a {% if location == current %} class="page-link-current"
{% else %} class="page-link"
{% endif %} href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
{% endif %}
{% endfor %}
</div>
</nav>
</div>
</header>
.page-link {
display: block;
padding: 5px 10px;
&:not(:last-child) {
margin-right: 0;
}
&-current {
color: steelblue;
font-weight: bold;
}
margin-left: 20px;
}
1 Answer
Creative Services
6,196 PointsHey John,
I had the same issue and I was banging my head trying to figure it out...but what I found is in your capture logic at the top you can't have any spaces between closing and opening curly brackets.
so this:
{% capture location %} {{ page.url | split:'/' }} {% endcapture %}
should be:
{% capture location %}{{ page.url | split:'/' }}{% endcapture %}
Fernando Gomez
18,527 Pointsthis worked for me.....thank you William!!
Elizabeth Dutton
9,720 PointsElizabeth Dutton
9,720 PointsMine doesn't work either. I was concerned that it was because my page titles are multiple words so it might not be accounting for the space? I don't know liquid at all so this is tricky.
Meanwhile, there's this approach which is completely different: http://stackoverflow.com/questions/8340170/jekyll-automatically-highlight-current-tab-in-menu-bar
I already added a line for class: to my YAML for each page so that I could assign the class to the body tag as
<body class="{{ page.class }}">. I could just use that variable to compare instead. There may be a cleaner way to do this though.