Hexo 中实现 Live Photos 支持
3 min read
使用 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 文件中使用以下格式
1 | |
(