redesign archive pages & edit readme

README.md

@@ -15,7 +15,9 @@ $ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
 
 ### Enable
 
-Modify `theme` setting in `_config.yml` to `icarus`.
+1. Rename `themes\icarus\_config.yml.example` to `themes\icarus\_config.yml`;
+2. Copy `themes\icarus\_config.yml.site.example` to your hexo blog's root directory and rename it to `_config.yml`;
+3. Then modify `theme` setting in `_config.yml` to `icarus`.
 
 ### Update
 
@@ -27,11 +29,13 @@ git pull
 ## Configuration
 
 ### Theme configuration example
-``` yml
+```r
 # Header
 menu:
   Home: /
   Archives: /archives
+  Categories: /categories # -> you need to add extra page to enable this, please see the config below.
+  Tags: /tags # -> you need to add extra page to enable this, please see the config below.
   About: /about
 
 # Content
@@ -46,10 +50,11 @@ widgets:
 - tag
 - tagcloud
 - archive
+thumbnail: true
 
 # Contacts
 contacts:
-  github: http://github.com/ppoffice
+  github: http://github.com/ppoffice/hexo-theme-icarus
   twitter: '#'
   facebook: '#'
   dribbble: '#'
@@ -68,15 +73,17 @@ fb_admins:
 fb_app_id:
 ```
 
+- **excerpt_link** - Cooperate with `<!-- more -->` tag to show only part of the article in index pages.
 - **fancybox** - Enable [Fancybox].
 - **contacts** - Your social network links, RSS link, etc.
 - **widgets** - Widgets displaying in sidebar.
+- **thumbnail** - Whether to show post thumbnails in the sidebar and archive pages.
 - **links** - Links displayed in the link widget.
 - **google_analytics** - Google Analytics ID.
 - **favicon** - Favicon path.
 
 ### Site configuration example
-``` yml
+```r
 # Site
 title: Icarus
 subtitle:
@@ -100,11 +107,23 @@ disqus_shortname:
 - **location** - Where you live in.
 - **disqus_shortname** - Your Disqus shortname.
 
+## Custom Categories & Tags Pages
+
+To enable custom categories page and tags page, just copy the `categories` folder and `tags` folder under your theme's `_source` foler into your site's `source` folder. Then edit theme's _config.yml and add the following lines: 
+```r
+# Header
+menu:
+  ...
+  Categories: categories # -> add this line
+  Tags: tags # -> and add this line
+  ...
+```
+
 ## Languages
 
 English and Simplified Chinese are the default languages of the theme. You can add translations in the `languages` folder and change the default language in blog's `_config.yml`.
 
-``` yml
+```r
 language: zh-CN
 ```
 
