Add support for categories and tags

_config.yml

@@ -4,11 +4,11 @@ menu:
 
 # duoshuo comment
 duoshuo: false
-duoshuo_name: 
+duoshuo_name:
 
 # disqus comment
 disqus: false
-disqus_shortname: 
+disqus_shortname:
 
 # google analytics
-googleTrackId: 
+googleTrackId:

layout/categories.ejs

@@ -0,0 +1 @@
+<%- partial('components/categories', {index: false}) %>

layout/components/categories.ejs

@@ -0,0 +1,43 @@
+<article>
+  <h2 class="article-title <% if (page.category){ %> category<% } else if (page.category){ %> category<% } %>"><%= page.title || config.title %></h2>
+
+  <div class="categories-cloud">
+    <% site.categories.sort('name').map(function(category){  %>
+			<span class="post-categories">
+	      <i class="icon-categories"></i>
+				<a href="<%= url_for(category.path) %>" title="<%= category.name %>" rel="<%= category.length %>"><%= category.name %></a>
+	    </span>
+    <% }) %>
+  </div>
+
+  <div class="archive">
+    <% site.categories.sort('name').map(function(category){  %>
+    <div class="archive-categories">
+      <span class="post-categories">
+        <i class="icon-categories"></i>
+          <a href="<%= url_for(category.path) %>" title="<%= category.name %>" rel="<%= category.length %>"><%= category.name %></a>
+      </span>
+      <% category.posts.sort('-date').map(function(item){  %>
+        <div class="<%= item.layout %> archive">
+          <div class="archive-post">
+            <time datetime="<%= item.date.toDate().toISOString() %>">
+              <a href="<%- url_for(item.path) %>"><%= item.date.format(config.date_format) %></a>
+            </time>
+            <% if (item.link){ %>
+              <% if (item.title){ %>
+              <h3 class="archive-title"><a href="<%- url_for(item.link) %>" target="_blank"><span><%= item.title %></span></a></h3>
+              <% } else { %>
+              <h3 class="archive-title"><a href="<%- url_for(item.link) %>" target="_blank"><span><%= item.link %></span></a></h3>
+              <% } %>
+            <% } else { %>
+              <h3 class="archive-title"><a href="<%- url_for(item.path) %>"><span><%= item.title %></span></a></h3>
+            <% } %>
+          </div>
+        </div>
+      <% }) %>
+    </div>
+    <% }) %>
+
+    <%- partial('components/pagination') %>
+  </div>
+</article>

layout/tags.ejs

@@ -0,0 +1,43 @@
+<article>
+  <h2 class="article-title <% if (page.tag){ %> tag<% } else if (page.category){ %> category<% } %>"><%= page.title || config.title %></h2>
+
+  <div class="tags-cloud">
+    <% site.tags.sort('name').map(function(tag){  %>
+      <span class="post-tags">
+        <i class="icon-tags"></i>
+          <a href="<%= url_for(tag.path) %>" title="<%= tag.name %>" rel="<%= tag.length %>"><%= tag.name %></a>
+      </span>
+    <% }) %>
+  </div>
+
+  <div class="archive">
+    <% site.tags.sort('name').map(function(tag){  %>
+    <div class="archive-tags">
+      <span class="post-tags">
+        <i class="icon-tags"></i>
+          <a href="<%= url_for(tag.path) %>" title="<%= tag.name %>" rel="<%= tag.length %>"><%= tag.name %></a>
+      </span>
+      <% tag.posts.sort('-date').map(function(item){  %>
+        <div class="<%= item.layout %> archive">
+          <div class="archive-post">
+            <time datetime="<%= item.date.toDate().toISOString() %>">
+              <a href="<%- url_for(item.path) %>"><%= item.date.format(config.date_format) %></a>
+            </time>
+            <% if (item.link){ %>
+              <% if (item.title){ %>
+              <h3 class="archive-title"><a href="<%- url_for(item.link) %>" target="_blank"><span><%= item.title %></span></a></h3>
+              <% } else { %>
+              <h3 class="archive-title"><a href="<%- url_for(item.link) %>" target="_blank"><span><%= item.link %></span></a></h3>
+              <% } %>
+            <% } else { %>
+              <h3 class="archive-title"><a href="<%- url_for(item.path) %>"><span><%= item.title %></span></a></h3>
+            <% } %>
+          </div>
+        </div>
+      <% }) %>
+    </div>
+    <% }) %>
+
+    <%- partial('components/pagination') %>
+  </div>
+</article>

source/css/components/categories.styl

@@ -0,0 +1,57 @@
+$hackerRed = #f03838
+$hackerGray = #9e9e9e
+
+article
+  .categories-cloud
+    width 100%
+    margin 8rem 0
+    text-align center
+    line-height 2rem
+
+  .categories-cloud > spannot(last-child)
+    margin-right 3rem
+
+  .categories-cloud > span
+    display inline-block
+
+  .categories-cloud > span > span
+    line-height 1
+    vertical-align middle
+
+  .archive-categories
+
+  .archive-categories > spannot(last-child)
+    margin-right 3rem
+
+  .archive-categories > span
+    display inline-block
+
+  .archive-categories > span > span
+    line-height 1
+    vertical-align middle
+
+  .archive-categories, .categories-cloud
+    margin 8rem 0
+    font-size 1.3rem
+    color #9e9e9e
+
+    a
+      color $hackerGray
+      &:hover
+        color $hackerRed
+
+    i
+      vertical-align middle
+      color #9e9e9e
+      margin-right 0.5rem
+
+    .post-categories
+      margin-right 3rem
+
+      a
+        &:before
+          content "#"
+
+        &:not(:last-of-type):after
+          content ","
+          padding-right 5px

source/css/components/tags.styl

@@ -0,0 +1,57 @@
+$hackerRed = #f03838
+$hackerGray = #9e9e9e
+
+article
+  .tags-cloud
+    width 100%
+    margin 8rem 0
+    text-align center
+    line-height 2rem
+
+  .tags-cloud > spannot(last-child)
+    margin-right 3rem
+
+  .tags-cloud > span
+    display inline-block
+
+  .tags-cloud > span > span
+    line-height 1
+    vertical-align middle
+
+  .archive-tags
+
+  .archive-tags > spannot(last-child)
+    margin-right 3rem
+
+  .archive-tags > span
+    display inline-block
+
+  .archive-tags > span > span
+    line-height 1
+    vertical-align middle
+
+  .archive-tags, .tags-cloud
+    margin 8rem 0
+    font-size 1.3rem
+    color #9e9e9e
+
+    a
+      color $hackerGray
+      &:hover
+        color $hackerRed
+
+    i
+      vertical-align middle
+      color #9e9e9e
+      margin-right 0.5rem
+
+    .post-tags
+      margin-right 3rem
+
+      a
+        &:before
+          content "#"
+
+        &:not(:last-of-type):after
+          content ","
+          padding-right 5px

source/css/style.styl

@@ -3,8 +3,10 @@
 @import "components/header"
 @import "components/article"
 @import "components/archive"
+@import "components/tags"
+@import "components/categories"
 @import "components/pagination"
 @import "components/footer"
 @import "components/icon"
 @import "components/syntax"
-@import "components/responsive"
+@import "components/responsive"