Hexo博客集成LivePhoto

昨日看到一网友分享,在个人博客里集成Live Photo,甚是炫酷!必须借鉴一手。

奈何技术水平不高,只能使用AI辅助编写,使用海外版的Trae。直接输入指令,让AI帮我集成Apple's LivePhotosKit.js

背景

Hexo + cactus主题

步骤

新增livephoto.js 和 livephoto.css

javascript 复制代码
/**
 * LivePhotos integration for Hexo
 * This script handles the integration of Apple's LivePhotosKit.js
 */

(function() {
  // 当文档加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    // 查找所有带有live-photo类的元素
    var livePhotoElements = document.querySelectorAll('.live-photo');

    if (livePhotoElements.length > 0) {
      // 如果页面上有实况照片元素,才加载LivePhotosKit.js
      var script = document.createElement('script');
      script.src = 'https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js';
      script.onload = function() {
        // LivePhotosKit.js加载完成后,初始化所有实况照片
        initializeLivePhotos(livePhotoElements);
      };
      document.head.appendChild(script);
    }
  });

  // 初始化所有实况照片元素
  function initializeLivePhotos(elements) {
    elements.forEach(function(element) {
      // 获取照片和视频的URL
      var photoSrc = element.getAttribute('data-photo-src');
      var videoSrc = element.getAttribute('data-video-src');

      if (photoSrc && videoSrc) {
        // 创建LivePhotosKit播放器
        var player = LivePhotosKit.Player(element);

        // 设置照片和视频源
        player.photoSrc = photoSrc;
        player.videoSrc = videoSrc;

        // 添加鼠标悬停事件来播放实况照片
        element.addEventListener('mouseenter', function() {
          player.play();
        });

        element.addEventListener('mouseleave', function() {
          player.pause();
        });

        // 添加触摸事件支持(移动设备)
        element.addEventListener('touchstart', function() {
          player.play();
        });

        element.addEventListener('touchend', function() {
          player.pause();
        });

        // 添加样式
        element.style.position = 'relative';
        element.style.overflow = 'hidden';
        element.style.display = 'inline-block';
      }
    });
  }
})();
javascript 复制代码
.live-photo {
    width: 100%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 4/3;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.live-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.live-photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

修改文件引用

javascript 复制代码
// <meta name="keywords" content= "<%= (theme.keywords) %>">
// meta标签之下
<!-- livephotos styles -->
    <%- css('css/livephotos') %>
javascript 复制代码
// <%- js('js/main') %> 43行之下
<%- js('js/livephotos') %>

编写示例

在Markdown文件中,你可以使用以下格式添加实况照片:

html 复制代码
<div class="live-photo" data-photo-src="https://你的OSS地址/照片.JPEG" data-video-src="https://你的OSS地址/视频.MOV">
</div>
相关推荐
一一一87111 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
梦想CAD控件27 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
DoraBigHead2 小时前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪0012 小时前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州2 小时前
希尔排序
前端·javascript
爱学习的茄子2 小时前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试
用户2519162427112 小时前
Canvas之绘制图形
前端·javascript·canvas