Hugo shortcode for CanIUse

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

依赖

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

安装组件

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

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

注入 Partial

通过 FixIt 主题开放的自定义块，在 layouts/partials/custom.html 文件将 shortcode-caniuse.html 注入到 custom-assets 中：

{{- define "custom-assets" -}}
  {{- partial "inject/shortcode-caniuse.html" . -}}
{{- end -}}

使用 Shortcode

caniuse shortcode 有以下命名参数：

• feature [必需]（第一个位置参数）特性名称
• past [可选]（第二个位置参数）显示过去 N 个版本，范围是 0 - 5，默认为 2
• future [可选]（第三个位置参数）显示未来 N 个版本，范围是 0 - 3，默认为 1

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

这是一个用法示例：

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

参考

• Can I use… Support tables for HTML5, CSS3, etc
• The CanIUse Embed — Add support tables to your site
• 贡献指南 / 开发组件

致谢

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