Skip to content

hugo-fixit/shortcode-caniuse

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hugo shortcode for CanIUse

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

shortcode-caniuse-preview

依赖

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
  • origin [可选](第四个位置参数)caniuse embed 数据源,例如:https://caniuse-embed-x.vercel.app

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

这是一个用法示例:

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

参考

致谢