惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The Register - Security
The Register - Security
IT之家
IT之家
阮一峰的网络日志
阮一峰的网络日志
博客园 - 叶小钗
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
S
SegmentFault 最新的问题
有赞技术团队
有赞技术团队
博客园 - 【当耐特】
The Cloudflare Blog
T
The Blog of Author Tim Ferriss
Apple Machine Learning Research
Apple Machine Learning Research
C
Check Point Blog
Microsoft Azure Blog
Microsoft Azure Blog
V
V2EX
量子位
F
Fortinet All Blogs
Martin Fowler
Martin Fowler
大猫的无限游戏
大猫的无限游戏
Last Week in AI
Last Week in AI
博客园 - 聂微东
美团技术团队
Stack Overflow Blog
Stack Overflow Blog
Google DeepMind News
Google DeepMind News
宝玉的分享
宝玉的分享
M
MIT News - Artificial intelligence
U
Unit 42
罗磊的独立博客
MyScale Blog
MyScale Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
V
Visual Studio Blog
Jina AI
Jina AI
Recorded Future
Recorded Future
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
小众软件
小众软件
H
Help Net Security
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
MongoDB | Blog
MongoDB | Blog
N
Netflix TechBlog - Medium
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
B
Blog
J
Java Code Geeks
爱范儿
爱范儿
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
aimingoo的专栏
aimingoo的专栏
B
Blog RSS Feed
月光博客
月光博客
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
P
Privacy International News Feed
Know Your Adversary
Know Your Adversary
雷峰网
雷峰网

半方池水半方田

小球称重问题及其引申的思考 蓝色的结构色 病毒是不是生物? 把博客发布交给 GitHub Actions 省外居民身份证的补换领(苏州) hexo-filter-titlebased-link:构建你的数字花园 Vercel 应用实践学习 通过与 Keycloak 配合实现博客文章的受限访问功能 非公开的文章 Soft Mode 非公开的文章 Strict Mode 试试用代码块在 Hexo 中插入实况照片 Hexo-Butterfly 主题 Preloader 加载页定制 Keycloak 的部署以及 Hexo-Butterfly 网页应用的接入 随机访问文章的实现(Sitemap+本地缓存优化) Authentik 的部署记录 Waline 自建 Auth 认证 记一次行李托运理赔流程(南航) Docker 镜像的制作、拉取与运行 Hexo-Butterfly 主题中对 Algolia 搜索框 Power By 的定制 Hexo 动态加载配置(钩子函数) 设计原则 VSCode 中的配置
动态图片测试
wuanqin · 2026-04-14 · via 半方池水半方田

本文是对 Hexo 插件 uuanqin/hexo-filter-live-photo 的测试,欢迎你下载和体验。如果你有更多的建议或想法,欢迎 Issues 和 PRs!

This post is a test of the Hexo plugin uuanqin/hexo-filter-live-photo. You are welcome to download and try it out. If you have any suggestions or ideas, feel free to open Issues or submit PRs!

Readme Card

Live Photo Demonstration

在公园的角落,我们常常能遇到一些悠闲自在的小猫。它们或慵懒地晒着太阳,或好奇地打量着来往的行人,一举一动都格外治愈。下面就通过动态图片效果,来感受这些小家伙的可爱瞬间。

In the corners of the park, we often encounter leisurely kittens. They either lazily bask in the sun or curiously watch passers-by, and every move is incredibly healing. Let’s experience the lovely moments of these little guys through the live photo effect.

Live Photo

Live

鹅岭公园小猫 Kitten in Eling Park

点击或鼠标悬停即可播放一次小猫的动态画面,还原真实场景。

Click or hover the mouse to play the kitten’s dynamic footage once, restoring the real scene.

Live Photo

Live

循环播放的动图 Loop-Playing Live Photo

开启循环播放后,小猫的动态会一直重复展示,非常适合用来突出可爱的小动作,让画面更生动有趣。

With loop playback enabled, the kitten’s movement will repeat continuously, which is perfect for highlighting cute little actions and making the scene more vivid and interesting.


有时候我们不需要固定宽度,而是希望通过高度来控制整体比例,让动态图片在页面中更协调。

Sometimes we don’t need a fixed width; instead, we want to control the overall ratio by height to make the live photo more coordinated on the page.

Live Photo

Live

只设定高度 Only Set Height

只设置高度而不指定宽度,插件会自动按照视频原始比例进行适配,保证动态图片不会变形拉伸。

By setting only the height without specifying the width, the plugin will automatically adapt according to the original video ratio, ensuring the live photo will not be distorted or stretched.

同时设置宽度和高度可以精确控制动态图片的显示区域,适用于需要严格排版的页面布局。

Setting both width and height allows precise control over the display area of the live photo, suitable for page layouts that require strict typesetting.

Live Photo

Live

设定了宽高 Set Both Width and Height

如果你不想手动设置尺寸,也可以完全不填写 width 和 height 参数,插件会使用默认展示方式。

If you don’t want to set the size manually, you can leave the width and height parameters completely unset, and the plugin will use the default display mode.

Live Photo

Live

不设定尺寸参数 No Size Parameters Set


在实际使用过程中,可能会遇到地址填写错误的情况。插件对异常地址做了友好处理,下面分别展示不同错误场景的表现。

In actual use, you may encounter situations where the URL is incorrect. The plugin provides friendly handling for abnormal addresses. The following shows the performance of different error scenarios.

当视频地址无效但封面地址正常时,页面会正常显示封面图片,点击后不会播放视频。

When the video URL is invalid but the poster URL is correct, the poster image will be displayed normally, and no video will play when clicked.

Live Photo

Live

设置了错误的视频地址、正确的封面地址 Incorrect Video URL, Correct Poster URL

如果封面地址错误但视频地址有效,插件仍会尝试加载并展示动态图片,保证核心功能可以正常使用。

If the poster URL is wrong but the video URL is valid, the plugin will still try to load and display the live photo, ensuring the core function works normally.

Live Photo

Live

设置了错误的封面地址、正确的视频地址 Incorrect Poster URL, Correct Video URL

当视频地址与封面地址均无效时,插件会展示占位状态,不会破坏页面结构,提升用户体验。

When both the video and poster URLs are invalid, the plugin will show a placeholder state without breaking the page structure, improving the user experience.

Live Photo

Live

设置了错误的封面地址、视频地址 Incorrect Poster and Video URLs

通过以上各种示例,你可以清楚地看到本插件在不同配置、不同异常情况下的表现,方便你在自己的 Hexo 博客中灵活使用动态图片功能。

Through the above examples, you can clearly see how this plugin performs under different configurations and abnormal situations, making it easy for you to flexibly use the live photo feature in your own Hexo blog.