From cf117ea70c75f7ba92fc15d3e91a78ae1ab0f3f1 Mon Sep 17 00:00:00 2001
From: D-Sketon <2055272094@qq.com>
Date: Mon, 26 Jun 2023 19:57:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=87=92=E5=8A=A0=E8=BD=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                      | 2 +-
 source/css/_partial/article.styl | 8 +++++++-
 source/css/_partial/friend.styl  | 1 +
 source/css/_partial/post.styl    | 3 ++-
 source/css/_partial/sidebar.styl | 1 +
 source/css/_util/animation.styl  | 6 ++++++
 source/css/style.styl            | 1 +
 source/js/script.js              | 9 +++++++++
 8 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 source/css/_util/animation.styl

diff --git a/_config.yml b/_config.yml
index 36f5410..96c310d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -117,6 +117,6 @@ vendor:
     pace: https://unpkg.com/pace-js@1.2.4/pace.min.js
     mermaid: https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js
   css:
-    highlight: https://cdn.jsdelivr.net/npm/typeface-source-code-pro@latest/index.min.css
+    highlight: https://unpkg.com/typeface-source-code-pro@1.1.13/index.css
     fancybox: https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
     katex: https://unpkg.com/katex@0.16.7/dist/katex.min.css
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
index 1ee4a51..079294e 100644
--- a/source/css/_partial/article.styl
+++ b/source/css/_partial/article.styl
@@ -110,6 +110,12 @@ $article-meta-tag
     height: auto
     display: block
     margin: auto
+    opacity: 0
+    transition: all 0.3s ease
+
+  img.lazyloaded
+    opacity: 1
+    animation: blur 0.8s ease-in-out forwards
 
   iframe
     border: none
@@ -291,7 +297,7 @@ $article-meta-tag
   img
     display: block
     opacity: 0
-    transition: opacity 200ms ease-out
+    animation: blur 0.8s ease-in-out forwards
     position: absolute
     left: 0
     top: 0
diff --git a/source/css/_partial/friend.styl b/source/css/_partial/friend.styl
index be92500..eab45b2 100644
--- a/source/css/_partial/friend.styl
+++ b/source/css/_partial/friend.styl
@@ -48,6 +48,7 @@
 
     img.lazyloaded
       opacity: 1
+      animation: blur 0.8s ease-in-out forwards
 
 .friend-info-wrap
   display: flex
diff --git a/source/css/_partial/post.styl b/source/css/_partial/post.styl
index 5934eec..af59f4f 100644
--- a/source/css/_partial/post.styl
+++ b/source/css/_partial/post.styl
@@ -123,7 +123,7 @@ $post-cover
   img
     display: block
     opacity: 0
-    transition: all 0.3s ease
+    transition: opacity 200ms ease-out
     position: absolute
     left: 0
     top: 0
@@ -133,6 +133,7 @@ $post-cover
 
   img.lazyloaded
     opacity: 1
+    animation: blur 0.3s ease-in-out forwards
 
 .post-cover-left
   @media mq-normal
diff --git a/source/css/_partial/sidebar.styl b/source/css/_partial/sidebar.styl
index 44b15dd..40847f6 100644
--- a/source/css/_partial/sidebar.styl
+++ b/source/css/_partial/sidebar.styl
@@ -45,6 +45,7 @@
 
   img.lazyloaded
     opacity: 1
+    animation: blur 0.8s ease-in-out forwards
 
   .sidebar-author-name
     font-weight: bold
diff --git a/source/css/_util/animation.styl b/source/css/_util/animation.styl
new file mode 100644
index 0000000..e10e71f
--- /dev/null
+++ b/source/css/_util/animation.styl
@@ -0,0 +1,6 @@
+@keyframes blur 
+  0%
+    filter: blur(10px)
+  
+  to
+    filter: blur(0)
diff --git a/source/css/style.styl b/source/css/style.styl
index 5090c25..f2d1bd8 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -2,6 +2,7 @@
 @import "_variables"
 @import "_util/mixin"
 @import "_util/grid"
+@import "_util/animation"
 @import "_extend"
 
 global-reset()
diff --git a/source/js/script.js b/source/js/script.js
index ca57a39..3cc2d02 100644
--- a/source/js/script.js
+++ b/source/js/script.js
@@ -23,6 +23,15 @@ const getRealPath = (pathname, desc = false) => {
 };
 
 (function ($) {
+  // lazysizes
+  const imgs = $('.article-entry img');
+  imgs.each(function() {
+    const src = $(this).attr('src');
+    $(this).addClass('lazyload');
+    $(this).removeAttr('src');
+    $(this).attr('data-src', src);
+    $(this).attr('data-sizes','auto');
+  })
   // Share
   $('body').on('click', function () {
     $('.article-share-box.on').removeClass('on');