前言
作为前端开发者，时常需要关注浏览器的兼容性问题。但是，了解每个属性或方法在不同浏览器上的兼容情况是一个不小的挑战。不过，我们可以使用 caniuse 这个工具来解决这个问题。caniuse 为我们提供了一个网站来查询各个属性及方法在不同浏览器上的兼容情况。但是，如果你需要在自己的文章中嵌入这些信息，就需要复制粘贴的方式，如果需要经常使用，就会费时费力。不过，好在有一个 npm 包可以帮助我们自动生成这些信息 -- hexo-caniuse。
安装
在使用 hexo-caniuse 插件前，需要先确保已经安装了 Node.js 和 Hexo。
然后，在命令行中输入以下命令，即可安装 hexo-caniuse 插件。
npm i hexo-caniuse --save
使用
安装完成后，在 Hexo 博客中添加以下配置即可：
caniuse: url: https://caniuse.com/ show_link: true use_locales: false show_chart: true
其中，可以通过 url 指定 caniuse 的地址，也可以通过 show_link 指定是否显示相关链接，通过 use_locales 指定是否使用本地化的信息，通过 show_chart 指定是否显示兼容性图表。可以根据自己的需求对这些配置进行调整。
配置完成后，只需要在 markdown 中添加以下代码，即可生成所需要的兼容性信息。
{% caniuse css-flexbox %}其中，css-flexbox 可替换成需要查询的属性或方法。
示例代码
以下为一个完整例子：
---
title: "flexbox 兼容性查询"
---
在不同浏览器上的 [flexbox](https://caniuse.com/flexbox) 兼容性情况如下。
{% caniuse css-flexbox %}在生成的 html 中，会自动生成类似下面的代码：
-- -------------------- ---- -------
----------- -- ---------------------------------------------- ------------
----------- ------------
---- ------------------------------
------ -------------------- ---------------------- ---------------
-------
----
--- ----------------
---------
-----
--------
-------
--- -------------------------------- ------------------------------------
--- -----------------
------- --------------------- ------------
-----
--- -------------- - ---- --- ---- -------------------------- -------------- ------- ------ -- ---- -- ------- --- ---- ---- -- --- -------------- ---- --- --- -------- ------- -------------------------
-----
--- -------------------------------- ------------------------------------
--- -----------------
------- --------------------- ----------
-----
--- -------------- - ---- --------
-----
--- -------------------------------- ------------------------------------
--- -----------------
------- --------------------- -------------
-----
--- -------------- - ---- --- ---- -------------------------- -------------- ------- ------ -- ---- -- ------- --- ----------------- ---------
- --- --------- --- ---------------------------------------------- -- -------------------------------------------- -- ------------------------------------------------
- ---- ------ --- ---------------------------------------- -------- -- --------------------------------------------
--------- -----
-----
---- --- ---
--------
--------
-- ---------------------------------------- -------- ---- ------- --------
------总结
使用 hexo-caniuse 插件，可以快速便捷地查询各个属性及方法在不同浏览器上的兼容性情况，并灵活地在博客中添加相关信息。
对于需要经常查询兼容性信息的前端开发者来说，hexo-caniuse 插件无疑是一个很好的辅助工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaf81e8991b448dc403