图片浏览逻辑优化

themes/yilia/layout/_partial/mobile-nav.ejs

@@ -1,7 +1,7 @@
 <nav id="mobile-nav">
-  	<div class="overlay js-overlay" ></div>
+  <div class="overlay js-overlay" ></div>
 	<div class="btnctn js-mobile-btnctn">
-  		<div class="slider-trigger list" @click="openSlider($event, 'innerArchive')"><i class="icon icon-sort"></i></div>
+    <div class="slider-trigger list" @click="openSlider($event, 'innerArchive')"><i class="icon icon-sort"></i></div>
 	</div>
 	<div class="intrude-less">
 		<header id="header" class="inner">
@@ -34,5 +34,5 @@
 			</nav>
 		</header>				
 	</div>
-	<div class="mobile-mask" style="display:none" q-show="isShow"></div>
+	<div class="mobile-mask" style="display:none" v-show="isShow"></div>
 </nav>

themes/yilia/layout/_partial/tools.ejs

@@ -58,30 +58,6 @@
           </ul>
         </div>
         <ul class="search-ul">
-          <p v-if="jsonFail" style="padding: 20px; font-size: 12px;">
-            缺失模块。<br/>1、请确保node版本大于6.2<br/>2、在博客根目录（注意不是yilia根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
-            3、在根目录_config.yml里添加配置：
-          <pre style="font-size: 12px;" v-if="jsonFail">
-            jsonContent:
-              meta: false
-              pages: false
-              posts:
-                title: true
-                date: true
-                path: true
-                text: false
-                raw: false
-                content: false
-                slug: false
-                updated: false
-                comments: false
-                link: false
-                permalink: false
-                excerpt: false
-                categories: false
-                tags: true
-          </pre>
-          </p>
           <li class="search-li" v-for="item in items" v-show="!item.isHide">
             <a :href="item.path|urlformat" class="search-title"><i class="icon-quo-left icon"></i>
               <span v-text="item.title"></span>

themes/yilia/source-src/js/slider.js

@@ -24,7 +24,6 @@ new Vue({
     innerArchive: false,
     friends: false,
     aboutme: false,
-    jsonFail: false,
     showTags: false,
     showCategories: false,
     search: null,
@@ -105,7 +104,7 @@ new Vue({
     .then((res)=>{
       this.items = res.data
     }).catch((err) => {
-      this.jsonFail = true
+      console.warn('加载文章列表失败')
     })
     this.showMessage(welcomeMessage(), 6000)
     document.addEventListener('copy', () => {

themes/yilia/source-src/js/viewer.js

@@ -7,36 +7,36 @@ import Util from './util'
 
 function init() {
 	let pswpElement = document.querySelectorAll('.pswp')[0]
-  let $imgArr = document.querySelectorAll('.article-entry img:not(.reward-img)')
-  let getThumbBoundsFn = function(index) {
-    var thumbnail = document.querySelectorAll('.article-entry img:not(.reward-img)')[index]
-    var pageYScroll = window.pageYOffset || document.documentElement.scrollTop
-    var rect = thumbnail.getBoundingClientRect()
-    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}
+  let imgArr = document.querySelectorAll('.article-entry img:not(.reward-img)')
+  let getThumbBoundsFn = function(target) {
+    return function(index) { // index是当前点击的图片在相册中的索引值
+      var pageYScroll = window.pageYOffset || document.documentElement.scrollTop
+      var rect = target.getBoundingClientRect()
+      return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}
+    }
   }
-	Array.prototype.forEach.call($imgArr, ($em, i) => {
-		$em.addEventListener('click', function(){
+  const items = Array.prototype.map.call(imgArr, em => {
+    let src = em.getAttribute('data-target') || em.getAttribute('src')
+    let title = em.getAttribute('alt')
+    // 获得原图尺寸
+    const image = new Image()
+    image.src = src
+    return {
+      msrc: src, // 缩略图的地址(在动画过程中显示的是缩略图, 这里暂且用相同的地址了)
+      src,
+      w: image.width || em.width,
+      h: image.height || em.height,
+      title
+    }
+  })
+	Array.prototype.forEach.call(imgArr, (em, index) => {
+		em.addEventListener('click', function(e){
 			// slider展开状态
 			if (document.querySelector('.left-col.show')) return
-			let items = []
-			Array.prototype.forEach.call($imgArr, ($em2, i2) => {
-				let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
-				let title = $em2.getAttribute('alt')
-				// 获得原图尺寸
-				const image = new Image()
-				image.src = src
-				items.push({
-          msrc: src, // 缩略图的地址(在动画过程中显示的是缩略图, 这里暂且用相同的地址了)
-					src,
-					w: image.width || $em2.width,
-					h: image.height || $em2.height,
-					title
-				})
-			})
 			var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
-				index: parseInt(i),
+				index,
         bgOpacity: 0.8,
-        getThumbBoundsFn
+        getThumbBoundsFn: getThumbBoundsFn(e.target)
 			})
 			gallery.init()
 		})