refactor: remove wow (#51)

* refactor: remove wow * fix: hover style error * feat: add animation for archive * fix: disconnect observe * fix: fix hover border-radius
D-Sketon · Oct 4, 2024 · 8a8dfd5 · 8a8dfd5
1 parent 85fe644
commit 8a8dfd5
Show file tree

Hide file tree

Showing 30 changed files with 410 additions and 88 deletions.
diff --git a/_config.yml b/_config.yml
@@ -307,7 +307,6 @@ vendor:
     instantsearch: webcache|[email protected]/dist/instantsearch.production.min.js
     pace: webcache|[email protected]/pace.min.js
     mermaid: webcache|[email protected]/dist/mermaid.min.js
-    wow: webcache|[email protected]/dist/wow.min.js
     firework: webcache|[email protected]/dist/index.umd.js
     pjax: webcache|[email protected]/dist/index.umd.js
     live2d:
@@ -328,4 +327,4 @@ vendor:
         - webcache|@fortawesome/[email protected]/css/brands.min.css
         - webcache|@fortawesome/[email protected]/css/v5-font-face.min.css
         - webcache|@fortawesome/[email protected]/css/v4-font-face.min.css
-    animate: webcache|[email protected]/css/libs/animate.css
+    aos: webcache|@reimujs/[email protected]/dist/aos.css
diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs
@@ -3,6 +3,25 @@
 
 <%- js('js/script.js') %>
 
+<% if (theme.animation.enable) { %>
+  <%- js('js/aos.js') %>
+  <script>
+    var aosInit = () => {
+      AOS.init({
+        duration: 1000,
+        easing: "ease",
+        once: true,
+        offset: 50,
+      });
+    };
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', aosInit);
+    } else {
+      aosInit();
+    }
+  </script>
+<% } %>
+
 <%- js({src: 'js/pjax_script.js', 'data-pjax': true}) %>
 
 <script type="module" data-pjax>

diff --git a/layout/_partial/archive.ejs b/layout/_partial/archive.ejs
@@ -3,17 +3,17 @@
   <%- partial('post', {post: post, index: true, even: i % 2 === 0}) %>
   <% }) %>
 <% } else { %>
-<div class="archives-outer-wrap wow fadeInUp">
+<div class="archives-outer-wrap" data-aos="fade-up">
   <div class="tag-wrap">
     <% site.tags.each((tag, i) => { %>
-      <div class="archives-tag-list-item">
+      <div class="archives-tag-list-item" data-aos="zoom-in">
         <a class="archives-tag-list-link" href="/<%= tag.path %>"><%= tag.name %></a>
       </div>
     <% }) %>
   </div>
   <div class="category-wrap">
     <% site.categories.each((cagetory, i) => { %>
-      <div class="archives-category-list-item">
+      <div class="archives-category-list-item" data-aos="zoom-in">
         <a class="archives-category-list-link" href="/<%= cagetory.path %>"><%= cagetory.name %></a>
       </div>
     <% }) %>
@@ -26,7 +26,7 @@
         </section>
       <% } %>
       <% last = year; %>
-      <section class="archives-wrap wow fadeInUp">
+      <section class="archives-wrap" data-aos="fade-up">
         <div class="archive-year-wrap">
           <a href="<%- url_for(config.archive_dir + '/' + year) %>" class="archive-year"><%= year %></a>
         </div>
