分类页面初步完工

source/_posts/前端杂烩/照片墙施工记录.md

@@ -1,5 +1,5 @@
 ---
-title: 照片墙开发记录
+title: 照片墙施工记录
 date: 2019-05-12 15:17:29
 tags: 
   - 前端

themes/yilia/_config.yml

@@ -8,6 +8,9 @@ menu:
     name: archives
     url: /archives/
     # target: _blank
+  categories: # 分类
+    name: categories
+    url: /categories/
   photo_wall: # 照片墙
     name: photo_wall
     url: /photo_wall/

themes/yilia/layout/categories.ejs

@@ -1,5 +1,5 @@
 <article class="article">
-  <h3>共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
+  <h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
   <% if (site.categories.length){ %>
   <ul class="category-list">
     <% site.categories.sort('name').each(function(item){ %>
@@ -7,19 +7,21 @@
         <li class="category-list-item">
           <a href="<%- config.root %><%- item.path %>" class="category-list-link" title="<%= item.name %>">
             <%= item.name %>
-            <span class="category-list-count">1</span>
+            <span class="category-list-count"><%= item.posts.length %></span>
           </a>
         </li>
       <% } %>
     <% }) %>
   </ul>
   <% } %>
-  <%- tagcloud({
+  <div class="tag-cloud">
-    min_font: 16, 
+    <%- tagcloud({
-    max_font: 35, 
+      min_font: 16, 
-    amount: 999, 
+      max_font: 35, 
-    color: true, 
+      amount: 999, 
-    start_color: 'gray', 
+      color: true, 
-    end_color: 'black',
+      start_color: 'gray', 
-  }) %>
+      end_color: 'black',
+    }) %>
+  </div>
 </article>

themes/yilia/source-src/css/core/_mixin.scss

@@ -685,12 +685,10 @@
 
 %trans {
   transition: all 0.2s ease-in;
+  -ms-transition: all 0.2s ease-in;
 }
 
 %trans8 {
   transition: all 0.8s ease-in;
-}
+  -ms-transition: all 0.8s ease-in;
-
+}
-%paper-bg {
-  background: url('./img/checkered-pattern.png') repeat #5d5d5d;
-}

themes/yilia/source-src/css/main.scss

@@ -20,6 +20,7 @@
 @import "./waifu";
 @import "./night";
 @import "./page/photo-wall";
+@import "./page/categories.scss";
 @media screen and (max-width: 800px) {
   @import "./mobile";
   @import "./mobile-slider";

themes/yilia/source-src/css/page/categories.scss

@@ -0,0 +1,19 @@
+.category-list {
+  text-align: center;
+  padding: 20px;
+  li.category-list-item {
+    display: inline-block;
+    margin: 0 1em .5em 0;
+    padding: 4px;
+    border: 1px solid #d3d3d3;
+    font-size: 1.2rem;
+  }
+}
+.category-count {
+  text-align: center;
+}
+// hexo自带的标签云
+.tag-cloud {
+  text-align: center;
+  padding: 20px;
+}

themes/yilia/source-src/js/photo-wall.js

@@ -1,7 +1,11 @@
 import axios from 'axios'
+import PhotoSwipe from '../lib/photoswipe/photoswipe'
+import PhotoSwipeUI_Default from '../lib/photoswipe/photoswipe-ui-default'
 
-var groupid = 1, currentIndex = 0, defaultStep = 20, scrollLock = false
+var groupid = 1, currentIndex = 0, totalIndex = 0, defaultStep = 20, scrollLock = false
 
+// 容器DIV
+const photoWallWrapper = document.getElementById('photo-wall')
 // 滚动区域DOM
 const scrollDom = document.getElementById('container')
 // 作为底部标记的DOM
@@ -9,28 +13,59 @@ const markDom = document.getElementById('footer')
 // 加载提示文字
 const loadTip = document.getElementById('load-tip')
 
+// 相册集
+const items = []
+function getThumbBoundsFn(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}
+  }
+}
+var pswpElement = document.querySelectorAll('.pswp')[0]
 function loadMoreItems(step) {
   scrollLock = true //加载过程中锁定滚动加载
   loadTip.style.display = 'block'
-  var photoWallWrapper = document.getElementById('photo-wall')
   // 滚动到底部时调用
   axios.get(`${themeConfig.pictureCdn}/photo-wall/${groupid}/list.json`).then(res => {
     var itemContainer = document.createElement('div')
-    var imgItems = '', index = currentIndex
+    var index = currentIndex
     while(index<currentIndex+step && index<res.data.files.length) {
-      let imgHeight = null
+      let imgHeight = null, imgUrl = `${themeConfig.pictureCdn}/${res.data.files[index].name}`
-      if(res.data.files[index].width && res.data.files[index].height) {
+      let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
-        let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
+      // 列宽240px 列间距20px, 计算每列宽度
-        // 列宽240px 列间距20px, 计算每列宽度
+      let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20
-        let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20
+      // 图片的实际显示高度
-        // 图片的实际显示高度
+      imgHeight = (columnWidth / res.data.files[index].width) * res.data.files[index].height
-        imgHeight = (columnWidth / res.data.files[index].width) * res.data.files[index].height
+      imgHeight = Math.round(imgHeight * 100) / 100 // 四舍五入保留2位小数
-        imgHeight = Math.round(imgHeight * 100) / 100 // 四舍五入保留2位小数
+      items.push({
-      }
+        msrc: imgUrl, // 缩略图的地址(在动画过程中显示的是缩略图, 这里暂且用相同的地址了)
-      imgItems += `<div class="item" ${imgHeight ? 'style="height:' + imgHeight + 'px"' : ''}>
+        src: imgUrl,
-          <img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>
+        w: res.data.files[index].width,
-      </div>`
+        h: res.data.files[index].height,
+        title: res.data.files[index].name
+      })
+      let imgItemDiv = document.createElement('div'), imgItem = document.createElement('img')
+      imgItemDiv.classList.add('item')
+      imgItemDiv.style.height = imgHeight+'px'
+      imgItem.classList.add('item-img')
+      imgItem.setAttribute('src', imgUrl)
+      imgItem.addEventListener('click', (function(totalIndex){
+        return function(e) {
+          // slider展开状态
+          if (document.querySelector('.left-col.show')) return
+          var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
+            index: totalIndex,
+            bgOpacity: 0.8,
+            getThumbBoundsFn: getThumbBoundsFn(e.target)
+          })
+          gallery.init()
+        }
+      })(totalIndex))
+      imgItemDiv.appendChild(imgItem)
+      itemContainer.appendChild(imgItemDiv)
       index++
+      totalIndex++
     }
     if(index >= res.data.files.length) { // 已到达当前分组列表的末尾
       groupid++
@@ -44,7 +79,7 @@ function loadMoreItems(step) {
       currentIndex = index
     }
     itemContainer.classList.add('item-container')
-    itemContainer.insertAdjacentHTML('beforeend', imgItems)
+    // itemContainer.insertAdjacentHTML('beforeend', imgItems)
     photoWallWrapper.appendChild(itemContainer)
     setTimeout(()=>{
       loadTip.style.display = 'none'