diff --git a/themes/hexo/components/Hero.js b/themes/hexo/components/Hero.js
index 67ae3468..91059205 100644
--- a/themes/hexo/components/Hero.js
+++ b/themes/hexo/components/Hero.js
@@ -66,7 +66,7 @@ const Hero = props => {
       <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')}
+          {siteInfo?.title || siteConfig('TITLE')}
         </div>
         {/* 站点欢迎语 */}
         <div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
diff --git a/themes/hexo/components/Logo.js b/themes/hexo/components/Logo.js
index 30054acc..2279834c 100644
--- a/themes/hexo/components/Logo.js
+++ b/themes/hexo/components/Logo.js
@@ -1,11 +1,20 @@
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-
+/**
+ * Logo
+ * 实际值支持文字
+ * @param {*} props
+ * @returns
+ */
 const Logo = props => {
+  const { siteInfo } = props
   return (
     <Link href='/' passHref legacyBehavior>
       <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-        <div className='font-medium text-lg p-1.5 rounded dark:border-white dark:text-white menu-link transform duration-200'> {siteConfig('TITLE') }</div>
+        <div className='font-medium text-lg p-1.5 rounded dark:border-white dark:text-white menu-link transform duration-200'>
+          {' '}
+          {siteInfo?.title || siteConfig('TITLE')}
+        </div>
       </div>
     </Link>
   )
diff --git a/themes/hexo/components/MenuItemCollapse.js b/themes/hexo/components/MenuItemCollapse.js
index 828079c7..1782ce52 100644
--- a/themes/hexo/components/MenuItemCollapse.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -29,13 +29,13 @@ export const MenuItemCollapse = props => {
   return (
     <>
       <div
-        className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray'
+        className='w-full px-8 py-3 dark:hover:bg-indigo-500  hover:bg-indigo-500 hover:text-white text-left dark:bg-hexo-black-gray'
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
             href={link?.to}
             target={link?.target}
-            className='font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            className=' font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
             <span className=' transition-all items-center duration-200'>
               {link?.icon && <i className={link.icon + ' mr-4'} />}
               {link?.name}
@@ -63,7 +63,7 @@ export const MenuItemCollapse = props => {
             return (
               <div
                 key={index}
-                className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
+                className='dark:hover:bg-indigo-500 hover:bg-indigo-500 hover:text-white dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 tracking-widest transition-all duration-200  py-3 pr-6'>
                 <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
diff --git a/themes/hexo/components/MenuItemDrop.js b/themes/hexo/components/MenuItemDrop.js
index b74d7a8f..18ea74b6 100644
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -1,6 +1,10 @@
 import Link from 'next/link'
 import { useState } from 'react'
-
+/**
+ * 支持二级展开的菜单
+ * @param {*} param0
+ * @returns
+ */
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -25,7 +29,7 @@ export const MenuItemDrop = ({ link }) => {
 
       {hasSubMenu && (
         <>
-          <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+          <div className='cursor-pointer menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
             {link?.icon && <i className={link?.icon} />} {link?.name}
             <i
               className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
@@ -42,7 +46,7 @@ export const MenuItemDrop = ({ link }) => {
             return (
               <li
                 key={index}
-                className='cursor-pointer hover:bg-indigo-300 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+                className='cursor-pointer hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
                 <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
diff --git a/themes/hexo/components/MenuListSide.js b/themes/hexo/components/MenuListSide.js
index 3a146d43..ab0b4278 100644
--- a/themes/hexo/components/MenuListSide.js
+++ b/themes/hexo/components/MenuListSide.js
@@ -1,17 +1,41 @@
-import { useGlobal } from '@/lib/global'
 import { siteConfig } from '@/lib/config'
-import { MenuItemCollapse } from './MenuItemCollapse'
+import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-
-export const MenuListSide = (props) => {
+import { MenuItemCollapse } from './MenuItemCollapse'
+/**
+ * 侧拉抽屉菜单
+ * @param {*} props
+ * @returns
+ */
+export const MenuListSide = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEXO_MENU_TAG', null, CONFIG) }
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      to: '/archive',
+      show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      to: '/search',
+      show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      show: siteConfig('HEXO_MENU_TAG', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -34,8 +58,10 @@ export const MenuListSide = (props) => {
   }
 
   return (
-        <nav>
-            {links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
-        </nav>
+    <nav>
+      {links?.map((link, index) => (
+        <MenuItemCollapse key={index} link={link} />
+      ))}
+    </nav>
   )
 }
diff --git a/themes/hexo/components/SideBar.js b/themes/hexo/components/SideBar.js
index 913ce0a9..64def6ec 100644
--- a/themes/hexo/components/SideBar.js
+++ b/themes/hexo/components/SideBar.js
@@ -1,5 +1,5 @@
-import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 import { useRouter } from 'next/router'
 import MenuGroupCard from './MenuGroupCard'
 import { MenuListSide } from './MenuListSide'
@@ -11,22 +11,33 @@ import { MenuListSide } from './MenuListSide'
  * @returns {JSX.Element}
  * @constructor
  */
-const SideBar = (props) => {
+const SideBar = props => {
   const { siteInfo } = props
   const router = useRouter()
   return (
-        <div id='side-bar'>
-            <div className="h-52 w-full flex justify-center">
-                <div>
-                    <div onClick={() => { router.push('/') }}
-                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
-                        <LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={siteConfig('AUTHOR')} />
-                    </div>
-                    <MenuGroupCard {...props} />
-                </div>
-            </div>
-            <MenuListSide {...props} />
+    <div id='side-bar'>
+      <div className='h-52 w-full flex justify-center'>
+        <div>
+          <div
+            onClick={() => {
+              router.push('/')
+            }}
+            className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
+            {/* 头像 */}
+            <LazyImage
+              src={siteInfo?.icon}
+              className='rounded-full'
+              width={80}
+              alt={siteConfig('AUTHOR')}
+            />
+          </div>
+          {/* 总览 */}
+          <MenuGroupCard {...props} />
         </div>
+      </div>
+      {/* 侧拉抽屉的菜单 */}
+      <MenuListSide {...props} />
+    </div>
   )
 }
 
diff --git a/themes/matery/components/Hero.js b/themes/matery/components/Hero.js
index 35260f9a..65975a0f 100644
--- a/themes/matery/components/Hero.js
+++ b/themes/matery/components/Hero.js
@@ -9,7 +9,8 @@ import CONFIG from '../config'
 let wrapperTop = 0
 
 /**
- *
+ * 首页英雄区
+ * 是一张大图，带个居中按钮
  * @returns 头图
  */
 const Hero = props => {
@@ -17,7 +18,6 @@ const Hero = props => {
   const { siteInfo } = props
   const { locale } = useGlobal()
   const GREETING_WORDS = siteConfig('GREETING_WORDS').split(',')
-
   useEffect(() => {
     updateHeaderHeight()
     if (!typed && window && document.getElementById('typed')) {
@@ -61,7 +61,7 @@ const Hero = props => {
       <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')}
+          {siteInfo?.title || siteConfig('TITLE')}
         </div>
         {/* 站点欢迎语 */}
         <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
diff --git a/themes/matery/components/Logo.js b/themes/matery/components/Logo.js
index 3e6542f4..a1082ae3 100644
--- a/themes/matery/components/Logo.js
+++ b/themes/matery/components/Logo.js
@@ -1,11 +1,20 @@
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-
+/**
+ * 站点logo
+ * 这里默认只支持纯文字
+ * @param {*} props
+ * @returns
+ */
 const Logo = props => {
+  const { siteInfo } = props
   return (
     <Link href='/' passHref legacyBehavior>
       <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-        <div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteConfig('TITLE') }</div>
+        <div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'>
+          {' '}
+          {siteInfo?.title || siteConfig('TITLE')}
+        </div>
       </div>
     </Link>
   )
diff --git a/themes/matery/components/MenuItemCollapse.js b/themes/matery/components/MenuItemCollapse.js
index 6cd373f6..0094fa86 100644
--- a/themes/matery/components/MenuItemCollapse.js
+++ b/themes/matery/components/MenuItemCollapse.js
@@ -72,7 +72,7 @@ export const MenuItemCollapse = ({ link }) => {
             return (
               <div
                 key={index}
-                className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
+                className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-500 dark:hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
                 <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm'>
                     <i className={`${sLink.icon} w-4 mr-3 text-center`} />
diff --git a/themes/matery/components/MenuItemDrop.js b/themes/matery/components/MenuItemDrop.js
index f7373f7c..93dfe7c6 100644
--- a/themes/matery/components/MenuItemDrop.js
+++ b/themes/matery/components/MenuItemDrop.js
@@ -1,6 +1,9 @@
 import Link from 'next/link'
 import { useState } from 'react'
-
+/**
+ * 菜单
+ * 支持二级展开的菜单
+ */
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -42,7 +45,7 @@ export const MenuItemDrop = ({ link }) => {
             return (
               <li
                 key={index}
-                className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+                className='cursor-pointer hover:bg-indigo-500 text-gray-900 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
                 <Link href={sLink.to} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
diff --git a/themes/matery/components/MenuListTop.js b/themes/matery/components/MenuListTop.js
index 506f9c59..04897f7b 100644
--- a/themes/matery/components/MenuListTop.js
+++ b/themes/matery/components/MenuListTop.js
@@ -1,17 +1,42 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { MenuItemDrop } from './MenuItemDrop'
-import { siteConfig } from '@/lib/config'
-
-export const MenuListTop = (props) => {
+/**
+ * 菜单列表
+ * 顶部导航栏用
+ * @param {*} props
+ * @returns
+ */
+export const MenuListTop = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      to: '/archive',
+      show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      to: '/search',
+      show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -29,7 +54,9 @@ export const MenuListTop = (props) => {
 
   return (
     <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links?.map((link, index) => <MenuItemDrop key={index} link={link}/>)}
+      {links?.map((link, index) => (
+        <MenuItemDrop key={index} link={link} />
+      ))}
     </nav>
   )
 }
diff --git a/themes/matery/style.js b/themes/matery/style.js
index 711670c9..32918e92 100644
--- a/themes/matery/style.js
+++ b/themes/matery/style.js
@@ -5,27 +5,54 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-    // 底色
-    body{
-        background-color: #f5f5f5
-    }
-    .dark body{
+  return (
+    <style jsx global>{`
+      // 底色
+      body {
+        background-color: #f5f5f5;
+      }
+      .dark body {
         background-color: black;
-    }
+      }
 
-    /* 设置了从上到下的渐变黑色 */
-    #theme-matery .header-cover::before {
-        content: "";
+      /* 设置了从上到下的渐变黑色 */
+      #theme-matery .header-cover::before {
+        content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
-        background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
-    }
-    
-  `}</style>
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.5) 0%,
+          rgba(0, 0, 0, 0.2) 10%,
+          rgba(0, 0, 0, 0) 25%,
+          rgba(0, 0, 0, 0.2) 75%,
+          rgba(0, 0, 0, 0.5) 100%
+        );
+      }
+
+      // 自定义滚动条
+      ::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background-color: #4338ca;
+      }
+
+      * {
+        scrollbar-width: thin;
+        scrollbar-color: #4338ca transparent;
+      }
+    `}</style>
+  )
 }
 
 export { Style }