@@ -41,7 +41,7 @@
   </div>
 <% } %>
 <% if (page.total > 1) { %>
-  <nav id="page-nav" class="wow fadeInUp">
+  <nav id="page-nav" data-aos="fade-up">
     <% var prev_text = "&laquo; " + __('prev');var next_text = __('next') + " &raquo;" %>
     <%- paginator({
           prev_text: prev_text,

diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
@@ -1,4 +1,4 @@
-<footer id="footer" class="wow fadeInUp">
+<footer id="footer">
   <div style="width: 100%; overflow: hidden">
     <div class="footer-line"></div>
   </div>

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -59,14 +59,6 @@
   <% } %>
   <%- js(vendorCdn(theme.vendor.js.pace)) %>
   <% if (theme.animation.enable) { %>
-    <%- css(vendorCdn(theme.vendor.css.animate)) %>
-    <%- js(vendorCdn(theme.vendor.js.wow)) %>
-    <script>
-      new WOW({
-        offset: 0,
-        mobile: true,
-        live: false
-      }).init();
-    </script>
+    <%- css(vendorCdn(theme.vendor.css.aos)) %>
   <% } %>
 </head>
diff --git a/layout/_partial/post.ejs b/layout/_partial/post.ejs
@@ -1,5 +1,6 @@
 <% if (even === true) { %>
-  <div class="post-wrap-left wow fadeInUp">
+  <div class="post-wrapper">
+  <div class="post-wrap-left" data-aos="fade-up">
     <% if (post.link) { %>
       <a class="post-link" href="<%- url_for(post.link, {relative: false}) %>" itemprop="url" target="_blank" aria-label="<%= post.title %>"></a>
     <% } else { %>
@@ -36,8 +37,10 @@
       </article>
     </div>
   </div>
+  </div>
 <% } else { %>
-  <div class="post-wrap-right wow fadeInUp">
+  <div class="post-wrapper">
+  <div class="post-wrap-right" data-aos="fade-up">
     <% if (post.link) { %>
     <a class="post-link" href="<%- url_for(post.link, {relative: false}) %>" itemprop="url" target="_blank" aria-label="<%= post.title %>"></a>
     <% } else { %>
@@ -71,4 +74,5 @@
       </article>
     </div>
   </div>
+  </div>
 <% } %>
diff --git a/layout/_partial/post/category.ejs b/layout/_partial/post/category.ejs
@@ -1,10 +1,10 @@
 <% if (post.categories && post.categories.length) { %>
-  <div class="article-category wow slideInLeft">
-    <%- list_categories(post.categories, {
-              show_count: false,
-              class: 'article-category',
-              style: 'none',
-              separator: ''
-            }) %>
+  <div class="article-category">
+    <%- listCategories(post.categories, {
+      show_count: false,
+      class: 'article-category',
+      style: 'none',
+      separator: ''
+    }, "zoom-in") %>
   </div>
 <% } %>
diff --git a/layout/_partial/post/date.ejs b/layout/_partial/post/date.ejs
@@ -1,5 +1,5 @@
-<div class="<%= class_name %> wow slideInLeft">
-  <a href="<%- url_for(post.path) %>" class="article-date-link">
+<div class="<%= class_name %>">
+  <a href="<%- url_for(post.path) %>" class="article-date-link" data-aos="zoom-in">
     <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
     <time style="display: none;" id="post-update-time"><%= date(post.updated, date_format) %></time>
   </a>

diff --git a/layout/_partial/post/nav.ejs b/layout/_partial/post/nav.ejs
@@ -1,5 +1,5 @@
 <% if (post.prev || post.next) { %>
-  <nav id="article-nav" class="wow fadeInUp">
+  <nav id="article-nav" data-aos="fade-up">
     <% if (post.prev) { %>
       <div class="article-nav-link-wrap article-nav-link-left">
         <% if (post.prev.cover) { %>

diff --git a/layout/_partial/post/tag.ejs b/layout/_partial/post/tag.ejs
@@ -1,6 +1,6 @@
 <% if (post.tags && post.tags.length) { %>
-  <%- list_tags(post.tags, {
+  <%- listTags(post.tags, {
         show_count: false,
         class: 'article-tag'
-      }) %>
+      }, 'zoom-in') %>
 <% } %>
diff --git a/layout/_partial/sidebar.ejs b/layout/_partial/sidebar.ejs
@@ -1,17 +1,19 @@
 <aside id="sidebar">
-  <div class="sidebar-wrap wow fadeInRight <% if (is_post()) { %>wrap-sticky<% } %>">
-    <% if (is_post()) { %>
-      <div class="sidebar-toc-sidebar"><%- partial('sidebar/toc-sidebar') %></div>
-      <div class="sidebar-common-sidebar hidden"><%- partial('sidebar/common-sidebar') %></div>
-    <% } else { %>
-      <%- partial('sidebar/common-sidebar') %>
-    <% } %>
-    <% if (is_post()) { %>
-      <div class="sidebar-btn-wrapper" style="position:static">
-        <div class="sidebar-toc-btn current"></div>
-        <div class="sidebar-common-btn"></div>
-      </div>
-    <% } %>
+  <div class="sidebar-wrapper">
+    <div class="sidebar-wrap <% if (is_post()) { %>wrap-sticky<% } %>" data-aos="fade-up">
+      <% if (is_post()) { %>
+        <div class="sidebar-toc-sidebar"><%- partial('sidebar/toc-sidebar') %></div>
+        <div class="sidebar-common-sidebar hidden"><%- partial('sidebar/common-sidebar') %></div>
+      <% } else { %>
+        <%- partial('sidebar/common-sidebar') %>
+      <% } %>
+      <% if (is_post()) { %>
+        <div class="sidebar-btn-wrapper" style="position:static">
+          <div class="sidebar-toc-btn current"></div>
+          <div class="sidebar-common-btn"></div>
+        </div>
+      <% } %>
+    </div>
   </div>
 
   <% if (!is_post() && theme.widgets) { %>

diff --git a/layout/_widget/archive.ejs b/layout/_widget/archive.ejs
@@ -1,8 +1,10 @@
 <% if (site.posts.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('archive_a') %></h3>
-    <div class="widget">
-      <%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('archive_a') %></h3>
+      <div class="widget">
+        <%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/layout/_widget/category.ejs b/layout/_widget/category.ejs
@@ -1,8 +1,10 @@
 <% if (site.categories.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('categories') %></h3>
-    <div class="widget">
-      <%- list_categories({show_count: theme.show_count}) %>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('categories') %></h3>
+      <div class="widget">
+        <%- list_categories({show_count: theme.show_count}) %>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/layout/_widget/recent_posts.ejs b/layout/_widget/recent_posts.ejs
@@ -1,14 +1,16 @@
 <% if (site.posts.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('recent_posts') %></h3>
-    <div class="widget">
-      <ul>
-        <% site.posts.sort('date', -1).limit(theme.recent_posts_limits).each((post) => { %>
-          <li>
-            <a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
-          </li>
-        <% }) %>
-      </ul>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('recent_posts') %></h3>
+      <div class="widget">
+        <ul>
+          <% site.posts.sort('date', -1).limit(theme.recent_posts_limits).each((post) => { %>
+            <li>
+              <a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
+            </li>
+          <% }) %>
+        </ul>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/layout/_widget/tag.ejs b/layout/_widget/tag.ejs
@@ -1,8 +1,10 @@
 <% if (site.tags.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('tags') %></h3>
-    <div class="widget">
-      <%- list_tags({show_count: theme.show_count}) %>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('tags') %></h3>
+      <div class="widget">
+        <%- list_tags({show_count: theme.show_count}) %>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/layout/_widget/tagcloud.ejs b/layout/_widget/tagcloud.ejs
@@ -1,8 +1,10 @@
 <% if (site.tags.length) { %>
-  <div class="widget-wrap wow fadeInRight">
-    <h3 class="widget-title"><%= __('tagcloud') %></h3>
-    <div class="widget tagcloud">
-      <%- tagcloud() %>
+  <div class="widget-wrapper">
+    <div class="widget-wrap" data-aos="fade-up">
+      <h3 class="widget-title"><%= __('tagcloud') %></h3>
+      <div class="widget tagcloud">
+        <%- tagcloud() %>
+      </div>
     </div>
   </div>
 <% } %>
diff --git a/scripts/helper/listCategories.js b/scripts/helper/listCategories.js
@@ -0,0 +1,4 @@
+hexo.extend.helper.register("listCategories", (...args) => {
+  const result = hexo.extend.helper.store.list_categories.apply(hexo, args);
+  return result.replace(/<a class="([^"]+)" href="([^"]+)">/g, `<a class="$1" href="$2" data-aos="${args[2]}">`);
+});
diff --git a/scripts/helper/listTags.js b/scripts/helper/listTags.js
@@ -0,0 +1,4 @@
+hexo.extend.helper.register('listTags', (...args) => {
+  const result = hexo.extend.helper.store.list_tags.apply(hexo, args);
+  return result.replace(/<li class="([^"]+)">/g, `<li class="$1" data-aos="${args[2]}">`);
+});
diff --git a/scripts/tag/friendLink.js b/scripts/tag/friendLink.js
@@ -40,7 +40,7 @@ const loadFile = (arg) => {
 };
 
 const insertHtml = (load) => {
-  let content = `<div class="friend-wrap wow fadeInUp">`;
+  let content = `<div class="friend-wrap" data-aos="zoom-in">`;
   load.forEach((item) => {
     if (!item.name || !item.url) return;
     content += template(item);

diff --git a/source/css/_animation.styl b/source/css/_animation.styl
@@ -20,4 +20,11 @@ vendors = official
 
 @keyframes transform-all
   100%
-    transform: translateX(-100px)
+    transform: translateX(-100px)
+
+if hexo-config("animation.enable")
+  body [data-aos='fade-up'] 
+    transform: translate3d(0, 30px, 0)
+
+  body [data-aos='zoom-in'] 
+    transform: scale(0.8)
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -142,6 +142,7 @@ $article-meta-tag
     border-radius: post-radius
     transition: 0.3s
     padding: 1px 10px
+    box-shadow: 0 0 5px 3px var(--color-meta-shadow)
 
     footer
       font-size: font-size
@@ -239,6 +240,7 @@ $article-meta-tag
   padding: 10px 18px
   margin-top: article-padding
   margin-right: 10px
+  box-shadow: 0 0 5px 3px var(--color-meta-shadow)
 
 .article-tag-list-link
   &:before

diff --git a/source/css/_partial/footer.styl b/source/css/_partial/footer.styl
@@ -49,6 +49,7 @@
   border-radius: 5px
   transition: .3s
   padding: 5px 10px
+  box-shadow: 0 0 5px 3px var(--color-meta-shadow)
 
   p
     font-size: 14px;

diff --git a/source/css/_partial/post.styl b/source/css/_partial/post.styl
@@ -6,6 +6,7 @@
   height: 100%
 
 $post-wrap
+  width: 100%
   height: 230px
   margin-bottom: 40px
   position: relative
@@ -14,6 +15,12 @@ $post-wrap
   display: flex
   transition: .3s
 
+[data-theme="dark"] .post-wrap-left, [data-theme="dark"] .post-wrap-right
+  box-shadow: 0 0 10px 3px var(--color-hover-shadow)
+
+.post-wrapper
+  border-radius: post-radius
+  transition: .3s
   @media mq-normal
     &:hover
       transform: scale(1.015)
@@ -22,9 +29,6 @@ $post-wrap
       img
         transform: scale(1.05)
 
-[data-theme="dark"] .post-wrap-left, [data-theme="dark"] .post-wrap-right
-  box-shadow: 0 0 10px 3px var(--color-hover-shadow)
-
 .post-wrap-right
   flex-direction: row-reverse
 
@@ -39,6 +43,7 @@ $post-wrap
   height: 100%
   width: 100%
   padding: 20px
+  overflow: hidden
   box-sizing: border-box
 
 .post-meta