github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

redesign archive pages & edit readme

pull/19/merge
ppoffice 2015-05-28 09:36:20 +08:00
parent 34252daf17
commit 91ffea5c60
17 changed files with 259 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
README.md
View File

@ -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/

7
_config.yml.example
View File

@ -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: '#'

3
_source/categories/index.md Normal file
View File

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

3
_source/tags/index.md Normal file
View File

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

17
layout/_partial/archive-post.ejs Normal file
View File

@ -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>

114
layout/_partial/archive.ejs
View File

@ -1,34 +1,82 @@
<% if (!theme.groupByYear){ %>
<% 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>
<% } %>
<% } 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>
<% switch (type) {
case 'archive':
var last;
page.posts.each(function(post, i){
var year = post.date.year();
if (last != year){
if (last != null){ %>
</div></section>
<% }
last = year; %>
<div class="archive-year-wrap">
<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}) %>
<% }) %>
<% if (page.total > 1){ %>
<nav id="page-nav">
<%- paginator({
prev_text: '&laquo; ' + __('nav.prev'),
next_text: __('nav.next') + ' &raquo;'
}) %>
</nav>
<% } %>
<% } %>
<%- 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({
prev_text: '&laquo; ' + __('nav.prev'),
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;
} %>

7
layout/_partial/header.ejs
View File

@ -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>

5
layout/_partial/mobile-nav.ejs
View File

@ -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>

2
layout/archive.ejs
View File

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

10
layout/categories.ejs Normal file
View File

@ -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>

2
layout/category.ejs
View File

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

2
layout/index.ejs
View File

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

2
layout/tag.ejs
View File

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

10
layout/tags.ejs Normal file
View File

@ -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>

9
source/css/_extend.styl
View File

@ -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

110
source/css/_partial/archive.styl
View File

@ -1,17 +1,17 @@
.archives-wrap
margin: block-margin 0
.archives
clearfix()
.article:first-child
margin: 20px 0
.archive-year-wrap
@extend $block
padding: 10px 20px
margin: block-margin 0 -20px 0
.archive-year-wrap,
.archive-category-wrap,
.archive-tag-wrap,
.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-thumbnail
float: left
margin-right: 10px
.thumbnail
width: 160px
height: 90px
display: block
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-header
padding: 10px
a
@extend $link-dark
.archive-article-title
text-decoration: none
font-weight: bold
color: color-default
transition: color 0.2s
line-height: line-height
&:hover
color: color-link
.archive-article-footer
margin-top: 1em
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()

3
source/css/_partial/sidebar.styl
View File

@ -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