Implement navigation hilight

_config.yml

@@ -26,8 +26,11 @@ navigation:
 - text: Archive
   url : /archive/
 
+
 # Author Details
 author:         'Abdel Raoof Olakara'
+
+#Social Media links
 linkedin:       'https://ae.linkedin.com/in/olakara/'
 twitter:        'https://twitter.com/olakara'
 facebook:       'https://www.facebook.com/olakara'
@@ -36,19 +39,19 @@ gplus:          'https://plus.google.com/100425464897246255887/'
 # Google Analytics
 gahandler: 'UA-52149651-1'
 
-#if footer-links-visible is 'true' the svg-icons will be shown top on the copy right. 
+#if footer-links-visible is 'true' the svg-icons will be shown top on the copy right.
 #else the svg icons will not exist
 footersvg: 'true'
 
 footer-links:
-  dribbble: 
+  dribbble:
   email: None
-  facebook: 
-  flickr: 
-  github: 
-  instagram: 
-  linkedin: 
-  pinterest: 
+  facebook:
+  flickr:
+  github:
+  instagram:
+  linkedin:
+  pinterest:
   rss: # just type anything here for a working RSS icon, make sure you set the "url" above!
   google: None
   twitter: None
@@ -63,4 +66,4 @@ paginate_path: '/blog/page:num'
 destination: ./_site
 
 # Custom vars
-version:          0.7.10
+version:          0.8

_includes/sidemenu.html

@@ -1,9 +1,7 @@
 <aside>
-  <!-- 返回按钮 -->
   <div class="row">
     <div class="col-md-12">
     <br/>
-
         {% if page.path contains '_posts' %}
         <h1 class="text-center" style="margin-top:0px"><a href="/blog" class="icon icon-back"></a></h1>
         {% else %}
@@ -15,11 +13,16 @@ <h1 class="text-center" style="margin-top:0px"><a href="/" class="icon icon-back
       <div class="col-md-12">
         <ul class="left-nav">
         {% for link in site.navigation %}
-          <li class="left-nav-item">
-            <a href="{{link.url}}">{{link.text}}</a>
-          </li>
+          {% capture pageurl %}{{link.url}}{{"index.html"}}{% endcapture %}
+          {% if page.url == pageurl or (link.text == 'Blog' and page.id) %}
+            <li class="left-nav-item left-nav-selected">{{link.text}}</a>
+          {% else %}
+            <li class="left-nav-item">
+              <a href="{{link.url}}">{{link.text}}</a>
+            </li>
+          {% endif %}
         {% endfor %}
         </ul>
     </div>
-  </div>  
-</aside>
+  </div>
+</aside>

assets/css/app.css

@@ -1,6 +1,6 @@
 /*、Scroll-up-button*/
 .scrollToTop{
-    width:48px; 
+    width:48px;
     height:48px;
     text-decoration: none;
     position:fixed;
@@ -132,6 +132,24 @@
     background: #C53E10;
 }
 
+.purple .left-nav-selected {
+  background: #4D2488;
+}
+
+.red .left-nav-selected {
+  background: #8B162B;
+}
+
+.green .left-nav-selected {
+    background: #007700;
+}
+.blue .left-nav-selected {
+    background: #0062C4;
+}
+.orange .left-nav-selected {
+    background: #C53E10;
+}
+
 .alink {
     font-size: 18px;
 }

blog/index.html

@@ -4,8 +4,6 @@
 description: Landing Page for the blog
 bloghome: true
 ---
-
-
       <div class="container-fluid">
         <div class="row">
           <div class="hidden-xs col-md-2 col-sm-3 orange sidebar">

search.html

@@ -3,9 +3,6 @@
 title: Search
 description: Search for Jekyll Metro
 ---
-
-
-
 <form class="searh-form" role="form">
 <div id="search-form">
 	<input class="search form-control" name="q" placeholder="Search..." type="text">
@@ -19,17 +16,13 @@ <h2 class="results-title"></h2>
 <script>
 $(document).ready(function() {
     var qry = GetURLParameter('q');
-		var data = [
-		{% for post in site.posts %}
-		{
+		var data = [{% for post in site.posts %}{
 		"title"    : "{{ post.title | escape }}",
 		"category" : "{{ post.category }}",
 		"tags"	   : "{{post.tags | array_to_sentence_string}}",
 		"url"      : "{{ post.url }}",
-		"date"     : "{{ post.date | date: "%B %d, %Y" }}"
-		} {% if forloop.last %}{% else %},{% endif %}
-		{% endfor %}
-		];
+		"date"     : "{{ post.date | date: "%B %d, %Y" }}"}{% if forloop.last %}{% else %},{% endif %}{% endfor %}];
+
     var x = $(".search").jekyllSearch({
 			      jsonData            : null,
             template            : '<li><h4><a href="{url}" title="{title}">{title}</a></h4>Posted on {date}<br>Tags: {tags} </li>',
@@ -38,6 +31,7 @@ <h2 class="results-title"></h2>
             limit               : '10',
             noResults           : '<h3>Your search did not match any documents.</h3>Suggestions:<ul><li>Make sure that all words are spelled correctly.</li><li>Try different keywords.</li><li>Try more general keywords.</li><li>Try fewer keywords.</li></ul>'
      });
+
      if(qry) {
 			$(".search").val(qry).trigger('keyup').focus();
      }

search.json

@@ -1,14 +1,10 @@
 ---
 layout: none
 ---
-[
-{% for post in site.posts %}
-{
+[{% for post in site.posts %}{
 "title"    : "{{ post.title | escape }}",
 "category" : "{{ post.category }}",
 "tags"	   : "{{post.tags | array_to_sentence_string}}",
 "url"      : "{{ post.url }}",
-"date"     : "{{ post.date | date: "%B %d, %Y" }}"
-} {% if forloop.last %}{% else %},{% endif %}
-{% endfor %}
-]
+"date"     : "{{ post.date | date: "%B %d, %Y" }}"}
+{% if forloop.last %}{% else %},{% endif %}{% endfor %}]

sitemap.xml

@@ -8,7 +8,6 @@ layout: none
         <loc>{{site.url}}{{ post.url | remove: 'index.html' }}</loc>
     </url>
     {% endfor %}
-
     {% for page in site.pages %}
     {% if page.layout != nil %}
     {% if page.layout != 'feed' %}