Update Posts under Category

_layouts/post.html

@@ -3,9 +3,11 @@ layout: default
 ---
 <h1>{{ page.title }}</h1>
 <span class="time">{{ page.date | date_to_string }}</span>
+{% if page.categories %}
 <span class="categories">
-    &raquo; {% for category in page.categories %}{{ category }}{% if forloop.last == false %}, {% endif %}{% endfor %}
+    &raquo; {% for category in page.categories %}<a href="/category/{{ category }}">{{ category }}</a>{% if forloop.last == false %}, {% endif %}{% endfor %}
 </span>
+{% endif %}
 
 <div class="content">
     <div class="post">{{ content }}</div>
@@ -23,11 +25,10 @@ layout: default
                 <ul>
                 {% endif %}
                 <li class="relatedPost">
-                    <a href="{{ site.url }}{{ post.url }}">{{ post.title }}
+                    <a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a> 
                     {% if post.categories %}
-                        (Categories: {{ post.categories | join: ', ' }})
+                        (Categories: {% for category in post.categories %}<a href="/category/{{ category }}">{{ category }}</a>{% if forloop.last == false %}, {% endif %}{% endfor %})
                     {% endif %}
-                    </a>
                 </li>
                 {% capture hasSimilar %}{{ hasSimilar }}*{% endcapture %}
                 {% assign postHasSimilar = true %}

_layouts/posts_by_category.html

@@ -0,0 +1,49 @@
+---
+layout: default
+---
+
+<header id="post-header">
+    <h1 id="post-subtitle">Articles by category: {{ page.categories }}</h1>
+</header>
+
+<div id="post-content">
+    <hr />
+    {% for category in site.categories %}
+        {% capture category_slug %}{{ category | first }}{% endcapture %}
+        {% for c_slug in category_slug %}
+            {% if c_slug == page.categories %}
+                <button class="btn btn-sm btn-default active">{{ c_slug }}</button>
+            {% else %}
+                <a href="/category/{{ c_slug }}" class="btn btn-sm btn-default">{{ c_slug }}</a>
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+    <hr />
+
+    {% if site.categories[page.categories] %}
+        {% for post in site.categories[page.categories] %}
+            {% capture post_year %}{{ post.date | date: '%Y' }}{% endcapture %}
+            {% if forloop.first %}
+                <h4>{{ post_year }}</h4><div class="list-group">
+            {% endif %}
+            
+            {% if forloop.first == false %}
+                {% assign previous_index = forloop.index0 | minus: 1 %}
+                {% capture previous_post_year %}{{ site.categories[page.categories][previous_index].date | date: '%Y' }}{% endcapture %}
+                {% if post_year != previous_post_year %}
+                    </div><h4>{{ post_year }}</h4><div class="list-group">
+                {% endif %}
+            {% endif %}
+            
+            <ol class="posts">
+                <li><a href="{{ post.url }}">{{ post.title }}</a> &raquo; <i><span>{{ post.date | date_to_string }}</span></i></li>
+            </ol>
+
+            {% if forloop.last %}
+                </div>
+            {% endif %}
+        {% endfor %}
+    {% else %}
+        <p>There are no posts in this categories.</p>
+    {% endif %}
+</div>

_posts/2013-12-23-welcome-to-simply-grey.markdown

@@ -2,7 +2,7 @@
 layout: post
 title:  "Welcome to Simply Grey"
 date:   2013-12-23 00:18:23 +0700
-categories: [simplygrey]
+categories: [jekyll]
 ---
 SimplyGrey is a simple, easy to use theme for Jekyll that compromises of mainly grey colours. A lot of people enjoy the simplistic look of grey and also find it easier to read.
 

_posts/2016-04-19-welcome-to-jekyll.markdown

@@ -2,7 +2,7 @@
 layout: post
 title:  "Welcome to Jekyll!"
 date:   2013-02-19 21:28:15 +0700
-categories: [jekyll, update]
+categories: [jekyll]
 ---
 You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
 

category/bash.md

@@ -0,0 +1,6 @@
+---
+layout: posts_by_category
+categories: bash
+title: Bash
+permalink: /category/bash
+---

category/django.md

@@ -0,0 +1,6 @@
+---
+layout: posts_by_category
+categories: django
+title: Django
+permalink: /category/django
+---

category/jekyll.md

@@ -0,0 +1,6 @@
+---
+layout: posts_by_category
+categories: jekyll
+title: Jekyll
+permalink: /category/jekyll
+---

category/python.md

@@ -0,0 +1,6 @@
+---
+layout: posts_by_category
+categories: python
+title: Python
+permalink: /category/python
+---

category/ruby.md

@@ -0,0 +1,6 @@
+---
+layout: posts_by_category
+categories: ruby
+title: Ruby
+permalink: /category/ruby
+---