首页列表添加动画效果

themes/yilia/_config.yml

@@ -59,6 +59,8 @@ weixin:
 toc: 2
 # 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
 toc_hide_index: true
+# 是否显示文章列表页的动画效果
+animate: true
 # 目录为空时的提示
 toc_empty_wording: 目录，不存在的…
 

themes/yilia/layout/_partial/after-footer.ejs

@@ -7,6 +7,7 @@ window.themeConfig = {
   isCategory: <%=is_category()%>, // 是否为分类页面
   pageid: <%-page.pageid ? `"${page.pageid}"` : 'undefined'%>, // 页面标识, 用于个性化页面开发
   toc_hide_index: <%=theme.toc_hide_index%>, // 目录序号
+  animate: <%=theme.animate%>, // 是否显示文章列表页动画效果
   root: '<%=config.root%>', // 资源根路径
   baseUrl: '<%=config.url%>',
   pictureCdn: '<%=config.picture_cdn%>' // 图片存储仓库地址

themes/yilia/layout/_partial/article.ejs

@@ -1,7 +1,8 @@
 <% if (param.postIndex === 0 || !param.index){ %>
 <%- partial('_partial/aside') %>
 <% } %>
-<article class="article article-type-<%= post.layout %> <%if(param.index){%> article-index<%}%>" itemscope itemprop="blogPost">
+<div class="article-outer">
+<article class="article article-type-<%= post.layout %> <%if(param.index){%>article-index<%}%>" itemscope itemprop="blogPost">
   <div class="article-inner">
     <% if (post.link || post.title){ %>
       <header class="article-header">
@@ -86,6 +87,7 @@
     </div>
   </div>
 </article>
+</div>
 <% if (!param.index){ %>
   <%- partial('post/nav') %>
 <% } %>

themes/yilia/package-lock.json

@@ -4935,6 +4935,19 @@
       "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
       "dev": true
     },
+    "is-dom-node": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-dom-node/-/is-dom-node-1.0.4.tgz",
+      "integrity": "sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA=="
+    },
+    "is-dom-node-list": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz",
+      "integrity": "sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==",
+      "requires": {
+        "is-dom-node": "^1.0.4"
+      }
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -5629,6 +5642,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
+    "miniraf": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/miniraf/-/miniraf-1.0.0.tgz",
+      "integrity": "sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ=="
+    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -9237,6 +9255,11 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "rematrix": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/rematrix/-/rematrix-0.3.0.tgz",
+      "integrity": "sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ=="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -9508,6 +9531,16 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "scrollreveal": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.5.tgz",
+      "integrity": "sha512-dyQ0BPOLuoRzKAEwGgVaZsN4mxErHnuzh3Wq0ygE/PteGHeTCOubBoTzxSoix5UGLOUYMDapNAwajfQCB483aw==",
+      "requires": {
+        "miniraf": "1.0.0",
+        "rematrix": "0.3.0",
+        "tealight": "0.3.6"
+      }
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -10239,6 +10272,15 @@
         "inherits": "2"
       }
     },
+    "tealight": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/tealight/-/tealight-0.3.6.tgz",
+      "integrity": "sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==",
+      "requires": {
+        "is-dom-node": "^1.0.4",
+        "is-dom-node-list": "^1.2.1"
+      }
+    },
     "terser": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz",

themes/yilia/package.json

@@ -44,6 +44,7 @@
     "badjs-report": "^1.2.2",
     "es6-promise": "^4.0.5",
     "leancloud-storage": "^3.7.3",
-    "qrious": "^4.0.2"
+    "qrious": "^4.0.2",
+    "scrollreveal": "^4.0.5"
   }
 }

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

@@ -2,23 +2,13 @@
 	position: relative;
 }
 
-@keyframes cd-bounce-1 {
+.article-outer {
-  0% {
+  perspective: 500px;
-    opacity: 0;
+  margin: 0 30px 30px;
-    transform: scale(1);
+  position: relative;
-  }
-  60% {
-    opacity: 1;
-    transform: scale(1.01);
-  }
-  100% {
-    transform: scale(1);
-  }
 }
 
 .article {
-  margin: 0 30px 30px;
-  position: relative;
   border-width: 1px;
   border-style: solid;
   border-color: #fff #ddd;

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

@@ -45,10 +45,10 @@ html, body, #container {
   width: auto;
 	@extend %trans;
 	&.show {
-		@extend %anmLeftIn;
+    @extend %anmLeftIn;
 		.article {
-      transition: opacity .5s ease-in, background-color .2s ease-in;
+      transition: opacity .3s ease-in, background-color .3s ease-in;
-      opacity: 0.6;
+      opacity: 0.6 !important;
       pointer-events: none;
 		}
 	}

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

@@ -62,8 +62,19 @@ body.night {
     .article-title { // 主标题
       color: $colorF;
     }
-    .article-entry blockquote{ // 引用
+    .article-entry {
-      background: #2c2c2c;
+      table { // 表格
+        border-color: $borderColor_night;
+        th,td {
+          border-color: $borderColor_night;
+        }
+        thead tr { // 表头
+          background: $mainBg_night;
+        }
+      }
+      blockquote{ // 引用
+        background: #2c2c2c;
+      }
     }
     h1,h2,h3,h4,h5,h6 { // 章节标题
       color: $colorC;

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

@@ -19,6 +19,28 @@ Util.addLoadEvent(function() {
       PhotoWall.default.init()
     })
   }
+  if(window.themeConfig.animate && window.themeConfig.isHome) {
+    // 文章列表页动画效果
+    let animateTypes = [{ // 右侧移入
+      distance: '50px', 
+      origin: 'right'
+    },{ // 放大
+      scale: 0.8
+    },{ // 缩小
+      scale: 1.2
+    },{ // 绕X轴旋转
+      rotate: { x: 30 }
+    },{ // 绕Y轴旋转
+      rotate: { y: 30 }
+    }]
+    import(/* webpackChunkName: "scrollreveal" */ 'scrollreveal').then(ScrollReveal => {
+      let index = Math.floor(Math.random() * animateTypes.length)
+      ScrollReveal.default().reveal('.article-index', Object.assign({
+        delay: 200,
+        container: document.querySelector('#container')
+      }, animateTypes[index]))
+    })
+  }
 })
 
 const commentConfig = require('../config/comment.json')