Hugo shortcode for CanIUse

在 Hugo 中使用 shortcode 方式内嵌 CanIUse 到你的文章中。

依赖

FixIt 主题 v0.4.0 及以上版本。

安装组件

和 安装主题 一样，安装方式有多种，选择其一即可，例如通过 Hugo Modules 安装：

[module]
  [[module.imports]]
    path = "github.com/hugo-fixit/FixIt"
+ [[module.imports]]
+   path = "github.com/hugo-fixit/shortcode-caniuse"

配置

为了通过 FixIt 主题在 layouts/partials/custom.html 文件中开放的 自定义块 将 shortcode-caniuse.html 注入到 custom-assets 中，你需要填写以下必要配置：

[params]
  [params.customPartials]
    # ... other partials
    assets = [ "inject/shortcode-caniuse.html" ]
    # ... other partials

组件配置：

[params]
  # CanIUse Embed Element Configuration
  # See: https://github.com/Lruihao/caniuse-embed-element
  [params.caniuse_embed]
    # show the past N versions that match the feature, range is 0 - 5, default is 2
    past = 2
    # show the future N versions that match the feature, range is 0 - 3, default is 1
    future = 1
    # the origin of the caniuse embed data source, default is "https://caniuse.lruihao.cn"
    origin = "https://caniuse.lruihao.cn"
    # loading strategy for the iframe (eager or lazy), default is lazy
    loading = "lazy"
    # only production environment effective
    # e.g. https://unpkg.com/@cell-x/caniuse-embed-element/dist/caniuse-embed-element.iife.js
    cdn = ""

使用 Shortcode

caniuse shortcode 有以下命名参数：

• feature [必需]（第一个位置参数）特性名称
• past [可选]（第二个位置参数）显示过去 N 个版本，范围是 0 - 5，默认为 2
• future [可选]（第三个位置参数）显示未来 N 个版本，范围是 0 - 3，默认为 1
• origin [可选]（第四个位置参数）caniuse embed 数据源，例如：https://caniuse-embed-x.vercel.app
• loading [可选]（第五个位置参数）iframe 的加载策略（eager 或 lazy），默认为 lazy

点击 caniuse.com 网站上功能左边 # 号，URL 中的 pathname 即为 feature 参数。

这是一个用法示例：

{{< caniuse feature="flexbox" >}}
或者
{{< caniuse "flexbox" >}}

参考

• The CanIUse Embed — Add support tables to your site
• Can I use… Support tables for HTML5, CSS3, etc

致谢

• Lruihao/caniuse-embed-element
• pengzhanbo/caniuse-embed
• mdn-browser-compat-data
• Fyrd/caniuse