Add highlighting active page in menu

jmslbam · jmslbam · commit b244661cb95c · 2014-05-24T15:23:11.000+02:00
diff --git a/_config.yml b/_config.yml
@@ -12,3 +12,13 @@ exclude:
   - bin
   - Phakefile.php
   - README.md
+navigation:
+- text: Commands
+  url: /commands/
+- text: Configuration
+  url: /config/
+- text: Packages
+  url: /package-index/
+- text: Blog
+  url: /blog/
+  layout: post
diff --git a/_includes/header.html b/_includes/header.html
@@ -21,21 +21,7 @@
 			<h1><a href="/">WP-CLI</a></h1>
 			<h2>A command line interface for WordPress</h2>
 
-			<nav class="main-nav">
-				<ul>
-					<li><a href="/commands/">Commands</a></li>
-					<li><a href="/config/">Configuration</a></li>
-					<li><a href="/package-index/">Packages</a></li>
-					<li><a href="/blog/">Blog</a></li>
-					<li><a href="https://github.com/wp-cli/wp-cli/wiki">Wiki</a></li>
-					<li class="align-right">
-						<a href="https://github.com/wp-cli/wp-cli" class="btn-source rounded" target="_blank"><i class="icon-github-circled"></i></a>
-					</li>
-					<li class="align-right">
-						<a href="https://twitter.com/wpcli" class="btn-twitter rounded" target="_blank"><i class="icon-twitter"></i></a>
-					</li>
-				</ul>
-			</nav>
+			{% include navigation.html %}			
 		</div>
 		</header>
 
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -0,0 +1,25 @@
+<nav class="main-nav">
+	<ul>
+	{% capture page_url %}{{ page.url | remove:'index.html' }}{% endcapture %}
+
+	{% for link in site.navigation %}
+		{% capture current %}{% assign current = nil %}{% endcapture %}
+
+		{% if page_url == link.url or page.layout == link.layout %}
+			{% assign current = 'class="active"' %}
+		{% endif %}
+
+		<li {{ current }}>
+			<a href="{{ link.url }}">{{ link.text }}</a>
+		</li>
+	{% endfor %}
+
+		<li><a target="_blank" href="https://github.com/wp-cli/wp-cli/wiki">Wiki</a></li>
+		<li class="align-right">
+			<a href="https://github.com/wp-cli/wp-cli" class="btn-source rounded" target="_blank"><i class="icon-github-circled"></i></a>
+		</li>
+		<li class="align-right">
+			<a href="https://twitter.com/wpcli" class="btn-twitter rounded" target="_blank"><i class="icon-twitter"></i></a>
+		</li>
+	</ul>
+</nav>
