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 ### 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 ### Update
@ -27,11 +29,13 @@ git pull
## Configuration ## Configuration
### Theme configuration example ### Theme configuration example
``` yml ```r
# Header # Header
menu: menu:
Home: / Home: /
Archives: /archives 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 About: /about
# Content # Content
@ -46,10 +50,11 @@ widgets:
- tag - tag
- tagcloud - tagcloud
- archive - archive
thumbnail: true
# Contacts # Contacts
contacts: contacts:
github: http://github.com/ppoffice github: http://github.com/ppoffice/hexo-theme-icarus
twitter: '#' twitter: '#'
facebook: '#' facebook: '#'
dribbble: '#' dribbble: '#'
@ -68,15 +73,17 @@ fb_admins:
fb_app_id: fb_app_id:
``` ```
- **excerpt_link** - Cooperate with `<!-- more -->` tag to show only part of the article in index pages.
- **fancybox** - Enable [Fancybox]. - **fancybox** - Enable [Fancybox].
- **contacts** - Your social network links, RSS link, etc. - **contacts** - Your social network links, RSS link, etc.
- **widgets** - Widgets displaying in sidebar. - **widgets** - Widgets displaying in sidebar.
- **thumbnail** - Whether to show post thumbnails in the sidebar and archive pages.
- **links** - Links displayed in the link widget. - **links** - Links displayed in the link widget.
- **google_analytics** - Google Analytics ID. - **google_analytics** - Google Analytics ID.
- **favicon** - Favicon path. - **favicon** - Favicon path.
### Site configuration example ### Site configuration example
``` yml ```r
# Site # Site
title: Icarus title: Icarus
subtitle: subtitle:
@ -100,11 +107,23 @@ disqus_shortname:
- **location** - Where you live in. - **location** - Where you live in.
- **disqus_shortname** - Your Disqus shortname. - **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 ## 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`. 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 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 "") ![](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 ### Responsive Layout
Icarus knows on what screen size you are browsering the website, and reorganize the layout to fit your device. 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 "") ![](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 ### Fancybox
Icarus uses [Fancybox] to showcase your photos. You can use Markdown syntax or fancybox tag plugin to add your photos. 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/ [Fancybox]: http://fancyapps.com/fancybox/
[Font Awesome]: http://fontawesome.io/ [Font Awesome]: http://fontawesome.io/
[Grunt]: http://gruntjs.com/ [Grunt]: http://gruntjs.com/

7
_config.yml.example
View File

@ -2,6 +2,8 @@
menu: menu:
Home: / Home: /
Archives: /archives Archives: /archives
Categories: /categories
Tags: /tags
About: /about About: /about
# Content # Content
@ -18,12 +20,9 @@ widgets:
- archive - archive
thumbnail: true thumbnail: true
# Additional Stylesheet
customstylesheet: 'custom'
# Contacts # Contacts
contacts: contacts:
github: http://github.com/ppoffice github: http://github.com/ppoffice/hexo-theme-icarus
twitter: '#' twitter: '#'
facebook: '#' facebook: '#'
dribbble: '#' 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){ %> <% 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> <div class="archive-year-wrap">
<% } %> <a href="<%- url_for('archives/' + year) %>" class="archive-year"><%= year %></a>
<% } else { %> </div>
<% var last; %> <section class="archives-wrap">
<% page.posts.each(function(post, i){ %> <div class="archives">
<% 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>
<% } %> <% } %>
<%- partial('article', {post: post, index: true}) %> <%- partial('archive-post', {post: post, archive: true}) %>
<% }) %> <% });
<% if (page.total > 1){ %> if (page.posts.length){ %>
<nav id="page-nav"> </div></section>
<%- paginator({ <% }
prev_text: '&laquo; ' + __('nav.prev'), if (page.total > 1){ %>
next_text: __('nav.next') + ' &raquo;' <nav id="page-nav">
}) %> <%- paginator({
</nav> 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> </tr>
</table> </table>
</div> </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> </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 $block-caption
text-decoration: none text-decoration: none
text-transform: uppercase text-transform: uppercase

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

@ -1,17 +1,17 @@
.archives-wrap
margin: block-margin 0
.archives .archives
clearfix() clearfix()
.article:first-child .article:first-child
margin: 20px 0 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 @media mq-mini
margin: (block-margin/2) 0 -20px 0 padding: 0 15px
font-size: 1.2em
.fa .fa
margin-right: 3px margin-right: 3px
.archive-year .archive-year
@ -23,32 +23,90 @@
@extend $block-caption @extend $block-caption
.archive-article .archive-article
clearfix()
avoid-column-break() avoid-column-break()
.archive-article-inner
@extend $block @extend $block
padding: 10px padding: 0
margin-bottom: 15px 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 .archive-article-date
color: color-grey
text-decoration: none
font-size: 0.85em
line-height: 1em
margin-bottom: 0.5em
display: block 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 #page-nav
clearfix() clearfix()

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

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