v1.3, close #129

Author: yscoder

_config.yml

@@ -1,6 +1,6 @@
 # hexo-theme-indigo
 # https://github.com/yscoder/hexo-theme-indigo
-version: 1.2.7
+version: 1.3
 
 #添加新菜单项遵循以下规则
 # menu:
@@ -32,7 +32,7 @@ menu:
 rss: /atom.xml
 
 #你的头像url
-avatar: //placekitten.com/200/200
+avatar: /img/avatar.jpg
 #favicon
 favicon: /favicon.ico
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-material-indigo",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "Material Design theme for Hexo.",
   "keywords": [
     "hexo",

scripts/plugins.js

@@ -1,6 +1,25 @@
-hexo.extend.tag.register('image', ([src, title]) => {
+function renderImage(src, title) {
     return `<figure class="image-bubble">
-                <img src="${src}" alt="${title}">
+                <div class="img-lightbox">
+                    <div class="aspect-ratio">
+                        <div class="placeholder"></div>
+                        <img src="${src}" alt="${title}">
+                    </div>
+                </div>
                 <div class="image-caption">${title}</div>
             </figure>`
+}
+
+
+hexo.extend.tag.register('image', ([src, title]) => {
+    return renderImage(src, title)
+})
+
+hexo.extend.filter.register('before_post_render', data => {
+    data.content = data.content.replace(/\!\[(.*)\]\((.+)\)/gmi, (match, title, src) => {
+        const attrs = src.split(' ')
+        title = title || (attrs[1] && attrs[1].replace(/\"|\'/g, '')) || '未定义'
+        return `{% image ${attrs[0]} ${title} %}`
+    })
+    return data
 })

source/css/_partial/article.less

@@ -101,7 +101,7 @@
     padding: 35px;
     background: #fff;
     border-radius: 4px;
-    box-shadow: 0 0 30px rgba(0, 0, 0, .3);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
     .post-meta {
         margin-top: 8px;
     }
@@ -206,13 +206,13 @@
     }
 
     .image-bubble {
-        img {
-            margin: 20px auto 10px;
-        }
+        margin-top: 20px;
+        margin-bottom: 20px;
         text-align: center;
     }
     .image-caption {
         display: inline-block;
+        margin-top: 10px;
         color: @secondaryTextColor;
     }
 
@@ -329,7 +329,8 @@
     p:first-child,
     pre:first-child,
     table:first-child,
-    ul:first-child {
+    ul:first-child,
+    figure:first-child {
         margin-top: 0
     }
 
@@ -344,10 +345,6 @@
         max-width: 100%;
     }
 
-    img {
-        display: block;
-        margin: 40px auto;
-    }
 
     blockquote {
         position: relative;

source/css/_partial/lightbox.less

@@ -0,0 +1,59 @@
+.img-lightbox {
+    text-align: center;
+    .aspect-ratio {
+        position: relative;
+    }
+
+    img {
+        display: inline;
+        margin: 0;
+        cursor: pointer;
+        cursor: -webkit-zoom-in;
+        &.zoom-img {
+            cursor: -webkit-zoom-out;
+        }
+    }
+
+    .zoom-img,
+    .zoom-img-wrap {
+        position: relative;
+        z-index: 889;
+        .transition(.3s)
+    }
+    .zoom-img-wrap.abs {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .zoom-overlay {
+        position: fixed;
+        z-index: 888;
+        background: rgba(0, 0, 0, .6);
+        opacity: 0;
+        cursor: pointer;
+        cursor: -webkit-zoom-out;
+        .transition(.3s);
+        &.show {
+            opacity: 1;
+            + .zoom-img-title {
+                opacity: 1;
+            }
+        }
+    }
+
+    .zoom-img-title {
+        position: fixed;
+        z-index: 900;
+        height: 30px;
+        line-height: 30px;
+        color: #fff;
+        background: rgba(0, 0, 0, .3);
+        opacity: 0;
+        .transition(.3s);
+    }
+
+}
+

source/css/_partial/postlist.less

@@ -6,7 +6,7 @@
 
 .post-list-item {
     padding: 0 12px;
-    margin-bottom: 24px;
+    margin-bottom: 30px;
 }
 
 .post-time {
@@ -94,8 +94,10 @@
     padding: 0px 16px;
     line-height: 28px;
     color: rgba(255, 255, 255, 0.8);
+    .transition(.2s);
     &:hover {
-        color: #fff
+        color: #fff;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, .26);
     }
 }
 

source/css/_partial/variable.less

@@ -41,7 +41,7 @@
 
     &:hover,
     &:active {
-        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2);
     }
 
 }

source/css/style.less

@@ -37,6 +37,7 @@ html {
     color: @primaryTextColor;
     font-size: @font-size;
     line-height: 1.5;
+    overflow-x: hidden;
 }
 
 body {
@@ -399,4 +400,5 @@ hr,
 @import '_partial/tags';
 @import '_partial/search';
 @import '_partial/reward';
+@import '_partial/lightbox';
 @import '_duoshuo/embed';

source/img/avatar.jpg

@@ -266,9 +266,133 @@
                 }
             }
 
-        })()
+        })(),
+        lightbox: function () {
+            var zoomedImg;
+            var screenSize = {};
+            var margin = 0;
+            var scrollbarWidth = w.innerWidth - docEl.offsetWidth;
+
+            function updateScreenSize() {
+                screenSize.x = w.innerWidth || docEl.clientWidth || body.clientWidth;
+                screenSize.y = w.innerHeight || docEl.clientHeight || body.clientHeight;
+            }
+            updateScreenSize();
+
+            function zoom() {
+                if (!this.isZoomed) {
+                    this.isZoomed = !this.isZoomed;
+                    zoomedImg = this;
+
+                    if (!this.img)
+                        this.img = this.querySelector('img');
+
+                    var imgH = this.img.getBoundingClientRect().height;
+                    var imgW = this.img.getBoundingClientRect().width;
+                    var imgL = this.img.getBoundingClientRect().left;
+                    var imgT = this.img.getBoundingClientRect().top;
+
+                    var realW = this.img.naturalWidth || imgW,
+                        realH = this.img.naturalHeight || imgH;
+
+                    this.placeholder = this.querySelector('.placeholder');
+                    this.placeholder.style.cssText = 'height: ' + imgH + 'px';
+
+                    var top = (screenSize.y - imgH) / 2;
+                    var left = (screenSize.x - this.offsetWidth) / 2;
+
+                    this.img.classList.add('zoom-img');
+                    this.overlay = d.createElement('div');
+                    this.overlay.id = 'the-overlay';
+                    this.overlay.className = 'zoom-overlay';
+                    this.overlay.style.cssText = 'height:' + screenSize.y + 'px; width: ' + screenSize.x + 'px; top: -' + top + 'px; left: -' + left + 'px';
+
+                    this.wrapper = d.createElement('div');
+                    this.wrapper.id = 'the-wrapper';
+                    this.wrapper.className = 'zoom-img-wrap abs';
+                    this.wrapper.appendChild(this.img);
+                    this.wrapper.appendChild(this.overlay);
+                    this.children[0].appendChild(this.wrapper);
+
+                    var title = this.img.title || this.img.alt;
+                    if (title) {
+                        this.caption = d.createElement('div');
+                        this.caption.className = 'zoom-img-title';
+                        this.caption.innerHTML = title;
+                        this.caption.style.cssText = 'width: ' + screenSize.x + 'px; top: ' + (screenSize.y - top - 30) + 'px; left: -' + left + 'px';
+                        this.wrapper.appendChild(this.caption);
+                    }
+
+                    var wrapX = ((screenSize.x - scrollbarWidth) / 2) - imgL - (imgW / 2);
+                    var wrapY = imgT * (-1) + (screenSize.y - imgH) / 2;
+                    var scale = 1;
+
+                    if (realH > imgH) {
+                        if (imgH === imgW && screenSize.y > screenSize.x) {
+                            scale = screenSize.x / imgW;
+                        } else if (imgH === imgW && screenSize.y < screenSize.x) {
+                            scale = (screenSize.y - margin) / imgH;
+                        } else if (imgH > imgW) {
+                            scale = (screenSize.y - margin) / imgH;
+                            if (scale * imgW > screenSize.x) {
+                                scale = screenSize.x / imgW;
+                            }
+                        } else if (imgH < imgW) {
+                            scale = screenSize.x / imgW;
+                            if (scale * imgH > screenSize.y) {
+                                scale = (screenSize.y - margin) / imgH;
+                            }
+                        }
+                    }
+
+                    if (scale * imgW > realW) {
+                        scale = realW / imgW;
+                    }
+
+                    var that = this;
+                    setTimeout(function () {
+                        var wrapTrf = 'translate3d(' + wrapX + 'px, ' + wrapY + 'px, 0)';
+                        var imgTrf = 'scale(' + scale + ')';
+
+                        that.wrapper.style.cssText = 'transform: ' + wrapTrf + ';-webkit-transform: ' + wrapTrf;
+                        that.img.style.cssText = 'transform: ' + imgTrf + ';-webkit-transform: ' + imgTrf;
+                        that.overlay.className = 'zoom-overlay show';
+                    }, 0);
+
+                } else {
+                    this.isZoomed = !this.isZoomed;
+                    zoomedImg = null
+                    this.img.style.cssText = '';
+                    this.wrapper.style.cssText = '';
+                    this.overlay.className = 'zoom-overlay';
+
+                    var that = this;
+                    setTimeout(function () {
+                        that.placeholder.style.cssText = '';
+                        that.children[0].appendChild(that.img);
+                        that.children[0].removeChild(that.wrapper);
+                        that.img.classList.remove('zoom-img');
+                    }, 300)
+                }
+            }
+
+            forEach.call($$('.post-content .img-lightbox'), function (el) {
+                el.addEventListener(even, zoom);
+            });
+
+            return {
+                updateScreenSize: updateScreenSize,
+                zoomOut: function () {
+                    if (zoomedImg) {
+                        zoomedImg[even]();
+                    }
+                }
+            }
+        }
     };
 
+    var lightbox = Blog.lightbox();
+
     w.addEventListener('load', function () {
         Blog.fixNavMinH();
         Blog.waterfall();
@@ -288,6 +412,7 @@
         Blog.fixNavMinH();
         Blog.toggleMenu();
         Blog.waterfall();
+        lightbox.updateScreenSize();
     });
 
     gotop.addEventListener(even, function () {
@@ -317,6 +442,7 @@
         Blog.fixedHeader(top);
         Blog.toc.fixed(top);
         Blog.toc.actived(top);
+        lightbox.zoomOut();
     }, false);
 
     if (w.BLOG.SHARE) {