feat: 新增 Microsoft Clarity

feat: 新增 Cloudflare Analytics
feat: aside 個人資料widget可關閉button
fix: 修復medium zoom 報錯的 bugs

_config.yml

@@ -405,6 +405,14 @@ tencent_analytics:
 # https://www.umeng.com/
 cnzz_analytics:
 
+# Cloudflare Analytics
+# https://www.cloudflare.com/zh-tw/web-analytics/
+cloudflare_analytics:
+
+# Microsoft Clarity
+# https://clarity.microsoft.com/
+microsoft_clarity:
+
 # Advertisement
 # --------------------------------------
 
@@ -619,6 +627,7 @@ aside:
     enable: true
     description:
     button:
+      enable: true
       icon: fab fa-github
       text: Follow Me
       link: https://github.com/xxxxxx

layout/includes/head/analytics.pug

@@ -30,3 +30,14 @@ if theme.tencent_analytics
 
 if theme.cnzz_analytics
   script(async data-pjax src=`https://s4.cnzz.com/z_stat.php?id=${theme.cnzz_analytics}&web_id=${theme.cnzz_analytics}`)
+
+if theme.cloudflare_analytics
+  script(defer data-pjax src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon=`{"token": "${theme.cloudflare_analytics}"}`)
+
+if theme.microsoft_clarity
+  script.
+    (function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "!{theme.microsoft_clarity}");

layout/includes/head/preconnect.pug

@@ -12,6 +12,12 @@ if theme.tencent_analytics
 if theme.cnzz_analytics
   link(rel="preconnect" href="//s4.cnzz.com")
 
+if theme.cloudflare_analytics
+  link(rel="preconnect" href="//static.cloudflareinsights.com")
+
+if theme.microsoft_clarity
+  link(rel="preconnect" href="//www.clarity.ms")
+
 if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
   link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='')
 

layout/includes/widget/card_author.pug

@@ -27,6 +27,7 @@ if theme.aside.card_author.enable
             .headline= _p('aside.categories') 
             .length-num= site.categories.length
 
+    if theme.aside.card_author.button.enable
       a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
         i(class=theme.aside.card_author.button.icon)
         span=theme.aside.card_author.button.text

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.5.0-b2",
+  "version": "3.5.0-b3",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

source/css/_layout/aside.styl

@@ -54,7 +54,7 @@
 
     .card-info-data
       display: table
-      padding: .7rem 0
+      margin: .7rem 0 .2rem
       width: 100%
       table-layout: fixed
 
@@ -89,6 +89,7 @@
 
     #card-info-btn
       display: block
+      margin-top: .7rem
       background-color: var(--btn-bg)
       color: var(--btn-color)
       text-align: center

source/js/main.js

@@ -280,7 +280,7 @@ document.addEventListener('DOMContentLoaded', function () {
   const addMediumZoom = () => {
     const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
     zoom.on('open', e => {
-      const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
+      const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
       zoom.update({
         background: photoBg
       })