@@ -116,12 +135,20 @@ A nice place to show yourself. You can add your own information in your site's `
 
 ![](http://ppoffice.github.io/hexo-theme-icarus/gallery/profile.png "")
 
+### Post Banner & Thumbnail
+
+Thanks to [atika](https://github.com/atika), you can now add thumbnails and banners to every post to create better reading experience.
+
 ### Responsive Layout
 
 Icarus knows on what screen size you are browsering the website, and reorganize the layout to fit your device.
 
 ![](http://ppoffice.github.io/hexo-theme-icarus/gallery/responsive.jpg "")
 
+### Custom Categories & Tags Pages
+
+Get your categories and tags listed in single pages to make your blog more methodic.
+
 ### Fancybox
 
 Icarus uses [Fancybox] to showcase your photos. You can use Markdown syntax or fancybox tag plugin to add your photos.
@@ -161,3 +188,4 @@ All of them are enabled by default. You can edit them in `widget` setting.
 [Fancybox]: http://fancyapps.com/fancybox/
 [Font Awesome]: http://fontawesome.io/
 [Grunt]: http://gruntjs.com/
+

_config.yml.example

@@ -2,6 +2,8 @@
 menu:
   Home: /
   Archives: /archives
+  Categories: /categories
+  Tags: /tags
   About: /about
 
 # Content
@@ -18,12 +20,9 @@ widgets:
 - archive
 thumbnail: true
 
-# Additional Stylesheet
-customstylesheet: 'custom'
-
 # Contacts
 contacts:
-  github: http://github.com/ppoffice
+  github: http://github.com/ppoffice/hexo-theme-icarus
   twitter: '#'
   facebook: '#'
   dribbble: '#'

_source/categories/index.md

@@ -0,0 +1,3 @@
+title: "Categories"
+layout: "categories"
+---

_source/tags/index.md

@@ -0,0 +1,3 @@
+title: "Tags"
+layout: "tags"
+---

layout/_partial/archive-post.ejs

@@ -0,0 +1,17 @@
+<article class="archive-article archive-type-<%= post.layout %>">
+  <div class="archive-article-inner">
+    <% if(theme.thumbnail == true) { %>
+    <div class="archive-article-thumbnail">
+      <%- partial('post/thumbnail.ejs', {post: post}) %>
+    </div>
+    <% } %>
+    <header class="archive-article-header">
+      <%- partial('post/title', {class_name: 'archive-article-title'}) %>
+      <% if(archive) { %>
+        <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MMM D'}) %>
+      <% } else { %>
+        <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'YYYY MMM D'}) %>
+      <% } %>
+    </header>
+  </div>
+</article>

layout/_partial/archive.ejs

@@ -1,28 +1,43 @@
-<% if (!theme.groupByYear){ %>
+<% switch (type) {
-  <% page.posts.each(function(post){ %>
+    case 'archive':
-    <%- partial('article', {post: post, index: true}) %>
+    var last;
-  <% }) %>
+    page.posts.each(function(post, i){
-  <% if (page.total > 1){ %>
+    var year = post.date.year();
-    <nav id="page-nav">
+    if (last != year){
-      <%- paginator({
+      if (last != null){ %>
-        prev_text: '&laquo; ' + __('nav.prev'),
+        </div></section>
-        next_text:  __('nav.next') + ' &raquo;'
+      <% }
-      }) %>
+      last = year; %>
-    </nav>
-  <% } %>
-<% } else { %>
-  <% var last; %>
-  <% page.posts.each(function(post, i){ %>
-    <% var year = post.date.year(); %>
-    <% if (last != year){ %>
-      <% last = year; %>
       <div class="archive-year-wrap">
-          <i class="fa fa-calendar"></i>
         <a href="<%- url_for('archives/' + year) %>" class="archive-year"><%= year %></a>
       </div>
+      <section class="archives-wrap">
+        <div class="archives">
     <% } %>
-    <%- partial('article', {post: post, index: true}) %>
+    <%- partial('archive-post', {post: post, archive: true}) %>
-  <% }) %>
+  <% });
+    if (page.posts.length){ %>
+    </div></section>
+  <% }
+    if (page.total > 1){ %>
+      <nav id="page-nav">
+        <%- paginator({
+          prev_text: '&laquo; ' + __('nav.prev'),
+          next_text: __('nav.next') + ' &raquo;'
+        }) %>
+      </nav>
+    <% }
+    break;
+  case 'category': %>
+    <section class="archives-wrap">
+    <div class="archive-category-wrap">
+      <span class="archive-category"><%= page.category %></span>
+    </div>
+    <div class="archives">
+    <% page.posts.each(function (post, i) { %>
+      <%- partial('archive-post', {post: post, archive: false}) %>
+    <% }); %>
+    </div></section>
     <% if (page.total > 1){ %>
       <nav id="page-nav">
         <%- paginator({
@@ -30,5 +45,38 @@
           next_text: __('nav.next') + ' &raquo;'
         }) %>
       </nav>
-  <% } %>
+    <% }
-<% } %>
+    break;
+  case 'tag': %>
+    <section class="archives-wrap">
+    <div class="archive-tag-wrap">
+      <span class="archive-tag">#<%= page.tag %></span>
+    </div>
+    <div class="archives">
+    <% page.posts.each(function (post, i) { %>
+      <%- partial('archive-post', {post: post, archive: false}) %>
+    <% }); %>
+    </div></section>
+    <% if (page.total > 1){ %>
+      <nav id="page-nav">
+        <%- paginator({
+          prev_text: '&laquo; ' + __('nav.prev'),
+          next_text: __('nav.next') + ' &raquo;'
+        }) %>
+      </nav>
+    <% }
+    break;
+  default:
+    page.posts.each(function(post){ %>
+      <%- partial('article', {post: post, index: true}) %>
+    <% })
+    if (page.total > 1){ %>
+      <nav id="page-nav">
+        <%- paginator({
+          prev_text: '&laquo; ' + __('nav.prev'),
+          next_text: __('nav.next') + ' &raquo;'
+        }) %>
+      </nav>
+    <% }
+    break;
+} %>

layout/_partial/header.ejs

@@ -29,11 +29,4 @@
       </tr>
     </table>
   </div>
-  <% if(page.category || page.archive) { %>
-  <div id="header-sub" class="header-sub header-inner">
-    <div class="outer">
-      <%- list_categories({depth: 1}) %>
-    </div>
-  </div>
-  <% } %>
 </header>

layout/_partial/mobile-nav.ejs

@@ -1,5 +0,0 @@
-<nav id="mobile-nav">
-  <% for (var i in theme.menu){ %>
-    <a href="<%- url_for(theme.menu[i]) %>" class="mobile-nav-link"><%= i %></a>
-  <% } %>
-</nav>

layout/archive.ejs

@@ -1 +1 @@
-<%- partial('_partial/archive', {index: true}) %>
+<%- partial('_partial/archive', {type: 'archive', index: true}) %>

layout/categories.ejs

@@ -0,0 +1,10 @@
+<section class="layout-wrap">
+  <div class="layout-title">
+    <span><%= page.title %></span>
+  </div>
+  <div class="layout-wrap-inner list-categories">
+    <% if(site.categories.length) { %>
+      <%- list_categories(site.categories) %>
+    <% } %>
+  </div>
+</section>

layout/category.ejs

@@ -1 +1 @@
-<%- partial('_partial/archive', {index: true}) %>
+<%- partial('_partial/archive', {type: 'category', index: true}) %>

layout/index.ejs

@@ -1 +1 @@
-<%- partial('_partial/archive', {index: true}) %>
+<%- partial('_partial/archive', {type: '', index: true}) %>

layout/tag.ejs

@@ -1 +1 @@
-<%- partial('_partial/archive', {index: true}) %>
+<%- partial('_partial/archive', {type: 'tag', index: true}) %>

layout/tags.ejs

@@ -0,0 +1,10 @@
+<section class="layout-wrap">
+  <div class="layout-title">
+    <span><%= page.title %></span>
+  </div>
+  <div class="layout-wrap-inner tag-cloud">
+    <% if(site.tags.length) { %>
+      <%- tagcloud({min_font: 14, max_font: 28}) %>
+    <% } %>
+  </div>
+</section>

source/css/_extend.styl

@@ -1,3 +1,12 @@
+$link-dark
+  &,
+  &:visited
+    color: color-default
+    transition: 0.2s ease
+  &:hover,
+  &:visited:hover
+    color: color-link
+
 $block-caption
   text-decoration: none
   text-transform: uppercase

source/css/_partial/archive.styl

@@ -1,17 +1,17 @@
-.archives-wrap
-  margin: block-margin 0
-
 .archives
   clearfix()
   .article:first-child
     margin: 20px 0
 
-.archive-year-wrap
+.archive-year-wrap,
-  @extend $block
+.archive-category-wrap,
-  padding: 10px 20px
+.archive-tag-wrap,
-  margin: block-margin 0 -20px 0
+.layout-title
+  font-size: 1.4em
+  margin: block-margin 0 20px 0
   @media mq-mini
-    margin: (block-margin/2) 0 -20px 0
+    padding: 0 15px
+    font-size: 1.2em
   .fa
     margin-right: 3px
   .archive-year
@@ -23,32 +23,90 @@
   @extend $block-caption
 
 .archive-article
+  clearfix()
   avoid-column-break()
-
-.archive-article-inner
   @extend $block
-  padding: 10px
+  padding: 0
   margin-bottom: 15px
   
-.archive-article-title
+.archive-article-thumbnail
-  text-decoration: none
+  float: left
-  font-weight: bold
+  margin-right: 10px
-  color: color-default
+  .thumbnail
-  transition: color 0.2s
+    width: 160px
-  line-height: line-height
+    height: 90px
-  &:hover
+    display: block
-    color: color-link
+    position: relative
+    overflow: hidden
+    span
+      width: 100%
+      height: 100%
+      display: block
+    .thumbnail-image
+      position: absolute
+      background-size: cover
+      background-position: center
+    .thumbnail-none
+      background-image: url(thumbnail-default-small)
+  @media mq-mini
+    .thumbnail
+      width: 120px
+      height: 67.5px
 
-.archive-article-footer
+.archive-article-header
-  margin-top: 1em
+  padding: 10px
+  a
+    @extend $link-dark
+  
+.archive-article-title
+  font-size: 1.2em
+  line-height: 1.2em
+  @media mq-mini
+    font-size: 1em
+    line-height: 1em
+    height: 1em
+    overflow: hidden
+    display: block
 
 .archive-article-date
-  color: color-grey
-  text-decoration: none
-  font-size: 0.85em
-  line-height: 1em
-  margin-bottom: 0.5em
   display: block
+  margin-top: 8px
+  
+.layout-wrap-inner
+  &.list-categories
+    ul
+      margin-left: 15px
+      list-style: none
+      li,
+      .category-list-child
+        padding: 10px 0
+        font-size: font-size
+        border-bottom: 1px solid border-color
+        a
+          color: color-sidebar-text
+      ul, ol
+        list-style: none
+        li
+          border: none
+          &:last-child
+            padding-bottom: 0px
+    li
+      a
+        &:before
+          color: #ccc
+          content: "\f0da"
+          font-size: 12px
+          margin-right: 6px
+          font-family: FontAwesome
+          transition: 0.2s ease
+        &:hover:before
+          color: color-sidebar-text-dark
+  &.tag-cloud
+    a
+      @extend $link-dark
+      margin-right: 8px
+      &:before
+        content: '#'
 
 #page-nav
   clearfix()

source/css/_partial/sidebar.styl

@@ -56,7 +56,8 @@
       list-style: disc
   ul, ol
     list-style: none
-    li
+    li,
+    .category-list-child
       padding: 10px 0
       font-size: font-size
       border-bottom: 1px solid border-color