Stellar主题实况照片功能测试

本文用于测试Stellar主题新增的实况照片功能。

功能测试说明

交互测试重点

1. LIVE图标区域：PC端悬停播放视频
2. 图片区域：点击进入Fancybox
3. 移动端长按：长按整个实况照片区域播放视频
4. 混合浏览：在Fancybox中与普通图片一起浏览

普通图片测试

首先测试普通图片的显示和Fancybox功能：

普通图片测试

属性冲突测试

ratio与width/height冲突测试

普通图片测试

1
2
3
4
5
6
7
8

<!-- 只使用width/height -->
{% image /images/logo.png 只有尺寸 width:200px height:150px %}

<!-- 只使用ratio -->
{% image /images/logo.png 只有比例 ratio:4/3 %}

<!-- 同时使用（width/height会被忽略） -->
{% image /images/logo.png 冲突测试 width:200px height:150px ratio:4/3 %}

实况照片测试

1
2
3
4
5
6
7
8

<!-- 只使用width/height -->
{% image /images/1.avif 只有尺寸 width:200px height:150px livephoto:/images/1.mp4 %}

<!-- 只使用ratio -->
{% image /images/1.avif 只有比例 ratio:4/3 livephoto:/images/1.mp4 %}

<!-- 同时使用（width/height会被忽略） -->
{% image /images/1.avif 冲突测试 width:200px height:150px ratio:4/3 livephoto:/images/1.mp4 %}

实际测试

普通图片 - 只有尺寸

只有尺寸

普通图片 - 只有比例

只有比例

普通图片 - 冲突测试（width/height被忽略）

冲突测试

实况照片 - 只有尺寸

LIVE

只有尺寸

实况照片 - 只有比例

LIVE

只有比例

实况照片 - 冲突测试（width/height被忽略）

LIVE

冲突测试

属性支持测试

基础属性测试

LIVE

基础实况照片

尺寸控制测试

LIVE

固定尺寸实况照片

容器样式测试

LIVE

带背景的实况照片

宽高比测试

LIVE

16:9比例实况照片

下载功能测试

LIVE

可下载实况照片

完整功能测试

LIVE

完整功能实况照片

基础实况照片测试（无fancybox）

测试基础实况照片功能，只有悬停播放，不能点击放大：

LIVE

基础实况照片测试

尺寸控制测试

测试固定尺寸的实况照片：

LIVE

固定尺寸实况照片

容器样式测试

测试带背景和内边距的实况照片：

LIVE

带背景的实况照片

增强实况照片测试（配合fancybox）

测试增强实况照片功能，既能悬停播放，也能点击进入Fancybox：

LIVE

增强实况照片测试

混合显示测试

测试普通图片和实况照片的混合显示：

Logo图片

LIVE

实况照片示例

网站图标

功能说明

功能分层

1. 基础功能（始终可用）：

   • 文章内显示LIVE标识
   • 悬停/触摸播放视频
   • 无需任何插件依赖

2. 增强功能（需要fancybox:true）：

   • 点击进入Fancybox查看大图
   • Fancybox内的完整实况照片体验
   • 与普通图片混合浏览
   • 自动播放设置控制

实况照片特性

1. 静态预览：在文章中显示为静态图片，左上角有LIVE标识
2. 精确交互：只有悬停在LIVE图标区域时才播放视频，图片区域可正常点击进入Fancybox
3. 移动端适配：移动端触摸LIVE图标区域播放视频
4. 独立性：基础功能不依赖fancybox，增强功能可选启用
5. 兼容性：与普通图片完全兼容

交互说明

• PC端：
  • 鼠标悬停在左上角的LIVE图标上播放视频（显示手型光标 👆）
  • 点击图片区域进入Fancybox（显示放大光标 🔍）
• 移动端：
  • 长按整个实况照片区域播放视频（500ms长按触发，带触觉反馈）
  • 短触摸图片区域进入Fancybox
  • 触摸移动会取消长按操作
• Fancybox内：完整的实况照片交互体验，包括悬停播放和设置控制

光标指示

• 图片区域：🔍 放大光标（与普通图片一致）
• LIVE图标：👆 手型光标（表示可播放视频）

使用语法

基础语法（无fancybox）

1

{% image 图片URL 描述文字 livephoto:视频URL %}

增强语法（配合fancybox）

1

{% image 图片URL 描述文字 fancybox:true livephoto:视频URL %}

参数说明

• 图片URL：实况照片的静态图片地址
• 描述文字：图片的描述文字（可选）
• livephoto:视频URL：指定实况照片对应的视频地址
• fancybox:true：可选，启用Fancybox放大预览和增强功能

技术实现要点

HTML结构

1
2
3
4
5
6
7
8

<div class="livephoto-container" data-fancybox="true" data-livephoto-image="..." data-livephoto-video="...">
  <img class="livephoto-image" src="..." alt="...">
  <video class="livephoto-video" src="..." preload="metadata" muted playsinline>
  <div class="livephoto-overlay">
    <svg class="livephoto-icon">...</svg>
    <span class="livephoto-text">LIVE</span>
  </div>
</div>

事件绑定

• data-fancybox属性在容器上，确保整个区域可点击
• LIVE图标区域的点击事件被阻止，不会触发Fancybox
• 只有悬停LIVE图标才播放视频

注意事项

1. 实况照片需要同时提供图片和视频文件
2. 建议视频文件较小，以确保良好的加载体验
3. 支持与普通图片混合使用，在Fancybox中可以统一浏览
4. 移动端和PC端都有良好的交互体验
5. 重要：点击图片区域进入Fancybox，悬停LIVE图标播放视频

本功能基于Ech0项目的实况照片实现，完整复刻了其显示效果和交互体验。