From 91ffea5c608daee768d1d6797c2aef9bb3f33d94 Mon Sep 17 00:00:00 2001 From: ppoffice Date: Thu, 28 May 2015 09:36:20 +0800 Subject: [PATCH] redesign archive pages & edit readme --- README.md | 38 +++++++++-- _config.yml.example | 7 +- _source/categories/index.md | 3 + _source/tags/index.md | 3 + layout/_partial/archive-post.ejs | 17 +++++ layout/_partial/archive.ejs | 114 ++++++++++++++++++++++--------- layout/_partial/header.ejs | 7 -- layout/_partial/mobile-nav.ejs | 5 -- layout/archive.ejs | 2 +- layout/categories.ejs | 10 +++ layout/category.ejs | 2 +- layout/index.ejs | 2 +- layout/tag.ejs | 2 +- layout/tags.ejs | 10 +++ source/css/_extend.styl | 9 +++ source/css/_partial/archive.styl | 110 ++++++++++++++++++++++------- source/css/_partial/sidebar.styl | 3 +- 17 files changed, 259 insertions(+), 85 deletions(-) create mode 100644 _source/categories/index.md create mode 100644 _source/tags/index.md create mode 100644 layout/_partial/archive-post.ejs delete mode 100644 layout/_partial/mobile-nav.ejs create mode 100644 layout/categories.ejs create mode 100644 layout/tags.ejs diff --git a/README.md b/README.md index dd8be97..6831432 100644 --- a/README.md +++ b/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 `` 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/ + diff --git a/_config.yml.example b/_config.yml.example index 13a464c..0047eaa 100644 --- a/_config.yml.example +++ b/_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: '#' diff --git a/_source/categories/index.md b/_source/categories/index.md new file mode 100644 index 0000000..969529b --- /dev/null +++ b/_source/categories/index.md @@ -0,0 +1,3 @@ +title: "Categories" +layout: "categories" +--- diff --git a/_source/tags/index.md b/_source/tags/index.md new file mode 100644 index 0000000..f91f0a6 --- /dev/null +++ b/_source/tags/index.md @@ -0,0 +1,3 @@ +title: "Tags" +layout: "tags" +--- diff --git a/layout/_partial/archive-post.ejs b/layout/_partial/archive-post.ejs new file mode 100644 index 0000000..420411d --- /dev/null +++ b/layout/_partial/archive-post.ejs @@ -0,0 +1,17 @@ +
+
+ <% if(theme.thumbnail == true) { %> +
+ <%- partial('post/thumbnail.ejs', {post: post}) %> +
+ <% } %> +
+ <%- 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'}) %> + <% } %> +
+
+
\ No newline at end of file diff --git a/layout/_partial/archive.ejs b/layout/_partial/archive.ejs index d17607d..bdad1cf 100644 --- a/layout/_partial/archive.ejs +++ b/layout/_partial/archive.ejs @@ -1,34 +1,82 @@ -<% if (!theme.groupByYear){ %> - <% page.posts.each(function(post){ %> - <%- partial('article', {post: post, index: true}) %> - <% }) %> - <% if (page.total > 1){ %> - - <% } %> -<% } else { %> - <% var last; %> - <% page.posts.each(function(post, i){ %> - <% var year = post.date.year(); %> - <% if (last != year){ %> - <% last = year; %> -
- - <%= year %> -
+<% switch (type) { + case 'archive': + var last; + page.posts.each(function(post, i){ + var year = post.date.year(); + if (last != year){ + if (last != null){ %> + + <% } + last = year; %> +
+ <%= year %> +
+
+
<% } %> - <%- partial('article', {post: post, index: true}) %> - <% }) %> - <% if (page.total > 1){ %> - - <% } %> -<% } %> \ No newline at end of file + <%- partial('archive-post', {post: post, archive: true}) %> + <% }); + if (page.posts.length){ %> +
+ <% } + if (page.total > 1){ %> + + <% } + break; + case 'category': %> +
+
+ <%= page.category %> +
+
+ <% page.posts.each(function (post, i) { %> + <%- partial('archive-post', {post: post, archive: false}) %> + <% }); %> +
+ <% if (page.total > 1){ %> + + <% } + break; + case 'tag': %> +
+
+ #<%= page.tag %> +
+
+ <% page.posts.each(function (post, i) { %> + <%- partial('archive-post', {post: post, archive: false}) %> + <% }); %> +
+ <% if (page.total > 1){ %> + + <% } + break; + default: + page.posts.each(function(post){ %> + <%- partial('article', {post: post, index: true}) %> + <% }) + if (page.total > 1){ %> + + <% } + break; +} %> \ No newline at end of file diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index 958cd5c..fb65c5d 100644 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -29,11 +29,4 @@ - <% if(page.category || page.archive) { %> -
-
- <%- list_categories({depth: 1}) %> -
-
- <% } %> \ No newline at end of file diff --git a/layout/_partial/mobile-nav.ejs b/layout/_partial/mobile-nav.ejs deleted file mode 100644 index 7c1d2af..0000000 --- a/layout/_partial/mobile-nav.ejs +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/layout/archive.ejs b/layout/archive.ejs index d1eb147..2094fb9 100644 --- a/layout/archive.ejs +++ b/layout/archive.ejs @@ -1 +1 @@ -<%- partial('_partial/archive', {index: true}) %> \ No newline at end of file +<%- partial('_partial/archive', {type: 'archive', index: true}) %> \ No newline at end of file diff --git a/layout/categories.ejs b/layout/categories.ejs new file mode 100644 index 0000000..b9b3bb1 --- /dev/null +++ b/layout/categories.ejs @@ -0,0 +1,10 @@ +
+
+ <%= page.title %> +
+
+ <% if(site.categories.length) { %> + <%- list_categories(site.categories) %> + <% } %> +
+
\ No newline at end of file diff --git a/layout/category.ejs b/layout/category.ejs index d1eb147..8806cc2 100644 --- a/layout/category.ejs +++ b/layout/category.ejs @@ -1 +1 @@ -<%- partial('_partial/archive', {index: true}) %> \ No newline at end of file +<%- partial('_partial/archive', {type: 'category', index: true}) %> \ No newline at end of file diff --git a/layout/index.ejs b/layout/index.ejs index d1eb147..5c86290 100644 --- a/layout/index.ejs +++ b/layout/index.ejs @@ -1 +1 @@ -<%- partial('_partial/archive', {index: true}) %> \ No newline at end of file +<%- partial('_partial/archive', {type: '', index: true}) %> \ No newline at end of file diff --git a/layout/tag.ejs b/layout/tag.ejs index d1eb147..54a50c7 100644 --- a/layout/tag.ejs +++ b/layout/tag.ejs @@ -1 +1 @@ -<%- partial('_partial/archive', {index: true}) %> \ No newline at end of file +<%- partial('_partial/archive', {type: 'tag', index: true}) %> \ No newline at end of file diff --git a/layout/tags.ejs b/layout/tags.ejs new file mode 100644 index 0000000..5dcbde6 --- /dev/null +++ b/layout/tags.ejs @@ -0,0 +1,10 @@ +
+
+ <%= page.title %> +
+
+ <% if(site.tags.length) { %> + <%- tagcloud({min_font: 14, max_font: 28}) %> + <% } %> +
+
\ No newline at end of file diff --git a/source/css/_extend.styl b/source/css/_extend.styl index 1891ffd..16538fb 100644 --- a/source/css/_extend.styl +++ b/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 diff --git a/source/css/_partial/archive.styl b/source/css/_partial/archive.styl index 7ef3ab9..b03e201 100644 --- a/source/css/_partial/archive.styl +++ b/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 - @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() diff --git a/source/css/_partial/sidebar.styl b/source/css/_partial/sidebar.styl index 3a1dc28..30f0a7b 100644 --- a/source/css/_partial/sidebar.styl +++ b/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