Add new tag caniuse (#984)

_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});