Astro 博客集成 Apple LivePhoto 功能

Published: at 03:29

我的 Astro 博客日记：成功集成 Apple Live Photo

今天我花了一整个上午，把 Apple 官方的 Live PhotosKit JS 集成到我的 Astro 博客里，终于可以在相册页面里播放 Live Photo 了！记录一下整个过程，也算给自己留个技术笔记。

一、起因

一直想在博客里记录家人的点滴瞬间，单纯的静态图片已经满足不了需求。我在 iPhone 上拍的 Live Photo 视频动态感很好，如果能直接在网页上播放，那就完美了。

于是我查到了 Apple 官方 LivePhotosKit JS 文档，决定尝试集成到我的 Astro 博客相册页面。

二、准备工作

  1. 下载 LivePhotosKit 官方 JS 文件到本地，放在 /public/js/livephotoskit.js
  2. 在 src/styles 下新建 livephoto.css，用于自定义 Live Photo 样式，避免引用外链 CSS
  3. 确认相册图片结构，包括普通图片和 Live Photo 数据：
const photos = [
  { src: "/images/gallery/family1.jpeg", alt: "Family picnic" },
  { src: "/images/gallery/family2.jpeg", alt: "Travel 2023" },
  {
    isLive: true,
    photoSrc: "/images/gallery/IMG_3004.png",
    videoSrc: "/images/gallery/IMG_3004.mov",
    alt: "Live Photo - Beach",
  },
];

注意：必须标记 isLive: true，并分别提供封面图 photoSrc 和视频 videoSrc。

三、HTML 与 Astro 模板结构

我在 src/pages/gallery/index.astro 中修改模板，让 Live Photo 与普通图片共存：

<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
  {photos.map((photo) =>
    photo.isLive ? (
      <div
        class="live-photo"
        data-live-photo
        data-photo-src={photo.photoSrc}
        data-video-src={photo.videoSrc}
        aria-label={photo.alt}
      ></div>
    ) : (
      <a href={photo.src} class="group" data-lightbox="gallery">
        <img src={photo.src} alt={photo.alt} class="rounded-lg shadow-md group-hover:opacity-80 transition"/>
      </a>
    )
  )}
</div>

四、自定义 CSS

.live-photo {
  width: 100%;
  height: 240px; /* 必须有非零高度 */
  border-radius: 10px;
  overflow: hidden;
  background-color: #000;
  cursor: pointer;
}
.live-photo img,
.live-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

✅ 目前css还有一点问题，视频无法覆盖背景

五、引入 JS

我直接在 Astro 模板底部引入官方 JS：

<script src="/js/livephotoskit.js" is:inline></script>

注意：不需要手动调用 LivePhotosKit.Player.init()，官方脚本会自动初始化所有 data-live-photo 元素。

六、遇到的问题

七、成果展示

现在博客相册页面可以同时展示：

感觉整个相册页面更加生动，也更有记忆感。