feat(simplify ENABLE_RSS checks): remove useless JSON.parse calls

2026-05-14 07:26:52 +00:00 · 2025-04-12 03:24:03 +08:00
parent 40b206b39b
commit b946a08ba0
7 changed files with 230 additions and 112 deletions
--- a/themes/commerce/components/SocialButton.js
+++ b/themes/commerce/components/SocialButton.js
@@ -1,77 +1,97 @@
 import { siteConfig } from '@/lib/config'
+import { useEffect, useRef } from 'react'
 /**
 * 社交联系方式按钮组
 * @returns {JSX.Element}
 * @constructor
 */
 const SocialButton = () => {
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  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 '>
-        {siteConfig('CONTACT_GITHUB') && (
+        {CONTACT_GITHUB && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'github'}
-            href={siteConfig('CONTACT_GITHUB')}>
+            href={CONTACT_GITHUB}>
            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {siteConfig('CONTACT_TWITTER') && (
+        {CONTACT_TWITTER && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'twitter'}
-            href={siteConfig('CONTACT_TWITTER')}>
+            href={CONTACT_TWITTER}>
            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {siteConfig('CONTACT_TELEGRAM') && (
+        {CONTACT_TELEGRAM && (
          <a
            target='_blank'
            rel='noreferrer'
-            href={siteConfig('CONTACT_TELEGRAM')}
+            href={CONTACT_TELEGRAM}
            title={'telegram'}>
            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {siteConfig('CONTACT_LINKEDIN') && (
+        {CONTACT_LINKEDIN && (
          <a
            target='_blank'
            rel='noreferrer'
-            href={siteConfig('CONTACT_LINKEDIN')}
+            href={CONTACT_LINKEDIN}
            title={'linkIn'}>
            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {siteConfig('CONTACT_WEIBO') && (
+        {CONTACT_WEIBO && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'weibo'}
-            href={siteConfig('CONTACT_WEIBO')}>
+            href={CONTACT_WEIBO}>
            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {siteConfig('CONTACT_INSTAGRAM') && (
+        {CONTACT_INSTAGRAM && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'instagram'}
-            href={siteConfig('CONTACT_INSTAGRAM')}>
+            href={CONTACT_INSTAGRAM}>
            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {siteConfig('CONTACT_EMAIL') && (
+        {CONTACT_EMAIL && (
          <a
+            ref={emailIcon}
            target='_blank'
            rel='noreferrer'
            title={'email'}
-            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            href={CONTACT_EMAIL}>
            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+        {ENABLE_RSS && (
          <a
            target='_blank'
            rel='noreferrer'
@@ -80,21 +100,21 @@ const SocialButton = () => {
            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {siteConfig('CONTACT_BILIBILI') && (
+        {CONTACT_BILIBILI && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'bilibili'}
-            href={siteConfig('CONTACT_BILIBILI')}>
+            href={CONTACT_BILIBILI}>
            <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
-        {siteConfig('CONTACT_YOUTUBE') && (
+        {CONTACT_YOUTUBE && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'youtube'}
-            href={siteConfig('CONTACT_YOUTUBE')}>
+            href={CONTACT_YOUTUBE}>
            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-red-400 hover:text-red-600' />
          </a>
        )}
--- a/themes/heo/components/SocialButton.js
+++ b/themes/heo/components/SocialButton.js
@@ -82,7 +82,7 @@ const SocialButton = () => {
            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600' />
          </a>
        )}
-        {JSON.parse(ENABLE_RSS) && (
+        {ENABLE_RSS && (
          <a
            target='_blank'
            rel='noreferrer'
--- a/themes/matery/components/SocialButton.js
+++ b/themes/matery/components/SocialButton.js
@@ -1,5 +1,5 @@
 import { siteConfig } from '@/lib/config'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'

 /**
 * 社交联系方式按钮组 可折叠的组件
@@ -12,6 +12,25 @@ const SocialButton = () => {
    setShow(!show)
  }

+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  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'>
      {!show && (
@@ -22,70 +41,71 @@ const SocialButton = () => {
      )}
      {show && (
        <>
-          {siteConfig('CONTACT_GITHUB') && (
+          {CONTACT_GITHUB && (
            <a
              target='_blank'
              rel='noreferrer'
              title={'github'}
-              href={siteConfig('CONTACT_GITHUB')}>
+              href={CONTACT_GITHUB}>
              <i className='transform hover:scale-125 duration-150 fab fa-github ' />
            </a>
          )}
-          {siteConfig('CONTACT_TWITTER') && (
+          {CONTACT_TWITTER && (
            <a
              target='_blank'
              rel='noreferrer'
              title={'twitter'}
-              href={siteConfig('CONTACT_TWITTER')}>
+              href={CONTACT_TWITTER}>
              <i className='transform hover:scale-125 duration-150 fab fa-twitter ' />
            </a>
          )}
-          {siteConfig('CONTACT_TELEGRAM') && (
+          {CONTACT_TELEGRAM && (
            <a
              target='_blank'
              rel='noreferrer'
-              href={siteConfig('CONTACT_TELEGRAM')}
+              href={CONTACT_TELEGRAM}
              title={'telegram'}>
              <i className='transform hover:scale-125 duration-150 fab fa-telegram ' />
            </a>
          )}
-          {siteConfig('CONTACT_LINKEDIN') && (
+          {CONTACT_LINKEDIN && (
            <a
              target='_blank'
              rel='noreferrer'
-              href={siteConfig('CONTACT_LINKEDIN')}
+              href={CONTACT_LINKEDIN}
              title={'linkIn'}>
              <i className='transform hover:scale-125 duration-150 fab fa-linkedin ' />
            </a>
          )}
-          {siteConfig('CONTACT_WEIBO') && (
+          {CONTACT_WEIBO && (
            <a
              target='_blank'
              rel='noreferrer'
              title={'weibo'}
-              href={siteConfig('CONTACT_WEIBO')}>
+              href={CONTACT_WEIBO}>
              <i className='transform hover:scale-125 duration-150 fab fa-weibo ' />
            </a>
          )}
-          {siteConfig('CONTACT_INSTAGRAM') && (
+          {CONTACT_INSTAGRAM && (
            <a
              target='_blank'
              rel='noreferrer'
              title={'instagram'}
-              href={siteConfig('CONTACT_INSTAGRAM')}>
+              href={CONTACT_INSTAGRAM}>
              <i className='transform hover:scale-125 duration-150 fab fa-instagram ' />
            </a>
          )}
-          {siteConfig('CONTACT_EMAIL') && (
+          {CONTACT_EMAIL && (
            <a
+              ref={emailIcon}
              target='_blank'
              rel='noreferrer'
              title={'email'}
-              href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+              href={CONTACT_EMAIL}>
              <i className='transform hover:scale-125 duration-150 fas fa-envelope ' />
            </a>
          )}
-          {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          {ENABLE_RSS && (
            <a
              target='_blank'
              rel='noreferrer'
@@ -94,21 +114,21 @@ const SocialButton = () => {
              <i className='transform hover:scale-125 duration-150 fas fa-rss ' />
            </a>
          )}
-          {siteConfig('CONTACT_BILIBILI') && (
+          {CONTACT_BILIBILI && (
            <a
              target='_blank'
              rel='noreferrer'
              title={'bilibili'}
-              href={siteConfig('CONTACT_BILIBILI')}>
+              href={CONTACT_BILIBILI}>
              <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
            </a>
          )}
-          {siteConfig('CONTACT_YOUTUBE') && (
+          {CONTACT_YOUTUBE && (
            <a
              target='_blank'
              rel='noreferrer'
              title={'youtube'}
-              href={siteConfig('CONTACT_YOUTUBE')}>
+              href={CONTACT_YOUTUBE}>
              <i className='fab fa-youtube transform hover:scale-125 duration-150' />
            </a>
          )}
--- a/themes/medium/components/SocialButton.js
+++ b/themes/medium/components/SocialButton.js
@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import { useEffect, useRef } from 'react'

 /**
 * 社交联系方式按钮组
@@ -6,72 +7,91 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  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 '>
-      {siteConfig('CONTACT_GITHUB') && (
+      {CONTACT_GITHUB && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'github'}
-          href={siteConfig('CONTACT_GITHUB')}>
+          href={CONTACT_GITHUB}>
          <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_TWITTER') && (
+      {CONTACT_TWITTER && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'twitter'}
-          href={siteConfig('CONTACT_TWITTER')}>
+          href={CONTACT_TWITTER}>
          <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_TELEGRAM') && (
+      {CONTACT_TELEGRAM && (
        <a
          target='_blank'
          rel='noreferrer'
-          href={siteConfig('CONTACT_TELEGRAM')}
+          href={CONTACT_TELEGRAM}
          title={'telegram'}>
          <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_LINKEDIN') && (
+      {CONTACT_LINKEDIN && (
        <a
          target='_blank'
          rel='noreferrer'
-          href={siteConfig('CONTACT_LINKEDIN')}
+          href={CONTACT_LINKEDIN}
          title={'linkedIn'}>
          <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
        </a>
      )}
-      {siteConfig('CONTACT_WEIBO') && (
+      {CONTACT_WEIBO && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'weibo'}
-          href={siteConfig('CONTACT_WEIBO')}>
+          href={CONTACT_WEIBO}>
          <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_INSTAGRAM') && (
+      {CONTACT_INSTAGRAM && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'instagram'}
-          href={siteConfig('CONTACT_INSTAGRAM')}>
+          href={CONTACT_INSTAGRAM}>
          <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_EMAIL') && (
+      {CONTACT_EMAIL && (
        <a
+          ref={emailIcon}
          target='_blank'
          rel='noreferrer'
          title={'email'}
-          href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+          href={CONTACT_EMAIL}>
          <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && (
+      {ENABLE_RSS && (
        <a
          target='_blank'
          rel='noreferrer'
@@ -80,21 +100,21 @@ const SocialButton = () => {
          <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_BILIBILI') && (
+      {CONTACT_BILIBILI && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'bilibili'}
-          href={siteConfig('CONTACT_BILIBILI')}>
+          href={CONTACT_BILIBILI}>
          <i className='fab fa-bilibili transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_YOUTUBE') && (
+      {CONTACT_YOUTUBE && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'youtube'}
-          href={siteConfig('CONTACT_YOUTUBE')}>
+          href={CONTACT_YOUTUBE}>
          <i className='fab fa-youtube transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
--- a/themes/nav/components/SocialButton.js
+++ b/themes/nav/components/SocialButton.js
@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import { useEffect, useRef } from 'react'

 /**
 * 社交联系方式按钮组
@@ -6,72 +7,89 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  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 '>
-      {siteConfig('CONTACT_GITHUB') && (
+      {CONTACT_GITHUB && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'github'}
-          href={siteConfig('CONTACT_GITHUB')}>
+          href={CONTACT_GITHUB}>
          <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_TWITTER') && (
+      {CONTACT_TWITTER && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'twitter'}
-          href={siteConfig('CONTACT_TWITTER')}>
+          href={CONTACT_TWITTER}>
          <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_TELEGRAM') && (
+      {CONTACT_TELEGRAM && (
        <a
          target='_blank'
          rel='noreferrer'
-          href={siteConfig('CONTACT_TELEGRAM')}
+          href={CONTACT_TELEGRAM}
          title={'telegram'}>
          <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_LINKEDIN') && (
+      {CONTACT_LINKEDIN && (
        <a
          target='_blank'
          rel='noreferrer'
-          href={siteConfig('CONTACT_LINKEDIN')}
+          href={CONTACT_LINKEDIN}
          title={'linkedIn'}>
          <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
        </a>
      )}
-      {siteConfig('CONTACT_WEIBO') && (
+      {CONTACT_WEIBO && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'weibo'}
-          href={siteConfig('CONTACT_WEIBO')}>
+          href={CONTACT_WEIBO}>
          <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_INSTAGRAM') && (
+      {CONTACT_INSTAGRAM && (
        <a
          target='_blank'
          rel='noreferrer'
          title={'instagram'}
-          href={siteConfig('CONTACT_INSTAGRAM')}>
+          href={CONTACT_INSTAGRAM}>
          <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {siteConfig('CONTACT_EMAIL') && (
+      {CONTACT_EMAIL && (
        <a
+          ref={emailIcon}
          target='_blank'
          rel='noreferrer'
          title={'email'}
-          href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+          href={CONTACT_EMAIL}>
          <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600' />
        </a>
      )}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && (
+      {ENABLE_RSS && (
        <a
          target='_blank'
          rel='noreferrer'
--- a/themes/plog/components/SocialButton.js
+++ b/themes/plog/components/SocialButton.js
@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import { useEffect, useRef } from 'react'

 /**
 * 社交联系方式按钮组
@@ -6,73 +7,92 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  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'>
-        {siteConfig('CONTACT_GITHUB') && (
+        {CONTACT_GITHUB && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'github'}
-            href={siteConfig('CONTACT_GITHUB')}>
+            href={CONTACT_GITHUB}>
            <i className='fab fa-github transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_TWITTER') && (
+        {CONTACT_TWITTER && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'twitter'}
-            href={siteConfig('CONTACT_TWITTER')}>
+            href={CONTACT_TWITTER}>
            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_TELEGRAM') && (
+        {CONTACT_TELEGRAM && (
          <a
            target='_blank'
            rel='noreferrer'
-            href={siteConfig('CONTACT_TELEGRAM')}
+            href={CONTACT_TELEGRAM}
            title={'telegram'}>
            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_LINKEDIN') && (
+        {CONTACT_LINKEDIN && (
          <a
            target='_blank'
            rel='noreferrer'
-            href={siteConfig('CONTACT_LINKEDIN')}
+            href={CONTACT_LINKEDIN}
            title={'linkedIn'}>
            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
          </a>
        )}
-        {siteConfig('CONTACT_WEIBO') && (
+        {CONTACT_WEIBO && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'weibo'}
-            href={siteConfig('CONTACT_WEIBO')}>
+            href={CONTACT_WEIBO}>
            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_INSTAGRAM') && (
+        {CONTACT_INSTAGRAM && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'instagram'}
-            href={siteConfig('CONTACT_INSTAGRAM')}>
+            href={CONTACT_INSTAGRAM}>
            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_EMAIL') && (
+        {CONTACT_EMAIL && (
          <a
+            ref={emailIcon}
            target='_blank'
            rel='noreferrer'
            title={'email'}
-            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            href={CONTACT_EMAIL}>
            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
          </a>
        )}
-        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+        {ENABLE_RSS && (
          <a
            target='_blank'
            rel='noreferrer'
@@ -81,21 +101,21 @@ const SocialButton = () => {
            <i className='fas fa-rss transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_BILIBILI') && (
+        {CONTACT_BILIBILI && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'bilibili'}
-            href={siteConfig('CONTACT_BILIBILI')}>
+            href={CONTACT_BILIBILI}>
            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_YOUTUBE') && (
+        {CONTACT_YOUTUBE && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'youtube'}
-            href={siteConfig('CONTACT_YOUTUBE')}>
+            href={CONTACT_YOUTUBE}>
            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
          </a>
        )}
--- a/themes/starter/components/SocialButton.js
+++ b/themes/starter/components/SocialButton.js
@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import { useEffect, useRef } from 'react'

 /**
 * 社交联系方式按钮组
@@ -6,73 +7,92 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  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'>
-        {siteConfig('CONTACT_GITHUB') && (
+        {CONTACT_GITHUB && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'github'}
-            href={siteConfig('CONTACT_GITHUB')}>
+            href={CONTACT_GITHUB}>
            <i className='fab fa-github transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_TWITTER') && (
+        {CONTACT_TWITTER && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'twitter'}
-            href={siteConfig('CONTACT_TWITTER')}>
+            href={CONTACT_TWITTER}>
            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_TELEGRAM') && (
+        {CONTACT_TELEGRAM && (
          <a
            target='_blank'
            rel='noreferrer'
-            href={siteConfig('CONTACT_TELEGRAM')}
+            href={CONTACT_TELEGRAM}
            title={'telegram'}>
            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_LINKEDIN') && (
+        {CONTACT_LINKEDIN && (
          <a
            target='_blank'
            rel='noreferrer'
-            href={siteConfig('CONTACT_LINKEDIN')}
+            href={CONTACT_LINKEDIN}
            title={'linkedIn'}>
            <i className='fab fa-linkedin transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_WEIBO') && (
+        {CONTACT_WEIBO && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'weibo'}
-            href={siteConfig('CONTACT_WEIBO')}>
+            href={CONTACT_WEIBO}>
            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_INSTAGRAM') && (
+        {CONTACT_INSTAGRAM && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'instagram'}
-            href={siteConfig('CONTACT_INSTAGRAM')}>
+            href={CONTACT_INSTAGRAM}>
            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_EMAIL') && (
+        {CONTACT_EMAIL && (
          <a
+            ref={emailIcon}
            target='_blank'
            rel='noreferrer'
            title={'email'}
-            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            href={CONTACT_EMAIL}>
            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
          </a>
        )}
-        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+        {ENABLE_RSS && (
          <a
            target='_blank'
            rel='noreferrer'
@@ -81,21 +101,21 @@ const SocialButton = () => {
            <i className='fas fa-rss transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_BILIBILI') && (
+        {CONTACT_BILIBILI && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'bilibili'}
-            href={siteConfig('CONTACT_BILIBILI')}>
+            href={CONTACT_BILIBILI}>
            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
          </a>
        )}
-        {siteConfig('CONTACT_YOUTUBE') && (
+        {CONTACT_YOUTUBE && (
          <a
            target='_blank'
            rel='noreferrer'
            title={'youtube'}
-            href={siteConfig('CONTACT_YOUTUBE')}>
+            href={CONTACT_YOUTUBE}>
            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
          </a>
        )}