封面优化&文章分页导航显示优化

Author: kaeyleo

_layouts/post.html

@@ -21,11 +21,8 @@ <h1>{{ page.title }}</h1>
     </div>
     {% if page.cover %}
     <div class="filter"></div>
-    <div class="post-cover">
-        <img id="postCover" src="{{ page.cover }}" alt="">
-    </div>
+    <div class="post-cover" style="background: url('{{ page.cover }}') center no-repeat; background-size: cover;">
     {% endif %}
-
 </header>
 
 <div class="post-content">

_posts/2017-04-18-new-theme-h2o.md

@@ -28,6 +28,12 @@ tags: jekyll 前端开发 设计
 
 ## 新特性
 
+### 主题配色
+
+支持两种主题配色——蓝色和粉色。
+
+![](https://github.com/kaeyleo/jekyll-theme-H2O/blob/master/assets/img/jekyll-theme-h2o-themecolor.jpg?raw=true)
+
 ### 侧边栏
 
 相比自己上一个版本的博客主题，首页增加侧边栏，可以展示博主简介和推荐标签（默认12个，可以在 ```_config.yml``` 文件里的 ```recommend-condition-size``` 处修改显示标签的最大个数）。
@@ -90,7 +96,7 @@ tags: jekyll 前端开发 设计
 - Go
 - Python
 
-### 评论功能
+### 第三方评论
 
 由于多说关闭，又对国内其他第三方评论插件无感，所以将[Disqus](https://disqus.com/)列为首选（目前模板也只提供了这个），请自备梯子。
 
@@ -108,18 +114,14 @@ H2O在这方面还有很多需要完善的地方，比如：<strike>代码高亮
 
 ### 其他特性：
 
-- 增加了网页标题SEO优化
-
-- 支持两种主题颜色蓝色（默认）和粉色，可以在 ```_config.yml``` 文件里的 ```theme-color``` 处根据注释选择配置。主要效果体现在顶部导航栏的logo和鼠标悬停时文字显示的颜色效果。
-
-- 自定义文章封面
-
+- 网页标题SEO优化
 - 标签索引，点击标签跳转到标签目录，即可查看对应的全部文章
-
-- 支持Disqus评论系统
+- 漂亮
+- 好看
+- 美
 
 ## 最后
 
 本想趁这次机会将整站https化的，但折腾了半天发现弹性web托管并不支持，所以暂时搁置https的想法。另外，博客统计工具一直使用的是[百度统计](https://tongji.baidu.com)，这次新增了Google Analytics。
 
-H2O主题从0到1，独自设计、开发再到发布大约用了一周时间，也算完成一个小小的开源项目了，后续也将持续完善和更新。
+这次从0到1，独自设计、开发再到发布大约用了一周时间，也算完成一个小小的开源项目了，后续也将持续完善和更新，欢迎[Star](https://github.com/kaeyleo/jekyll-theme-H2O)。

assets/css/app.min.css

@@ -83,7 +83,7 @@ $(document).ready(function(){
             containerWidth = container.width(),
             imgHeight = img.height(),
             containerHeight = container.height();
-        
+        var isOk = false;
         if(imgHeight < containerHeight) {
             img.css({
                 'width': 'auto',
@@ -93,27 +93,26 @@ $(document).ready(function(){
             containerWidth = container.width();
             var marginLeft = (imgWidth - containerWidth) / 2;
             img.css('margin-left', '-' + marginLeft + 'px');
+            isOk = true;
         } else {
             var marginTop = (containerHeight - imgHeight) / 2;
             img.css('margin-top', marginTop + 'px');
+            isOk = true;
         }
 
-        setTimeout(function(){
-            img.css({
-                'transition': '.6s',
-                'opacity': '1'
-            });
-        }, 0);
-        
+        if(isOk) {
+            img.fadeIn();
+            isOk = false;
+        }
     }
 
-    postCover($('#postCover'), $('.g-banner'));
-    
+    // 文章分页导航
     $('.read-next-item section').each(function(){
         var _this = $(this),
             n = _this.height(),
             rn = $('.read-next-item').height();
         _this.css('margin-top', (rn-n)/2 + 'px');
+        _this.fadeIn();
     });
 
     $('.read-next-item img').each(function(){

assets/js/index.min.js

@@ -481,9 +481,6 @@ a {
     width: 100%;
     height: 100%;
     z-index: -2; }
-    .post-header .post-cover img {
-      opacity: 0;
-      width: 100%; }
 
 .bgcolor-default {
   background-color: #1494FB; }
@@ -603,6 +600,7 @@ a {
     height: 100%;
     z-index: 3; }
   .read-next-item section {
+    display: none;
     position: relative;
     width: 80%;
     margin-left: 10%;
@@ -628,6 +626,7 @@ a {
     z-index: 1;
     transition: .3s linear; }
   .read-next-item img {
+    display: none;
     position: absolute;
     top: 0;
     left: 0;

dev/js/index.js

@@ -383,10 +383,6 @@
         width: 100%;
         height: 100%;
         z-index: -2;
-        img {
-            opacity: 0;
-            width: 100%;
-        }
     }
 }
 
@@ -534,6 +530,7 @@
         z-index: 3;
     }
     section {
+        display: none;
         position: relative;
         width: 80%;
         margin-left: 10%;
@@ -563,6 +560,7 @@
         transition: .3s linear;
     }
     img {
+        display: none;
         position: absolute;
         top: 0;
         left: 0;