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

推荐订阅源

Blog — PlanetScale
Blog — PlanetScale
博客园_首页
WordPress大学
WordPress大学
博客园 - 聂微东
P
Privacy International News Feed
Forbes - Security
Forbes - Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Last Week in AI
Last Week in AI
C
CERT Recently Published Vulnerability Notes
月光博客
月光博客
NISL@THU
NISL@THU
美团技术团队
T
Tailwind CSS Blog
Jina AI
Jina AI
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Apple Machine Learning Research
Apple Machine Learning Research
C
Cisco Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The Hacker News
The Hacker News
B
Blog
P
Palo Alto Networks Blog
L
Lohrmann on Cybersecurity
有赞技术团队
有赞技术团队
The Register - Security
The Register - Security
S
Securelist
A
Arctic Wolf
MyScale Blog
MyScale Blog
H
Help Net Security
N
Netflix TechBlog - Medium
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
T
Threatpost
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Security Latest
Security Latest
T
Tor Project blog
V
Vulnerabilities – Threatpost
V
V2EX
AI
AI
Hugging Face - Blog
Hugging Face - Blog
大猫的无限游戏
大猫的无限游戏
博客园 - Franky
Simon Willison's Weblog
Simon Willison's Weblog
小众软件
小众软件
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
H
Hackread – Cybersecurity News, Data Breaches, AI and More
T
Troy Hunt's Blog
Schneier on Security
Schneier on Security
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
H
Heimdal Security Blog
Google Online Security Blog
Google Online Security Blog
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 中的配置 Spring AI 中使用 PGVector 实现向量存储 提示词工程速查手册 2025 WePlay 上海两日游 和随机数生成相关的题目 一起撸串(字符串) 树状数组上手了就十分简单 缓存置换算法的实现与 Java 中相关的数据结构 关于海量数据的若干问题 访问者模式填补单分派语言的缺陷 备忘录模式:拍下照片
动态图片测试
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.