I am new to Jekyll and have ran into an issue.
I have the following (fragment of) index.html
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{ page.title }}</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="/images/logo.png">
</head>
<body>
<div id="wrap">
<div id="masthead">
<h1>Test</h1>
</div>
<div id="menucontainer">
<div id="menunav">
<ul>
<li><a href="/" class="current"><span>Home</span></a></li>
<li><a href="/resume.html"><span>Resume</span></a></li>
<li><a href="/blog"><span>Blog</span></a></li>
</ul>
</div>
</div>
As you can see, the menunav
div has a current
class that allows me to use css to highlight the selected page. So depending on which page is selected, that would change.
However, I would prefer not having to repeat the code for the header, footer and menus for each page of the site, so I made a _layouts/default.html
page that stores all this info. However, I cannot figure out how to change the content of the menunav
div based on which page is currently being viewed.
My guess is that you should be able to edit the yaml front matter to declare another variable, which would then allow me to insert the menu depending on the page being called (similar to {{content}}
). But, I cannot seem to figure out how to do it.
I tried replacing the menunav
div with {{menu}}
, but that did not function as expected.
As always, any help is appreciated.