添加 LivePhoto 📷 功能

src/content/blog/Astro主题优雅的vhAstro-Theme.md

@@ -433,6 +433,19 @@ $\cup$、$\cap$、$\in$、$\notin$、$\ni$、$\subset$、$\subseteq$、$\supset$
 ![Astro主题-vhAstro-Theme](https://i0.wp.com/uxiaohan.github.io/v2/2023/03/42944511.png)
 :::
 
+### LivePhoto 组件
+
+```md
+<!-- 纵向图片 -->
+::vhLivePhoto{photo="https://static.vvhan.com/img/1.webp" video="https://static.vvhan.com/img/1.mp4" type="y"}
+<!-- 横向图片 -->
+::vhLivePhoto{photo="https://static.vvhan.com/img/2.webp" video="https://static.vvhan.com/img/2.mp4"}
+```
+
+::vhLivePhoto{photo="/public/assets/livephoto/1.webp" video="/public/assets/livephoto/1.mp4" type="y"}
+
+::vhLivePhoto{photo="/public/assets/livephoto/2.webp" video="/public/assets/livephoto/2.mp4"}
+
 ### Music 组件
 
 ```md

src/scripts/Init.ts

@@ -5,6 +5,8 @@ import codeInit from "../scripts/Code";
 import videoInit from "../scripts/Video";
 // 初始化音乐播放器
 import musicInit from "../scripts/Music";
+// 初始化 LivePhoto
+import livePhotoInit from './LivePhoto'
 // 初始化BackTop组件
 import BackTopInitFn from "../scripts/BackTop";
 // 搜索
@@ -72,6 +74,8 @@ const indexInit = async (only: boolean = true) => {
   videoInit(videoList);
   // 文章音乐播放器初始化
   musicInit(MusicList);
+  // 初始化 LivePhoto
+  livePhotoInit();
 };
 
 export default () => {

src/scripts/LivePhoto.ts

@@ -0,0 +1,15 @@
+// SmoothScroll 滚动优化
+import { LoadScript } from "../utils/index";
+declare const LivePhotosKit: any;
+export default async () => {
+  const livePhotoList = document.querySelectorAll('.vh-node.vh-vhLivePhoto');
+  if (!livePhotoList.length) return;
+  await LoadScript("/assets/js/livephotoskit.js");
+  livePhotoList.forEach((i: any) => {
+    const { photo, video } = i.dataset;
+    i.innerHTML = `<div class="live-raw"></div>`
+    const player = LivePhotosKit.Player(i.querySelector('.live-raw'));
+    player.photoSrc = photo;
+    player.videoSrc = video;
+  })
+};

src/styles/Article.less

@@ -547,6 +547,34 @@ section.vh-container {
           }
         }
       }
+
+      // ::vhLivePhoto
+      &.vh-vhLivePhoto {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='8' height='8' fill='none' stroke='rgb(0 0 0 / 0.1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+
+        &.vhLivePhoto-y {
+          aspect-ratio: 9 / 16;
+          max-height: 66vh;
+          max-width: 100%;
+        }
+
+        &>div {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+
+          :not(.lpk-live-photo-renderer) {
+            &>canvas {
+              z-index: 9 !important;
+            }
+          }
+        }
+      }
     }
 
     // 页面图片样式

src/styles/components/Comment.less

@@ -186,6 +186,7 @@
                 bottom: -0.4rem;
                 width: 0.8rem;
                 height: 0.8rem;
+                border-radius: 50%;
                 background: #fff url("/public/assets/images/admin.svg") no-repeat;
                 background-size: cover;
               }

src/utils/index.ts

@@ -31,7 +31,7 @@ const fmtDate = (time: string | Date, hours_status = true) => {
     years && `${years}年`,
     months && `${months}月`,
     days && `${days}天`,
-    hours_status ? hours && !years && !months && `${hours}小时` : 0,
+    (hours_status || days === 0) ? hours && !years && !months && `${hours}小时` : 0,
     hours_status ? minutes && !years && !months && !days && `${minutes}分` : '',
     hours_status ? seconds && !years && !months && !days && !hours && `${seconds}秒` : ''
   ].filter(Boolean).join('');