diff --git a/themes/commerce/components/SocialButton.js b/themes/commerce/components/SocialButton.js
index 3572010a..adf18d7f 100644
--- a/themes/commerce/components/SocialButton.js
+++ b/themes/commerce/components/SocialButton.js
@@ -1,5 +1,7 @@
 import { siteConfig } from '@/lib/config'
-import { useEffect, useRef } from 'react'
+import { useRef } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
+
 /**
  * 社交联系方式按钮组
  * @returns {JSX.Element}
@@ -18,12 +20,7 @@ const SocialButton = () => {
   const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
 
   const emailIcon = useRef(null)
-  useEffect(() => {
-    if (CONTACT_EMAIL && emailIcon.current) {
-      emailIcon.current.href =
-        'mailto:' + decodeURIComponent(escape(atob(CONTACT_EMAIL)))
-    }
-  }, [CONTACT_EMAIL])
+
   return (
     <div className='w-full justify-center flex-wrap flex'>
       <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
@@ -83,11 +80,10 @@ const SocialButton = () => {
         )}
         {CONTACT_EMAIL && (
           <a
-            ref={emailIcon}
-            target='_blank'
-            rel='noreferrer'
-            title={'email'}
-            href={CONTACT_EMAIL}>
+            onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+            title='email'
+            className='cursor-pointer'
+            ref={emailIcon}>
             <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' />
           </a>
         )}
diff --git a/themes/fukasawa/components/SocialButton.js b/themes/fukasawa/components/SocialButton.js
index a2bfa2f8..d8d3c421 100644
--- a/themes/fukasawa/components/SocialButton.js
+++ b/themes/fukasawa/components/SocialButton.js
@@ -1,6 +1,7 @@
 import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组
@@ -32,6 +33,9 @@ const SocialButton = () => {
     setQrCodeShow(false)
   }
 
+  const emailIcon = useRef(null)
+
+
   return (
     <div className='w-full justify-center flex-wrap flex'>
       <div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
@@ -91,10 +95,10 @@ const SocialButton = () => {
         )}
         {CONTACT_EMAIL && (
           <a
-            target='_blank'
-            rel='noreferrer'
-            title={'email'}
-            href={`mailto:${CONTACT_EMAIL}`}>
+            onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+            title='email'
+            className='cursor-pointer'
+            ref={emailIcon}>
             <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
diff --git a/themes/gitbook/components/SocialButton.js b/themes/gitbook/components/SocialButton.js
index a2bfa2f8..80078ae7 100644
--- a/themes/gitbook/components/SocialButton.js
+++ b/themes/gitbook/components/SocialButton.js
@@ -1,6 +1,7 @@
 import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
 import { useState } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组
@@ -32,6 +33,9 @@ const SocialButton = () => {
     setQrCodeShow(false)
   }
 
+  const emailIcon = useRef(null)
+
+
   return (
     <div className='w-full justify-center flex-wrap flex'>
       <div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
@@ -91,10 +95,10 @@ const SocialButton = () => {
         )}
         {CONTACT_EMAIL && (
           <a
-            target='_blank'
-            rel='noreferrer'
-            title={'email'}
-            href={`mailto:${CONTACT_EMAIL}`}>
+            onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+            title='email'
+            className='cursor-pointer'
+            ref={emailIcon}>
             <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
diff --git a/themes/hexo/components/SocialButton.js b/themes/hexo/components/SocialButton.js
index 3e220cf7..e7dbf127 100644
--- a/themes/hexo/components/SocialButton.js
+++ b/themes/hexo/components/SocialButton.js
@@ -1,6 +1,7 @@
 import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组
@@ -32,6 +33,9 @@ const SocialButton = () => {
   const closePopover = () => {
     setQrCodeShow(false)
   }
+
+  const emailIcon = useRef(null)
+
   return (
     <div className='w-full justify-center flex-wrap flex'>
       <div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
@@ -91,10 +95,10 @@ const SocialButton = () => {
         )}
         {CONTACT_EMAIL && (
           <a
-            target='_blank'
-            rel='noreferrer'
-            title={'email'}
-            href={`mailto:${CONTACT_EMAIL}`}>
+            onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+            title='email'
+            className='cursor-pointer'
+            ref={emailIcon}>
             <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600' />
           </a>
         )}
diff --git a/themes/magzine/components/SocialButton.js b/themes/magzine/components/SocialButton.js
index 5b3a3954..aa790cdf 100644
--- a/themes/magzine/components/SocialButton.js
+++ b/themes/magzine/components/SocialButton.js
@@ -1,6 +1,7 @@
 import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组
@@ -31,6 +32,9 @@ const SocialButton = () => {
     setQrCodeShow(false)
   }
 
+  const emailIcon = useRef(null)
+
+
   return (
     <div className='w-full justify-center flex-wrap flex'>
       <div className='space-x-3 text-xl flex items-center text-white dark:text-gray-300 '>
@@ -90,10 +94,10 @@ const SocialButton = () => {
         )}
         {CONTACT_EMAIL && (
           <a
-            target='_blank'
-            rel='noreferrer'
-            title={'email'}
-            href={`mailto:${CONTACT_EMAIL}`}>
+            onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+            title='email'
+            className='cursor-pointer'
+            ref={emailIcon}>
             <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-green-400 hover:text-green-600' />
           </a>
         )}
diff --git a/themes/matery/components/SocialButton.js b/themes/matery/components/SocialButton.js
index 678ad4fd..74e18597 100644
--- a/themes/matery/components/SocialButton.js
+++ b/themes/matery/components/SocialButton.js
@@ -1,5 +1,6 @@
 import { siteConfig } from '@/lib/config'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组 可折叠的组件
@@ -24,12 +25,7 @@ const SocialButton = () => {
   const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
 
   const emailIcon = useRef(null)
-  useEffect(() => {
-    if (CONTACT_EMAIL && emailIcon.current) {
-      emailIcon.current.href =
-        'mailto:' + decodeURIComponent(escape(atob(CONTACT_EMAIL)))
-    }
-  }, [CONTACT_EMAIL])
+
 
   return (
     <div className='flex flex-col transform hover:scale-105 duration-200 text-white text-center bg-indigo-700 rounded-full dark:bg-black cursor-pointer py-2.5'>
@@ -97,11 +93,10 @@ const SocialButton = () => {
           )}
           {CONTACT_EMAIL && (
             <a
-              ref={emailIcon}
-              target='_blank'
-              rel='noreferrer'
-              title={'email'}
-              href={CONTACT_EMAIL}>
+              onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+              title='email'
+              className='cursor-pointer'
+              ref={emailIcon}>
               <i className='transform hover:scale-125 duration-150 fas fa-envelope ' />
             </a>
           )}
diff --git a/themes/medium/components/SocialButton.js b/themes/medium/components/SocialButton.js
index 40ae1ca4..66899971 100644
--- a/themes/medium/components/SocialButton.js
+++ b/themes/medium/components/SocialButton.js
@@ -1,5 +1,6 @@
 import { siteConfig } from '@/lib/config'
-import { useEffect, useRef } from 'react'
+import { useRef } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组
@@ -19,12 +20,7 @@ const SocialButton = () => {
   const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
 
   const emailIcon = useRef(null)
-  useEffect(() => {
-    if (CONTACT_EMAIL && emailIcon.current) {
-      emailIcon.current.href =
-        'mailto:' + decodeURIComponent(escape(atob(CONTACT_EMAIL)))
-    }
-  }, [CONTACT_EMAIL])
+
   return (
     <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
       {CONTACT_GITHUB && (
@@ -83,11 +79,10 @@ const SocialButton = () => {
       )}
       {CONTACT_EMAIL && (
         <a
-          ref={emailIcon}
-          target='_blank'
-          rel='noreferrer'
-          title={'email'}
-          href={CONTACT_EMAIL}>
+          onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+          title='email'
+          className='cursor-pointer'
+          ref={emailIcon}>
           <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600' />
         </a>
       )}
diff --git a/themes/nav/components/SocialButton.js b/themes/nav/components/SocialButton.js
index 64aa4cc1..e6992904 100755
--- a/themes/nav/components/SocialButton.js
+++ b/themes/nav/components/SocialButton.js
@@ -1,5 +1,6 @@
 import { siteConfig } from '@/lib/config'
-import { useEffect, useRef } from 'react'
+import { useRef } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组
@@ -17,12 +18,7 @@ const SocialButton = () => {
   const ENABLE_RSS = siteConfig('ENABLE_RSS')
 
   const emailIcon = useRef(null)
-  useEffect(() => {
-    if (CONTACT_EMAIL && emailIcon.current) {
-      emailIcon.current.href =
-        'mailto:' + decodeURIComponent(escape(atob(CONTACT_EMAIL)))
-    }
-  }, [CONTACT_EMAIL])
+
   return (
     <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
       {CONTACT_GITHUB && (
@@ -81,11 +77,10 @@ const SocialButton = () => {
       )}
       {CONTACT_EMAIL && (
         <a
-          ref={emailIcon}
-          target='_blank'
-          rel='noreferrer'
-          title={'email'}
-          href={CONTACT_EMAIL}>
+          onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+          title='email'
+          className='cursor-pointer'
+          ref={emailIcon}>
           <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600' />
         </a>
       )}
diff --git a/themes/plog/components/SocialButton.js b/themes/plog/components/SocialButton.js
index c48909bd..7d6aa1a8 100644
--- a/themes/plog/components/SocialButton.js
+++ b/themes/plog/components/SocialButton.js
@@ -1,5 +1,6 @@
 import { siteConfig } from '@/lib/config'
-import { useEffect, useRef } from 'react'
+import { useRef } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组
@@ -19,12 +20,7 @@ const SocialButton = () => {
   const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
 
   const emailIcon = useRef(null)
-  useEffect(() => {
-    if (CONTACT_EMAIL && emailIcon.current) {
-      emailIcon.current.href =
-        'mailto:' + decodeURIComponent(escape(atob(CONTACT_EMAIL)))
-    }
-  }, [CONTACT_EMAIL])
+
   return (
     <div className='justify-start flex-wrap flex mx-1'>
       <div className='space-x-3 text-2xl text-gray-600 dark:text-gray-400 text-center'>
@@ -84,11 +80,10 @@ const SocialButton = () => {
         )}
         {CONTACT_EMAIL && (
           <a
-            ref={emailIcon}
-            target='_blank'
-            rel='noreferrer'
-            title={'email'}
-            href={CONTACT_EMAIL}>
+            onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+            title='email'
+            className='cursor-pointer'
+            ref={emailIcon}>
             <i className='fas fa-envelope transform hover:scale-125 duration-150' />
           </a>
         )}
diff --git a/themes/starter/components/SocialButton.js b/themes/starter/components/SocialButton.js
index a90d533b..2cac8bf6 100644
--- a/themes/starter/components/SocialButton.js
+++ b/themes/starter/components/SocialButton.js
@@ -1,5 +1,6 @@
 import { siteConfig } from '@/lib/config'
-import { useEffect, useRef } from 'react'
+import { useRef } from 'react'
+import { handleEmailClick } from '@/lib/plugins/mailEncrypt'
 
 /**
  * 社交联系方式按钮组
@@ -19,12 +20,7 @@ const SocialButton = () => {
   const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
 
   const emailIcon = useRef(null)
-  useEffect(() => {
-    if (CONTACT_EMAIL && emailIcon.current) {
-      emailIcon.current.href =
-        'mailto:' + decodeURIComponent(escape(atob(CONTACT_EMAIL)))
-    }
-  }, [CONTACT_EMAIL])
+
   return (
     <div className='w-52 justify-center flex-wrap flex my-2'>
       <div className='space-x-5 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
@@ -84,11 +80,10 @@ const SocialButton = () => {
         )}
         {CONTACT_EMAIL && (
           <a
-            ref={emailIcon}
-            target='_blank'
-            rel='noreferrer'
-            title={'email'}
-            href={CONTACT_EMAIL}>
+            onClick={e => handleEmailClick(e, emailIcon, CONTACT_EMAIL)}
+            title='email'
+            className='cursor-pointer'
+            ref={emailIcon}>
             <i className='fas fa-envelope transform hover:scale-125 duration-150' />
           </a>
         )}