使用 Live Photos，您的 iPhone 会记录您拍照前后 1.5 秒发生的事情。 这段 3 秒的内容是由一张 JPG 图片以及一个 45 帧的 MOV 视频文件所组成。

之前一直想给博客添加实况图的支持，原本是打算手撸一个出来，但碍于时间原因一直没弄，最近发现原来苹果有一个官方支持库 LivePhotosKit JS，那么问题都迎刃而解了。

首先，由于不是所有文章都需要添加实况图，所以为了节省资源，我们可以在页面中动态加载 LivePhotosKit.js，当页面中包含 Live Photo 时才进行加载：

document.addEventListener('DOMContentLoaded', function () {
    const livePhotoElements = document.querySelectorAll('[data-live-photo]');
    if (livePhotoElements.length > 0) {
        const script = document.createElement('script');
        script.src = 'https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js';
        document.head.appendChild(script);
    }
});

接下来，只需要在 Hexo 中实现 实况照片（Live Photo） 功能即可。通过查阅 Hexo Wiki，可以发现有两个功能对我们非常有帮助，分别是 标签插件（Tag） 和 过滤器（Filter），我们可以任选其一（博主更推荐使用过滤器）。

标签（tag）

我们可以通过 Hexo 的自定义标签功能，定义一个 live 标签，将指定的图片和视频渲染为 Live Photo 格式。

在 Hexo 项目的 scripts 文件夹中创建一个文件（如 live_photo.js），并添加以下代码：

hexo.extend.tag.register('live', function (args) {
  const [imageSrc, videoSrc] = args;
  
  return `
<figure style="text-align: center; color:#0003">
  <div
    data-live-photo
    data-photo-src="${imageSrc}"
    data-video-src="${videoSrc}"
    style="width: 320px; height: 320px; margin: 0 auto; overflow: hidden;">
  </div>
  <figcaption stlye="margin-top: 4px;">${altText}</figcaption>
</figure>
  `;
}, { ends: false });

在你的 Markdown 文件中使用如下格式

{% live 文字描述 图片链接 视频链接 %}

当 Hexo 渲染页面时，上述自定义标签会被替换为

<figure style="text-align: center; color:#0003">
  <div
    data-live-photo
    data-photo-src="图片链接"
    data-video-src="视频链接"
    style="width: 320px; height: 320px; margin: 0 auto; display: block; overflow: hidden;">
  </div>
  <figcaption stlye="margin-top: 4px;">图片描述</figcaption>
</figure>

过滤器（filter）

另一种方法是通过 Hexo 的过滤器功能，将特定的 Markdown 语法自动转换为 Live Photo 的 HTML 结构。

在 scripts 文件夹中创建一个文件（如 live-photo-filter.js），并添加以下代码：

hexo.extend.filter.register('before_post_render', function (data) {
  data.content = data.content.replace(
    /!\[(.*?)\]\((.*?)\)\((.*?)\)/g,
    (match, altText, imageSrc, videoSrc) => `
<figure style="text-align: center; color:#0003">
  <div
    data-live-photo
    data-photo-src="${imageSrc}"
    data-video-src="${videoSrc}"
    style="width: 320px; height: 320px; margin: 0 auto; overflow: hidden;">
  </div>
  <figcaption stlye="margin-top: 4px;">${altText}</figcaption>
</figure>
`
  );
  return data;
});

在 Markdown 文件中使用以下格式

![示例图](https://5ime.cn/live-photos/1.jpg)(https://5ime.cn/live-photos/1.mov)

示例