Add new tag caniuse

_config.yml

@@ -910,6 +910,11 @@ mermaid:
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
 
+# Caniuse tag
+caniuse:
+ enable: false
+ cdn: //cdn.jsdelivr.net/gh/ireade/caniuse-embed@1/caniuse-embed.min.js
+
 
 # ---------------------------------------------------------------
 # Animation Settings

layout/_layout.swig

@@ -111,6 +111,7 @@
  {% include '_third-party/math/index.swig' %}
  {% include '_third-party/pdf.swig' %}
  {% include '_third-party/mermaid.swig' %}
+ {% include '_third-party/caniuse.swig' %}
  {% include '_third-party/baidu-push.swig' %}
  {% include '_third-party/schedule.swig' %}
  {% include '_third-party/needsharebutton.swig' %}

layout/_third-party/caniuse.swig

@@ -0,0 +1,3 @@
+{% if theme.caniuse.enable %}
+ <script async src="{{ theme.caniuse.cdn }}"></script>
+{% endif %}

scripts/tags/caniuse.js

@@ -0,0 +1,22 @@
+/**
+ * caniuse.js | https://theme-next.org/docs/tag-plugins/caniuse
+ */
+
+/* global hexo */
+
+'use strict';
+
+const caniUse = (args) => {
+ args = args.join('').split('@');
+ let feature = args[0];
+ let periods = args[1] || 'current';
+
+ if (!feature) {
+ hexo.log.w('Caniuse feature can NOT be empty');
+ return '';
+ }
+
+ return `<p class="ciu_embed" data-feature="${feature}" data-periods="${periods}"><a href="http://caniuse.com/#feat=${feature}">Can I Use ${feature}?</a>Data on support for the ${feature} feature across the major browsers from caniuse.com.</p>`;
+};
+
+hexo.extend.tag.register('caniuse', caniUse, {async: true});