Add tag nav option

Author: nielsenramon

README.md

@@ -17,6 +17,7 @@ Features:
   - Easy setup and deploying.
   - Enlarge images on click.
   - Filter on tags.
+  - Optional tag navigation.
   - Frequently updated with new versions.
   - Many social media links supported.
   - Media embed for videos.

_assets/stylesheets/modules/_header.scss

@@ -32,6 +32,7 @@
     a {
       font-size: 18px;
       color: $header-link-color;
+      cursor: pointer;
       svg {
         width: 16px;
         height: 16px;
@@ -44,6 +45,22 @@
   }
 }
 
+.header-tags {
+  padding: 0;
+  margin: 30px 0 0;
+  list-style: none;
+  li {
+    display: inline-block;
+    padding-right: 10px;
+    a {
+      display: inline-block;
+      color: $header-link-color;
+      text-decoration: none;
+      &:hover { color: $header-link-color-hover; }
+    }
+  }
+}
+
 @include breakpoint(extra-small) {
   .header-nav {
     text-align: center;
@@ -59,4 +76,12 @@
       }
     }
   }
+  .header-tags {
+    margin: 20px 0 0;
+    text-align: center;
+
+    li {
+      padding: 0 5px;
+    }
+  }
 }

_config.yml

@@ -3,26 +3,26 @@
 blog_theme: light # Or use dark
 name: Chalk
 paginate: 25
-url: # add your site url (format: https://example.com)
+url: http://chalk.nielsenramon.com
 
 
 # Optional settings
 
-theme_toggle: false # Change to true if you wish to show an icon in the navigation for dynamic theme toggling
-about_enabled: false # Change to true if you wish to show an icon in the navigation that redirects to the about page
-baseurl: # Set if blog doesn't sit at the root of the domain (format: /blog)
-discus_identifier: # Add your Disqus identifier
-ga_analytics: # Add your GA Tracking Id
+theme_toggle: true # Change to true if you wish to show an icon in the navigation for dynamic theme toggling
+about_enabled: true # Change to true if you wish to show an icon in the navigation that redirects to the about page
+discus_identifier: chalk-1 # Add your Disqus identifier
+ga_analytics: UA-28631876-6 # Add your GA Tracking Id
 local_fonts: false # Change to true if you wish to use local fonts
 rss_enabled: true # Change to false if not
 scrollappear_enabled: true # Change to false to disable
+tag_nav_enabled: true # Change to true if you wish to show an additional 'tag-list' navigation below the header
 social:
-  dribbble: # Add your Dribbble handle
+  dribbble: nielsenramon # Add your Dribbble handle
   facebook: # Add your Facebook handle
   flickr: # Add your Flickr handle
-  github: # Add your GitHub handle
+  github: nielsenramon # Add your GitHub handle
   linkedin: # Add your LinkedIn handle
-  twitter: # Add your Twitter handle
+  twitter: nielsenramon # Add your Twitter handle
   email: # Add your Email address
   bitcoin: # Add your Bitcoin link or address
   ethereum: # Add your Ethereum link or address

_includes/head.html

@@ -62,5 +62,5 @@
     {% endif %}
 
   {% endif %}
-  
+
 </head>

_includes/navigation.html

@@ -178,3 +178,17 @@
     {% endif %}
   </ul>
 </nav>
+
+{% if site.tag_nav_enabled %}
+  <ul class="header-tags">
+    {% assign tags = site.tags | sort %}
+    {% for tag in tags %}
+      {% if forloop.index > 10 %}
+        <li>...</li>
+        <li><a href="/tags">Show all</a></li>
+        {% break %}
+      {% endif %}
+        <li><a href="{{ 'tag/' | relative_url }}{{ tag[0] }}">{{ tag[0] | capitalize }}</a></li>
+    {% endfor %}
+  </ul>
+{% endif %}

_posts/2017-12-22-configuring-chalk.md

@@ -39,6 +39,7 @@ ga_analytics: # Add your GA Tracking Id
 local_fonts: false # Change to true if you wish to use local fonts
 rss_enabled: true # Change to false if not
 scrollappear_enabled: true # Change to false to disable
+tag_nav_enabled: false # Change to true if you wish to show an additional 'tag-list' navigation below the header
 social:
   dribbble: # Add your Dribbble handle
   facebook: # Add your Facebook handle