Updata blog

Author: windshadow233

_config.butterfly.yml

@@ -1101,6 +1101,7 @@ inject:
     - <script type="text/javascript" src="https://fastly.jsdelivr.net/gh/windshadow233/BlogStorage@files/js/comment-barrage.js"></script>
     - <script type="text/javascript" src="https://fastly.jsdelivr.net/gh/windshadow233/BlogStorage@files/js/waterfall@v2.0.0.js"></script>
     - <script type="text/javascript" src="https://fastly.jsdelivr.net/gh/windshadow233/BlogStorage@files/js/mytalk@v0.0.5.js"></script>
+    - <script type="text/javascript" src="https://fastly.jsdelivr.net/gh/windshadow233/BlogStorage@files/js/lottie_light@v5.13.0.min.js"></script>
     - <script type="text/javascript" src="/js/random.js"></script>
     - <script type="text/javascript" src="/js/custom.js"></script>
   bottom:

scripts/mbti.js

@@ -7,25 +7,6 @@ hexo.extend.filter.register('template_locals', function (locals) {
 
   const card_mbti = JSON.parse(JSON.stringify(card_mbti_src));
 
-  const mbtiImages = {
-    INTJ: 'https://blogfiles.oss.fyz666.xyz/svg/e54d2a84-55fd-414d-81af-7493ff2e11c1.svg',
-    INTP: 'https://blogfiles.oss.fyz666.xyz/svg/a10c4445-b614-4d11-b45e-cfda23dbd485.svg',
-    ENTJ: 'https://blogfiles.oss.fyz666.xyz/svg/c29d423d-b3ea-49a8-a78b-1f2c74133ba9.svg',
-    ENTP: 'https://blogfiles.oss.fyz666.xyz/svg/c80b91f1-2305-46b7-bb13-1dca4b168983.svg',
-    INFJ: 'https://blogfiles.oss.fyz666.xyz/svg/3a894383-b796-46f3-9320-6f39360d9a66.svg',
-    INFP: 'https://blogfiles.oss.fyz666.xyz/svg/39e1659f-5eef-4709-bc5f-c5e588168293.svg',
-    ENFJ: 'https://blogfiles.oss.fyz666.xyz/svg/40031020-9ea7-43e0-b2ac-fd0348181a66.svg',
-    ENFP: 'https://blogfiles.oss.fyz666.xyz/svg/9e11c236-d35d-4118-b1f9-2ee9427b8dcb.svg',
-    ISTJ: 'https://blogfiles.oss.fyz666.xyz/svg/1222b517-92dd-48dc-a4e7-b762bafb5419.svg',
-    ISFJ: 'https://blogfiles.oss.fyz666.xyz/svg/4b4833f4-b189-419a-978b-a1e2ab594e4c.svg',
-    ESFJ: 'https://blogfiles.oss.fyz666.xyz/svg/d2ea3f35-23f3-4475-b238-78deea37a8f3.svg',
-    ESFP: 'https://blogfiles.oss.fyz666.xyz/svg/dd593ab0-1531-4816-9eff-1658f51ba35f.svg',
-    ESTJ: 'https://blogfiles.oss.fyz666.xyz/svg/3ef072a8-b238-4c83-80af-33f33b85bc47.svg',
-    ESTP: 'https://blogfiles.oss.fyz666.xyz/svg/643f62d0-777c-427b-b504-8796d02bb241.svg',
-    ISFP: 'https://blogfiles.oss.fyz666.xyz/svg/688412b9-d42d-4a17-bf3a-64dfd4eb76fa.svg',
-    ISTP: 'https://blogfiles.oss.fyz666.xyz/svg/ff7c5a0c-a453-45b1-a18a-aefa0253b555.svg'
-  };
-
   const mbtiNames = {
     INTJ: '架构师',
     INTP: '逻辑学家',
@@ -83,14 +64,14 @@ hexo.extend.filter.register('template_locals', function (locals) {
 
   let mbti_text = mbtiKeys.map((k) => String(card_mbti[k]?.type || '')).join('');
   let mbti_text_additional = '';
-  const image = mbtiImages[mbti_text] || '';
+  const animation = `https://blogfiles.oss.fyz666.xyz/mbti-animation/${mbti_text.toLowerCase()}.json`;
   const name = mbtiNames[mbti_text] || '';
   if (card_mbti.at) {
     mbti_text_additional = `-${String(card_mbti.at.type || '')}`;
   }
   const mbti_text_full = `${mbti_text}${mbti_text_additional}`;
   const update = card_mbti.date;
 
-  locals.mbti = { card_mbti, percentValues, mbti_text, mbti_text_full, name, image, update};
+  locals.mbti = { card_mbti, percentValues, mbti_text, mbti_text_full, name, animation, update};
   return locals;
 });

themes/butterfly/layout/includes/page/about.pug

@@ -134,7 +134,17 @@
         | 了解更多关于
         a(target='_blank', rel='noopener external nofollow', href=`https://www.16personalities.com/ch/${mbti.mbti_text}-%E4%BA%BA%E6%A0%BC`)= mbti.name
       .image
-        img.no-lightbox(src=mbti.image)
+        #mbti-image
+      script.
+          $(document).ready(function() {
+            lottie.loadAnimation({
+              container: document.getElementById('mbti-image'),
+              renderer: 'svg',
+              loop: true,
+              autoplay: true,
+              path: "#{mbti.animation}"
+            });
+          });
   .author-content
     .author-content-item.buff
       .card-content

themes/butterfly/layout/includes/widget/card_mbti.pug

@@ -71,17 +71,12 @@ style.
         position: absolute;
         right: 0px;
         top: 10px;
-        width: 75px;
-        transition: transform 2s cubic-bezier(.13, .45, .21, 1.02);
+        width: 65px;
         opacity: 0.8;
     }
-    .mbti .image img {
+    .mbti .image #mbti-image {
         display: block;
         max-width: 100%;
-        transition: filter 375ms ease-in .2s
-    }
-    .mbti:hover .image {
-        transform: rotate(-10deg);
     }
 
 - const mbtiMap = {E: '外倾', I: '内倾', S: '现实', N: '直觉', T: '理性', F: '感性', J: '有计划', P: '灵活'}
@@ -113,6 +108,16 @@ style.
           span= label1
           span= label2
     .image
-      img(src=mbti.image alt=mbti.mbti_text)
+      div(id="mbti-image")
     .mbti-date= `更新于：${mbti.update}`
 
+script.
+  $(document).ready(function() {
+    lottie.loadAnimation({
+      container: document.getElementById('mbti-image'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: "#{mbti.animation}"
+    });
+  });

themes/butterfly/source/css/_custom/about/about.css

@@ -318,25 +318,21 @@ p.p.center, span.p.center {
 }
 .author-content-item.personalities {
   position: relative;
-  /* width: 59%; */
   width: 100%;
   height: 250px;
 }
 
 .author-content-item.personalities .image {
   position: absolute;
-  right: 30px;
+  right: 0;
   top: 10px;
-  transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02);
+  height: 230px;
+  width: 230px;
 }
-.author-content-item.personalities .image img {
+.author-content-item.personalities .image #mbti-image {
   display: block;
   margin: 0 auto 20px;
   height: 230px;
-  transition: filter 375ms ease-in 0.2s;
-}
-.author-content-item.personalities:hover .image {
-  transform: rotate(-10deg);
 }
 .author-content-item:hover .card-background-icon {
   transform: rotate(20deg);
@@ -384,13 +380,7 @@ p.p.center, span.p.center {
 }
 .author-content-item.selfInfo {
   display: flex;
-  /* max-height: 140px; */
-  /* justify-content: space-between; */
   align-items: center;
-  /* flex-wrap: wrap; */
-  /* height: -webkit-fill-available; */
-  /* min-height: 140px; */
-  /* min-height: 140px; */
   height: calc(40% - 20px);
 }
 .author-content-item.selfInfo div {