diff --git a/themes/hexo/components/Hero.js b/themes/hexo/components/Hero.js
index 6c7bb17a..67ae3468 100644
--- a/themes/hexo/components/Hero.js
+++ b/themes/hexo/components/Hero.js
@@ -1,11 +1,11 @@
 // import Image from 'next/image'
-import { useEffect, useState } from 'react'
-import Typed from 'typed.js'
-import CONFIG from '../config'
-import NavButtonGroup from './NavButtonGroup'
-import { useGlobal } from '@/lib/global'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+import NavButtonGroup from './NavButtonGroup'
 
 let wrapperTop = 0
 
@@ -20,21 +20,29 @@ const Hero = props => {
   const scrollToWrapper = () => {
     window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
   }
+
   const GREETING_WORDS = siteConfig('GREETING_WORDS').split(',')
   useEffect(() => {
     updateHeaderHeight()
 
     if (!typed && window && document.getElementById('typed')) {
-      changeType(
-        new Typed('#typed', {
-          strings: GREETING_WORDS,
-          typeSpeed: 200,
-          backSpeed: 100,
-          backDelay: 400,
-          showCursor: true,
-          smartBackspace: true
-        })
-      )
+      loadExternalResource(
+        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
+        'js'
+      ).then(() => {
+        if (window.Typed) {
+          changeType(
+            new window.Typed('#typed', {
+              strings: GREETING_WORDS,
+              typeSpeed: 200,
+              backSpeed: 100,
+              backDelay: 400,
+              showCursor: true,
+              smartBackspace: true
+            })
+          )
+        }
+      })
     }
 
     window.addEventListener('resize', updateHeaderHeight)
@@ -51,33 +59,43 @@ const Hero = props => {
   }
 
   return (
-        <header
-            id="header" style={{ zIndex: 1 }}
-            className="w-full h-screen relative bg-black"
-        >
+    <header
+      id='header'
+      style={{ zIndex: 1 }}
+      className='w-full h-screen relative bg-black'>
+      <div className='text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full '>
+        {/* 站点标题 */}
+        <div className='font-black text-4xl md:text-5xl shadow-text'>
+          {siteConfig('TITLE')}
+        </div>
+        {/* 站点欢迎语 */}
+        <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
+          <span id='typed' />
+        </div>
 
-            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
-                {/* 站点标题 */}
-                <div className='font-black text-4xl md:text-5xl shadow-text'>{siteConfig('TITLE')}</div>
-                {/* 站点欢迎语 */}
-                <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
-                    <span id='typed' />
-                </div>
+        {/* 首页导航大按钮 */}
+        {siteConfig('HEXO_HOME_NAV_BUTTONS', null, CONFIG) && (
+          <NavButtonGroup {...props} />
+        )}
 
-                {/* 首页导航大按钮 */}
-                {siteConfig('HEXO_HOME_NAV_BUTTONS', null, CONFIG) && <NavButtonGroup {...props} />}
+        {/* 滚动按钮 */}
+        <div
+          onClick={scrollToWrapper}
+          className='z-10 cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white'>
+          <div className='opacity-70 animate-bounce text-xs'>
+            {siteConfig('HEXO_SHOW_START_READING', null, CONFIG) &&
+              locale.COMMON.START_READING}
+          </div>
+          <i className='opacity-70 animate-bounce fas fa-angle-down' />
+        </div>
+      </div>
 
-                {/* 滚动按钮 */}
-                <div onClick={scrollToWrapper} className="z-10 cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white">
-                    <div className="opacity-70 animate-bounce text-xs">{siteConfig('HEXO_SHOW_START_READING', null, CONFIG) && locale.COMMON.START_READING}</div>
-                    <i className='opacity-70 animate-bounce fas fa-angle-down' />
-                </div>
-            </div>
-
-            <LazyImage id='header-cover' src={siteInfo?.pageCover}
-                className={`header-cover w-full h-screen object-cover object-center ${siteConfig('HEXO_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`} />
-
-        </header>
+      <LazyImage
+        id='header-cover'
+        src={siteInfo?.pageCover}
+        className={`header-cover w-full h-screen object-cover object-center ${siteConfig('HEXO_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`}
+      />
+    </header>
   )
 }
 
diff --git a/themes/matery/components/Hero.js b/themes/matery/components/Hero.js
index cd2f19ab..267ae006 100644
--- a/themes/matery/components/Hero.js
+++ b/themes/matery/components/Hero.js
@@ -1,10 +1,10 @@
 // import Image from 'next/image'
-import { useEffect, useState } from 'react'
-import Typed from 'typed.js'
-import CONFIG from '../config'
-import { useGlobal } from '@/lib/global'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
 
 let wrapperTop = 0
 
@@ -21,16 +21,23 @@ const Hero = props => {
   useEffect(() => {
     updateHeaderHeight()
     if (!typed && window && document.getElementById('typed')) {
-      changeType(
-        new Typed('#typed', {
-          strings: GREETING_WORDS,
-          typeSpeed: 200,
-          backSpeed: 100,
-          backDelay: 400,
-          showCursor: true,
-          smartBackspace: true
-        })
-      )
+      loadExternalResource(
+        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
+        'js'
+      ).then(() => {
+        if (window.Typed) {
+          changeType(
+            new window.Typed('#typed', {
+              strings: GREETING_WORDS,
+              typeSpeed: 200,
+              backSpeed: 100,
+              backDelay: 400,
+              showCursor: true,
+              smartBackspace: true
+            })
+          )
+        }
+      })
     }
 
     window.addEventListener('resize', updateHeaderHeight)
@@ -47,29 +54,40 @@ const Hero = props => {
   }
 
   return (
-        <header
-            id="header" style={{ zIndex: 1 }}
-            className=" w-full h-screen relative bg-black"
-        >
+    <header
+      id='header'
+      style={{ zIndex: 1 }}
+      className=' w-full h-screen relative bg-black'>
+      <div className='text-white absolute flex flex-col h-full items-center justify-center w-full '>
+        {/* 站点标题 */}
+        <div className='text-4xl md:text-5xl shadow-text'>
+          {siteConfig('TITLE')}
+        </div>
+        {/* 站点欢迎语 */}
+        <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
+          <span id='typed' />
+        </div>
+        {/* 滚动按钮 */}
+        <div
+          onClick={() => {
+            window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+          }}
+          className='mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40'>
+          <i className='animate-bounce fas fa-angle-double-down' />{' '}
+          <span>
+            {siteConfig('MATERY_SHOW_START_READING', null, CONFIG) &&
+              locale.COMMON.START_READING}
+          </span>
+        </div>
+      </div>
 
-            <div className="text-white absolute flex flex-col h-full items-center justify-center w-full ">
-                {/* 站点标题 */}
-                <div className='text-4xl md:text-5xl shadow-text'>{siteConfig('TITLE')}</div>
-                {/* 站点欢迎语 */}
-                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
-                    <span id='typed' />
-                </div>
-                {/* 滚动按钮 */}
-                <div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
-                    className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40">
-                    <i className='animate-bounce fas fa-angle-double-down' /> <span>{siteConfig('MATERY_SHOW_START_READING', null, CONFIG) && locale.COMMON.START_READING}</span>
-                </div>
-            </div>
-
-            <LazyImage priority={true} id='header-cover'src={siteInfo?.pageCover}
-                className={`header-cover object-center w-full h-screen object-cover ${siteConfig('MATERY_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`} />
-
-        </header>
+      <LazyImage
+        priority={true}
+        id='header-cover'
+        src={siteInfo?.pageCover}
+        className={`header-cover object-center w-full h-screen object-cover ${siteConfig('MATERY_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`}
+      />
+    </header>
   )
 }