magequest/magento2-module-lite-youtube

一个为 Magento 2 添加 Paul Irish 的 Lite YouTube 实现支持的模块。

维护者

详细信息

github.com/MageQuest/magento2-module-lite-youtube

源代码

问题

安装次数: 30,536

依赖项: 0

建议者: 0

安全性: 0

星标: 34

关注者: 1

分支: 1

开放性问题: 1

语言:JavaScript

类型:magento2-module

1.0.1 2022-12-22 10:07 UTC

Requires

  • magento/framework: >=103.0.0

MIT 8f44cbfe02bff43518143dc5e45d99a65ad1cb7f

This package is auto-updated.

Last update: 2024-09-22 14:20:44 UTC

README

YouTube 视频，但性能优越。适用于 Magento 2。

Magento 2.4 Hyvä Themes Supported Packagist Version MIT License

概述

一个为 Magento 2 添加高性能 YouTube 嵌入（无用户体验影响）的模块，基于 Paul Irish 的 Lite YouTube 实现。

包括更多增强功能，如图像质量（大小）、WebP 支持、自定义占位图图像、图像懒加载和页面构建器内容类型。

功能

  • 允许在店面任何地方使用 <lite-youtube> 元素
  • 可用于 CMS 页面/块、属性输出或代码
  • 添加页面构建器内容类型以简化使用（带有管理员预览）
  • 选择默认占位图图像质量（大小）
  • 在浏览器支持的情况下使用 WebP 图像格式
  • 可选添加自定义占位图图像
  • 选择是否对占位图图像进行懒加载
  • 将关键 CSS 添加到 <head> 以抵消 CLS (Cumulative Layout Shift)
  • 剩余的 CSS/JS 仅在页面存在 <lite-youtube> 元素时加载

安装

composer require magequest/magento2-module-lite-youtube
bin/magento module:enable MageQuest_LiteYouTube
bin/magento setup:upgrade

使用方法

有关基本使用方法，请参阅 Paul Irish 的 Lite YouTube README。

注意：在此实现中不建议使用渐进增强选项，因为按钮和图像都可以进行懒加载，这样做有助于减少 CLS (https://webdev.ac.cn/cls/)。

附加控制

以下附加功能通过 此 Lite YouTube 分支 实现

  • 默认占位图图像质量：quality="hqdefault|sddefault|maxresdefault"
    • hqdefault 是默认值
    • 在此处查看尺寸和可用性概述 这里
  • 自定义占位图图像：image="<image-url>"
  • 禁用占位图图像懒加载：lazy="false"

兼容性

  • Magento Open Source / Commerce Edition 2.4.x
  • 支持 Magento 2 全页缓存（包括 Varnish）
  • 支持基于 Luma/Blank 和 Hyvä 主题的店面
  • 不支持 Internet Explorer

常见问题解答

如果网站没有使用/使用页面构建器，我可以使用该模块吗？

是的，您只需将 <lite-youtube> 元素手动添加到 CMS 块/页面、属性或支持 HTML 输入的任何地方即可。

为什么压缩后的 CSS 也包含关键 CSS？

因为 CSS 在管理面板和店面中都必需，我在管理面板中遇到了关键 CSS 识别问题，并且不想为了 10 行 CSS 而维护两个单独的 CSS 文件。

贡献

欢迎问题和拉取请求。