diff --git a/themes/magzine/components/CTA.js b/themes/magzine/components/CTA.js
new file mode 100644
index 00000000000..123288638c9
--- /dev/null
+++ b/themes/magzine/components/CTA.js
@@ -0,0 +1,18 @@
+/**
+ * CTA，用于创建一个呼吁用户行动的部分（Call To Action，简称 CTA）。
+ * 该组件通过以下方式激励用户进行特定操作
+ * 用户的公告栏内容将在此显示
+ **/
+export default function CTA({ notice }) {
+  return (
+    <>
+      {/* 底部 */}
+      <Announcement
+        post={notice}
+        className={
+          'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'
+        }
+      />
+    </>
+  )
+}
diff --git a/themes/magzine/index.js b/themes/magzine/index.js
index 680444d6d2c..ca93126a279 100644
--- a/themes/magzine/index.js
+++ b/themes/magzine/index.js
@@ -12,10 +12,10 @@ import { isBrowser } from '@/lib/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
-import Announcement from './components/Announcement'
 import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BannerFullWidth from './components/BannerFullWidth'
+import CTA from './components/CTA'
 import Catalog from './components/Catalog'
 import CatalogFloat from './components/CatalogFloat'
 import CategoryGroup from './components/CategoryGroup'
@@ -47,7 +47,7 @@ export const useMagzineGlobal = () => useContext(ThemeGlobalMagzine)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, notice } = props
+  const { children } = props
   const [tocVisible, changeTocVisible] = useState(false)
   const searchModal = useRef(null)
 
@@ -69,13 +69,8 @@ const LayoutBase = props => {
             <div id='main' role='main'>
               {children}
             </div>
-            {/* 底部 */}
-            <Announcement
-              post={notice}
-              className={
-                'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'
-              }
-            />
+            {/* 行动呼吁 */}
+            <CTA {...props} />
             <Footer title={siteConfig('TITLE')} />
           </div>
         </main>
diff --git a/themes/starter/components/About.js b/themes/starter/components/About.js
index 203205db749..db1192e9a1d 100644
--- a/themes/starter/components/About.js
+++ b/themes/starter/components/About.js
@@ -1,195 +1,178 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable react/no-unescaped-entities */
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 
 /**
  * 首页的关于模块
  */
 export const About = () => {
-  return <>
-       {/* <!-- ====== About Section Start --> */}
-       <section
-      id="about"
-      className="bg-gray-1 pb-8 pt-20 dark:bg-dark-2 lg:pb-[70px] lg:pt-[120px]"
-    >
-      <div className="container">
-        <div className="wow fadeInUp" data-wow-delay=".2s">
-          <div className="-mx-4 flex flex-wrap items-center">
+  return (
+    <>
+      {/* <!-- ====== About Section Start --> */}
+      <section
+        id='about'
+        className='bg-gray-1 pb-8 pt-20 dark:bg-dark-2 lg:pb-[70px] lg:pt-[120px]'>
+        <div className='container'>
+          <div className='wow fadeInUp' data-wow-delay='.2s'>
+            <div className='-mx-4 flex flex-wrap items-center'>
+              {/* 左侧的文字说明板块 */}
+              <div className='w-full px-4 lg:w-1/2'>
+                <div className='mb-12 max-w-[540px] lg:mb-0'>
+                  <h2 className='mb-5 text-3xl font-bold leading-tight text-dark dark:text-white sm:text-[40px] sm:leading-[1.2]'>
+                    {siteConfig('STARTER_ABOUT_TITLE')}
+                  </h2>
+                  <p
+                    className='mb-10 text-base leading-relaxed text-body-color dark:text-dark-6'
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_ABOUT_TEXT')
+                    }}></p>
 
-            {/* 左侧的文字说明板块 */}
-            <div className="w-full px-4 lg:w-1/2">
-              <div className="mb-12 max-w-[540px] lg:mb-0">
-                <h2
-                  className="mb-5 text-3xl font-bold leading-tight text-dark dark:text-white sm:text-[40px] sm:leading-[1.2]"
-                >
-                  {siteConfig('STARTER_ABOUT_TITLE', null, CONFIG)}
-                </h2>
-                <p className="mb-10 text-base leading-relaxed text-body-color dark:text-dark-6"
-                    dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_ABOUT_TEXT', null, CONFIG) }
-                }></p>
-
-                <a
-                  href={siteConfig('STARTER_ABOUT_BUTTON_URL', null, CONFIG)}
-                  className="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-blue-dark hover:bg-blue-dark"
-                >
-                  {siteConfig('STARTER_ABOUT_BUTTON_TEXT', null, CONFIG)}
-                </a>
-              </div>
-            </div>
-
-            {/* 右侧的图片海报 */}
-            <div className="w-full px-4 lg:w-1/2">
-              <div className="-mx-2 flex flex-wrap sm:-mx-4 lg:-mx-2 xl:-mx-4">
-                <div className="w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4">
-                  <div
-                    className="mb-4 sm:mb-8 sm:h-[400px] md:h-[540px] lg:h-[400px] xl:h-[500px]"
-                  >
-                    <img
-                      src={siteConfig('STARTER_ABOUT_IMAGE_1', null, CONFIG)}
-                      alt="about image"
-                      className="h-full w-full object-cover object-center"
-                    />
-                  </div>
+                  <a
+                    href={siteConfig('STARTER_ABOUT_BUTTON_URL')}
+                    className='inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-blue-dark hover:bg-blue-dark'>
+                    {siteConfig('STARTER_ABOUT_BUTTON_TEXT')}
+                  </a>
                 </div>
+              </div>
 
-                <div className="w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4">
-                  <div
-                    className="mb-4 sm:mb-8 sm:h-[220px] md:h-[346px] lg:mb-4 lg:h-[225px] xl:mb-8 xl:h-[310px]"
-                  >
-                    <img
-                      src={siteConfig('STARTER_ABOUT_IMAGE_2', null, CONFIG)}
-                      alt="about image"
-                      className="h-full w-full object-cover object-center"
-                    />
+              {/* 右侧的图片海报 */}
+              <div className='w-full px-4 lg:w-1/2'>
+                <div className='-mx-2 flex flex-wrap sm:-mx-4 lg:-mx-2 xl:-mx-4'>
+                  <div className='w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4'>
+                    <div className='mb-4 sm:mb-8 sm:h-[400px] md:h-[540px] lg:h-[400px] xl:h-[500px]'>
+                      <img
+                        src={siteConfig('STARTER_ABOUT_IMAGE_1')}
+                        alt='about image'
+                        className='h-full w-full object-cover object-center'
+                      />
+                    </div>
                   </div>
 
-                  <div
-                    className="relative z-10 mb-4 flex items-center justify-center overflow-hidden bg-primary px-6 py-12 sm:mb-8 sm:h-[160px] sm:p-5 lg:mb-4 xl:mb-8"
-                  >
-                    <div>
-                      <span className="block text-5xl font-extrabold text-white">
-                        {siteConfig('STARTER_ABOUT_TIPS_1', null, CONFIG)}
-                      </span>
-                      <span className="block text-base font-semibold text-white">
-                        {siteConfig('STARTER_ABOUT_TIPS_2', null, CONFIG)}
-                      </span>
-                      <span
-                        className="block text-base font-medium text-white text-opacity-70"
-                      >
-                        {siteConfig('STARTER_ABOUT_TIPS_3', null, CONFIG)}
-                      </span>
+                  <div className='w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4'>
+                    <div className='mb-4 sm:mb-8 sm:h-[220px] md:h-[346px] lg:mb-4 lg:h-[225px] xl:mb-8 xl:h-[310px]'>
+                      <img
+                        src={siteConfig('STARTER_ABOUT_IMAGE_2')}
+                        alt='about image'
+                        className='h-full w-full object-cover object-center'
+                      />
                     </div>
-                    <div>
-                      <span className="absolute left-0 top-0 -z-10">
-                        <svg
-                          width="106"
-                          height="144"
-                          viewBox="0 0 106 144"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            opacity="0.1"
-                            x="-67"
-                            y="47.127"
-                            width="113.378"
-                            height="131.304"
-                            transform="rotate(-42.8643 -67 47.127)"
-                            fill="url(#paint0_linear_1416_214)"
-                          />
-                          <defs>
-                            <linearGradient
-                              id="paint0_linear_1416_214"
-                              x1="-10.3111"
-                              y1="47.127"
-                              x2="-10.3111"
-                              y2="178.431"
-                              gradientUnits="userSpaceOnUse"
-                            >
-                              <stop stopColor="white" />
-                              <stop
-                                offset="1"
-                                stopColor="white"
-                                stopOpacity="0"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
-                      </span>
-                      <span className="absolute right-0 top-0 -z-10">
-                        <svg
-                          width="130"
-                          height="97"
-                          viewBox="0 0 130 97"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            opacity="0.1"
-                            x="0.86792"
-                            y="-6.67725"
-                            width="155.563"
-                            height="140.614"
-                            transform="rotate(-42.8643 0.86792 -6.67725)"
-                            fill="url(#paint0_linear_1416_215)"
-                          />
-                          <defs>
-                            <linearGradient
-                              id="paint0_linear_1416_215"
-                              x1="78.6495"
-                              y1="-6.67725"
-                              x2="78.6495"
-                              y2="133.937"
-                              gradientUnits="userSpaceOnUse"
-                            >
-                              <stop stopColor="white" />
-                              <stop
-                                offset="1"
-                                stopColor="white"
-                                stopOpacity="0"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
-                      </span>
-                      <span className="absolute bottom-0 right-0 -z-10">
-                        <svg
-                          width="175"
-                          height="104"
-                          viewBox="0 0 175 104"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            opacity="0.1"
-                            x="175.011"
-                            y="108.611"
-                            width="101.246"
-                            height="148.179"
-                            transform="rotate(137.136 175.011 108.611)"
-                            fill="url(#paint0_linear_1416_216)"
-                          />
-                          <defs>
-                            <linearGradient
-                              id="paint0_linear_1416_216"
-                              x1="225.634"
-                              y1="108.611"
-                              x2="225.634"
-                              y2="256.79"
-                              gradientUnits="userSpaceOnUse"
-                            >
-                              <stop stopColor="white" />
-                              <stop
-                                offset="1"
-                                stopColor="white"
-                                stopOpacity="0"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
-                      </span>
+
+                    <div className='relative z-10 mb-4 flex items-center justify-center overflow-hidden bg-primary px-6 py-12 sm:mb-8 sm:h-[160px] sm:p-5 lg:mb-4 xl:mb-8'>
+                      <div>
+                        <span className='block text-5xl font-extrabold text-white'>
+                          {siteConfig('STARTER_ABOUT_TIPS_1')}
+                        </span>
+                        <span className='block text-base font-semibold text-white'>
+                          {siteConfig('STARTER_ABOUT_TIPS_2')}
+                        </span>
+                        <span className='block text-base font-medium text-white text-opacity-70'>
+                          {siteConfig('STARTER_ABOUT_TIPS_3')}
+                        </span>
+                      </div>
+                      <div>
+                        <span className='absolute left-0 top-0 -z-10'>
+                          <svg
+                            width='106'
+                            height='144'
+                            viewBox='0 0 106 144'
+                            fill='none'
+                            xmlns='http://www.w3.org/2000/svg'>
+                            <rect
+                              opacity='0.1'
+                              x='-67'
+                              y='47.127'
+                              width='113.378'
+                              height='131.304'
+                              transform='rotate(-42.8643 -67 47.127)'
+                              fill='url(#paint0_linear_1416_214)'
+                            />
+                            <defs>
+                              <linearGradient
+                                id='paint0_linear_1416_214'
+                                x1='-10.3111'
+                                y1='47.127'
+                                x2='-10.3111'
+                                y2='178.431'
+                                gradientUnits='userSpaceOnUse'>
+                                <stop stopColor='white' />
+                                <stop
+                                  offset='1'
+                                  stopColor='white'
+                                  stopOpacity='0'
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </span>
+                        <span className='absolute right-0 top-0 -z-10'>
+                          <svg
+                            width='130'
+                            height='97'
+                            viewBox='0 0 130 97'
+                            fill='none'
+                            xmlns='http://www.w3.org/2000/svg'>
+                            <rect
+                              opacity='0.1'
+                              x='0.86792'
+                              y='-6.67725'
+                              width='155.563'
+                              height='140.614'
+                              transform='rotate(-42.8643 0.86792 -6.67725)'
+                              fill='url(#paint0_linear_1416_215)'
+                            />
+                            <defs>
+                              <linearGradient
+                                id='paint0_linear_1416_215'
+                                x1='78.6495'
+                                y1='-6.67725'
+                                x2='78.6495'
+                                y2='133.937'
+                                gradientUnits='userSpaceOnUse'>
+                                <stop stopColor='white' />
+                                <stop
+                                  offset='1'
+                                  stopColor='white'
+                                  stopOpacity='0'
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </span>
+                        <span className='absolute bottom-0 right-0 -z-10'>
+                          <svg
+                            width='175'
+                            height='104'
+                            viewBox='0 0 175 104'
+                            fill='none'
+                            xmlns='http://www.w3.org/2000/svg'>
+                            <rect
+                              opacity='0.1'
+                              x='175.011'
+                              y='108.611'
+                              width='101.246'
+                              height='148.179'
+                              transform='rotate(137.136 175.011 108.611)'
+                              fill='url(#paint0_linear_1416_216)'
+                            />
+                            <defs>
+                              <linearGradient
+                                id='paint0_linear_1416_216'
+                                x1='225.634'
+                                y1='108.611'
+                                x2='225.634'
+                                y2='256.79'
+                                gradientUnits='userSpaceOnUse'>
+                                <stop stopColor='white' />
+                                <stop
+                                  offset='1'
+                                  stopColor='white'
+                                  stopOpacity='0'
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -197,8 +180,8 @@ export const About = () => {
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    {/* <!-- ====== About Section End --> */}
+      </section>
+      {/* <!-- ====== About Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/BackToTopButton.js b/themes/starter/components/BackToTopButton.js
index d44a4add509..340b5b31db8 100644
--- a/themes/starter/components/BackToTopButton.js
+++ b/themes/starter/components/BackToTopButton.js
@@ -1,41 +1,45 @@
-import throttle from 'lodash.throttle';
+import throttle from 'lodash.throttle'
 import { useCallback, useEffect } from 'react'
 
+/**
+ * 回顶按钮
+ * @returns
+ */
 export const BackToTopButton = () => {
   useEffect(() => {
     // ====== scroll top js
     function scrollTo(element, to = 0, duration = 500) {
-      const start = element.scrollTop;
-      const change = to - start;
-      const increment = 20;
-      let currentTime = 0;
+      const start = element.scrollTop
+      const change = to - start
+      const increment = 20
+      let currentTime = 0
 
       const animateScroll = () => {
-        currentTime += increment;
+        currentTime += increment
 
-        const val = Math.easeInOutQuad(currentTime, start, change, duration);
+        const val = Math.easeInOutQuad(currentTime, start, change, duration)
 
-        element.scrollTop = val;
+        element.scrollTop = val
 
         if (currentTime < duration) {
-          setTimeout(animateScroll, increment);
+          setTimeout(animateScroll, increment)
         }
-      };
+      }
 
-      animateScroll();
+      animateScroll()
     }
 
     Math.easeInOutQuad = function (t, b, c, d) {
-      t /= d / 2;
-      if (t < 1) return (c / 2) * t * t + b;
-      t--;
-      return (-c / 2) * (t * (t - 2) - 1) + b;
-    };
+      t /= d / 2
+      if (t < 1) return (c / 2) * t * t + b
+      t--
+      return (-c / 2) * (t * (t - 2) - 1) + b
+    }
     const backToTop = document.querySelector('.back-to-top')
     if (backToTop) {
       backToTop.onclick = () => {
-        scrollTo(document.documentElement);
-      };
+        scrollTo(document.documentElement)
+      }
     }
 
     window.addEventListener('scroll', navBarScollListener)
@@ -48,20 +52,22 @@ export const BackToTopButton = () => {
   const throttleMs = 200
   const navBarScollListener = useCallback(
     throttle(() => {
-      const scrollY = window.scrollY;
+      const scrollY = window.scrollY
       // 显示或隐藏返回顶部按钮
-      const backToTop = document.querySelector('.back-to-top');
+      const backToTop = document.querySelector('.back-to-top')
       if (backToTop) {
-        backToTop.style.display = scrollY > 50 ? 'flex' : 'none';
+        backToTop.style.display = scrollY > 50 ? 'flex' : 'none'
       }
     }, throttleMs)
   )
 
-  return <>
-        {/* <!-- ====== Back To Top Start --> */}
-        <a className="back-to-top fixed bottom-16 left-auto right-8 z-[999] hidden h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark">
-            <span className="mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white" ></span>
-         </a>
-    {/* <!-- ====== Back To Top End --> */}
+  return (
+    <>
+      {/* <!-- ====== Back To Top Start --> */}
+      <a className='back-to-top fixed bottom-16 left-auto right-8 z-[999] hidden h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark'>
+        <span className='mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white'></span>
+      </a>
+      {/* <!-- ====== Back To Top End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Banner.js b/themes/starter/components/Banner.js
index ab89d43c052..18370a2d0d5 100644
--- a/themes/starter/components/Banner.js
+++ b/themes/starter/components/Banner.js
@@ -1,30 +1,25 @@
 /**
- * 详情页面顶部条
+ * 页面顶部宣传栏
  * @returns
  */
 export const Banner = ({ title, description }) => {
-  return <>
-    {/* <!-- ====== Banner Section Start --> */}
-    <div
-      className="relative z-10 overflow-hidden pb-[60px] pt-[120px] dark:bg-dark md:pt-[130px] lg:pt-[160px]"
-    >
-      <div
-        className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-stroke/0 via-stroke to-stroke/0 dark:via-dark-3"
-      ></div>
-      <div className="container">
-        <div className="flex flex-wrap items-center -mx-4">
-          <div className="w-full px-4">
-            <div className="text-center">
-              <h1
-                className="mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
-              >
-                {title}
-              </h1>
-              <p className="mb-5 text-base text-body-color dark:text-dark-6">
-                {description}
-              </p>
+  return (
+    <>
+      {/* <!-- ====== Banner Section Start --> */}
+      <div className='relative z-10 overflow-hidden pb-[60px] pt-[120px] dark:bg-dark md:pt-[130px] lg:pt-[160px]'>
+        <div className='absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-stroke/0 via-stroke to-stroke/0 dark:via-dark-3'></div>
+        <div className='container'>
+          <div className='flex flex-wrap items-center -mx-4'>
+            <div className='w-full px-4'>
+              <div className='text-center'>
+                <h1 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+                  {title}
+                </h1>
+                <p className='mb-5 text-base text-body-color dark:text-dark-6'>
+                  {description}
+                </p>
 
-              {/* <ul className="flex items-center justify-center gap-[10px]">
+                {/* <ul className="flex items-center justify-center gap-[10px]">
                 <li>
                   <a
                     href="index.html"
@@ -43,11 +38,12 @@ export const Banner = ({ title, description }) => {
                   </a>
                 </li>
               </ul> */}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    {/* <!-- ====== Banner Section End --> */}
+      {/* <!-- ====== Banner Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Blog.js b/themes/starter/components/Blog.js
index ff0567410db..7ccb57354c4 100644
--- a/themes/starter/components/Blog.js
+++ b/themes/starter/components/Blog.js
@@ -1,7 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import CONFIG from '../config'
 
 /**
  * 博文列表
@@ -19,14 +18,14 @@ export const Blog = ({ posts }) => {
             <div className='w-full px-4'>
               <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
                 <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('STARTER_BLOG_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_BLOG_TITLE')}
                 </span>
                 <h2 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
-                  {siteConfig('STARTER_BLOG_TEXT_1', null, CONFIG)}
+                  {siteConfig('STARTER_BLOG_TEXT_1')}
                 </h2>
                 <p
                   dangerouslySetInnerHTML={{
-                    __html: siteConfig('STARTER_BLOG_TEXT_2', null, CONFIG)
+                    __html: siteConfig('STARTER_BLOG_TEXT_2')
                   }}
                   className='text-base text-body-color dark:text-dark-6'></p>
               </div>
diff --git a/themes/starter/components/Brand.js b/themes/starter/components/Brand.js
index db51823e4ec..06cf9d3e813 100644
--- a/themes/starter/components/Brand.js
+++ b/themes/starter/components/Brand.js
@@ -1,37 +1,39 @@
 /* eslint-disable @next/next/no-img-element */
 
-import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 合作伙伴
  * @returns
  */
 export const Brand = () => {
-  return <>
-
-    {/* <!-- ====== Brands Section Start --> */}
-    <section className="pb-20 dark:bg-dark">
-      <div className="container px-4">
-        <div
-          className="-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11"
-        >
-          {CONFIG.STARTER_BRANDS?.map((item, index) => {
-            return <a key={index} href={item.URL}>
-            <img
-              src={item.IMAGE}
-              alt={item.TITLE}
-              className="dark:hidden"
-            />
-            <img
-              src={item.IMAGE_WHITE}
-              alt={item.TITLE}
-              className="hidden dark:block"
-            />
-          </a>
-          })}
+  const brands = siteConfig('STARTER_BRANDS')
+  return (
+    <>
+      {/* <!-- ====== Brands Section Start --> */}
+      <section className='pb-20 dark:bg-dark'>
+        <div className='container px-4'>
+          <div className='-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11'>
+            {brands?.map((item, index) => {
+              return (
+                <a key={index} href={item.URL}>
+                  <img
+                    src={item.IMAGE}
+                    alt={item.TITLE}
+                    className='dark:hidden'
+                  />
+                  <img
+                    src={item.IMAGE_WHITE}
+                    alt={item.TITLE}
+                    className='hidden dark:block'
+                  />
+                </a>
+              )
+            })}
+          </div>
         </div>
-      </div>
-    </section>
-    {/* <!-- ====== Brands Section End --> */}
+      </section>
+      {/* <!-- ====== Brands Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/CTA.js b/themes/starter/components/CTA.js
index 756b1f26f6f..a0797a7672b 100644
--- a/themes/starter/components/CTA.js
+++ b/themes/starter/components/CTA.js
@@ -1,106 +1,111 @@
-export const CTA = () => {
-  return <>
-
-    {/* <!-- ====== CTA Section Start --> */}
-    <section
-      className="relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]"
-    >
-      <div className="container mx-auto">
-        <div className="relative overflow-hidden">
-          <div className="-mx-4 flex flex-wrap items-stretch">
-            <div className="w-full px-4">
-              <div className="mx-auto max-w-[570px] text-center">
-                <h2
-                  className="mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]"
-                >
-                  <span>What Are You Looking For?</span>
-                  <span className="text-3xl font-normal md:text-[40px]">
-                    Get Started Now
-                  </span>
-                </h2>
-                <p
-                  className="mx-auto mb-6 max-w-[515px] text-base leading-[1.5] text-white"
-                >
-                  There are many variations of passages of Lorem Ipsum but the
-                  majority have suffered in some form.
-                </p>
-                <a
+import { siteConfig } from '@/lib/config'
 
-                  className="inline-block rounded-md border border-transparent bg-secondary px-7 py-3 text-base font-medium text-white transition hover:bg-[#0BB489]"
-                >
-                  Start using Play
-                </a>
+/**
+ * CTA，用于创建一个呼吁用户行动的部分（Call To Action，简称 CTA）。
+ * 该组件通过以下方式激励用户进行特定操作
+ * 用户的公告栏内容将在此显示
+ **/
+export const CTA = () => {
+  if (!siteConfig('STARTER_CTA_ENABLE')) {
+    return <></>
+  }
+  return (
+    <>
+      {/* <!-- ====== CTA Section Start --> */}
+      <section className='relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]'>
+        <div className='container mx-auto'>
+          <div className='relative overflow-hidden'>
+            <div className='-mx-4 flex flex-wrap items-stretch'>
+              <div className='w-full px-4'>
+                <div className='mx-auto max-w-[570px] text-center'>
+                  <h2 className='mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]'>
+                    <span>{siteConfig('STARTER_CTA_TITLE')}</span>
+                    <span className='text-3xl font-normal md:text-[40px]'>
+                      {siteConfig('STARTER_CTA_TITLE_2')}
+                    </span>
+                  </h2>
+                  <p className='mx-auto mb-6 max-w-[515px] text-base leading-[1.5] text-white'>
+                    {siteConfig('STARTER_CTA_DESCRIOTN')}
+                  </p>
+                  {siteConfig('STARTER_CTA_BUTTON') && (
+                    <>
+                      <a
+                        href={siteConfig('STARTER_CTA_BUTTON_URL')}
+                        className='inline-block rounded-md border border-transparent bg-secondary px-7 py-3 text-base font-medium text-white transition hover:bg-[#0BB489]'>
+                        {siteConfig('STARTER_CTA_BUTTON_TEXT')}
+                      </a>
+                    </>
+                  )}
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div>
-        <span className="absolute left-0 top-0">
-          <svg
-            width="495"
-            height="470"
-            viewBox="0 0 495 470"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="55"
-              cy="442"
-              r="138"
-              stroke="white"
-              stroke-opacity="0.04"
-              stroke-width="50"
-            />
-            <circle
-              cx="446"
-              r="39"
-              stroke="white"
-              stroke-opacity="0.04"
-              stroke-width="20"
-            />
-            <path
-              d="M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z"
-              stroke="white"
-              stroke-opacity="0.08"
-              stroke-width="12"
-            />
-          </svg>
-        </span>
-        <span className="absolute bottom-0 right-0">
-          <svg
-            width="493"
-            height="470"
-            viewBox="0 0 493 470"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="462"
-              cy="5"
-              r="138"
-              stroke="white"
-              stroke-opacity="0.04"
-              stroke-width="50"
-            />
-            <circle
-              cx="49"
-              cy="470"
-              r="39"
-              stroke="white"
-              stroke-opacity="0.04"
-              stroke-width="20"
-            />
-            <path
-              d="M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z"
-              stroke="white"
-              stroke-opacity="0.06"
-              stroke-width="13"
-            />
-          </svg>
-        </span>
-      </div>
-    </section>
-    {/* <!-- ====== CTA Section End --> */}
+        <div>
+          <span className='absolute left-0 top-0'>
+            <svg
+              width='495'
+              height='470'
+              viewBox='0 0 495 470'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'>
+              <circle
+                cx='55'
+                cy='442'
+                r='138'
+                stroke='white'
+                stroke-opacity='0.04'
+                stroke-width='50'
+              />
+              <circle
+                cx='446'
+                r='39'
+                stroke='white'
+                stroke-opacity='0.04'
+                stroke-width='20'
+              />
+              <path
+                d='M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z'
+                stroke='white'
+                stroke-opacity='0.08'
+                stroke-width='12'
+              />
+            </svg>
+          </span>
+          <span className='absolute bottom-0 right-0'>
+            <svg
+              width='493'
+              height='470'
+              viewBox='0 0 493 470'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'>
+              <circle
+                cx='462'
+                cy='5'
+                r='138'
+                stroke='white'
+                stroke-opacity='0.04'
+                stroke-width='50'
+              />
+              <circle
+                cx='49'
+                cy='470'
+                r='39'
+                stroke='white'
+                stroke-opacity='0.04'
+                stroke-width='20'
+              />
+              <path
+                d='M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z'
+                stroke='white'
+                stroke-opacity='0.06'
+                stroke-width='13'
+              />
+            </svg>
+          </span>
+        </div>
+      </section>
+      {/* <!-- ====== CTA Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Contact.js b/themes/starter/components/Contact.js
index fccacfdef28..b592a59b779 100644
--- a/themes/starter/components/Contact.js
+++ b/themes/starter/components/Contact.js
@@ -5,6 +5,7 @@ import { SVGLocation } from './svg/SVGLocation'
 
 /* eslint-disable react/no-unescaped-entities */
 export const Contact = () => {
+  const url = siteConfig('STARTER_CONTACT_MSG_EXTERNAL_URL')
   return (
     <>
       {/* <!-- ====== Contact Start ====== --> */}
@@ -18,10 +19,10 @@ export const Contact = () => {
               <div className='ud-contact-content-wrapper'>
                 <div className='ud-contact-title mb-12 lg:mb-[150px]'>
                   <span className='mb-6 block text-base font-medium text-dark dark:text-white'>
-                    {siteConfig('STARTER_CONTACT_TITLE', null, CONFIG)}
+                    {siteConfig('STARTER_CONTACT_TITLE')}
                   </span>
                   <h2 className='max-w-[260px] text-[35px] font-semibold leading-[1.14] text-dark dark:text-white'>
-                    {siteConfig('STARTER_CONTACT_TEXT', null, CONFIG)}
+                    {siteConfig('STARTER_CONTACT_TEXT')}
                   </h2>
                 </div>
                 <div className='mb-12 flex flex-wrap justify-between lg:mb-0'>
@@ -59,7 +60,7 @@ export const Contact = () => {
                         )}
                       </h5>
                       <p className='text-base text-body-color dark:text-dark-6'>
-                        {siteConfig('STARTER_CONTACT_EMAIL_TEXT', null, CONFIG)}
+                        {siteConfig('STARTER_CONTACT_EMAIL_TEXT')}
                       </p>
                     </div>
                   </div>
@@ -67,7 +68,7 @@ export const Contact = () => {
               </div>
             </div>
 
-            {siteConfig('STARTER_CONTACT_MSG_EXTERNAL_URL', null, CONFIG) && (
+            {url && url !== '' && (
               <>
                 {/* 联系方式右侧留言 */}
                 <div className='w-full px-4 lg:w-5/12 xl:w-4/12'>
diff --git a/themes/starter/components/FAQ.js b/themes/starter/components/FAQ.js
index daff2aaf9bc..29f9d5958ef 100644
--- a/themes/starter/components/FAQ.js
+++ b/themes/starter/components/FAQ.js
@@ -1,137 +1,120 @@
-import { siteConfig } from '@/lib/config';
+import { siteConfig } from '@/lib/config'
 import { useEffect } from 'react'
-import CONFIG from '../config';
-import { SVGQuestion } from './svg/SVGQuestion';
-import { SVGCircleBG } from './svg/SVGCircleBG';
+import { SVGCircleBG } from './svg/SVGCircleBG'
+import { SVGQuestion } from './svg/SVGQuestion'
 
 export const FAQ = () => {
   useEffect(() => {
     // ===== Faq accordion
-    const faqs = document.querySelectorAll('.single-faq');
-    faqs.forEach((el) => {
+    const faqs = document.querySelectorAll('.single-faq')
+    faqs.forEach(el => {
       el.querySelector('.faq-btn').addEventListener('click', () => {
-        el.querySelector('.icon').classList.toggle('rotate-180');
-        el.querySelector('.faq-content').classList.toggle('hidden');
-      });
-    });
+        el.querySelector('.icon').classList.toggle('rotate-180')
+        el.querySelector('.faq-content').classList.toggle('hidden')
+      })
+    })
   })
-  return <>
+  return (
+    <>
       {/* <!-- ====== FAQ Section Start --> */}
-      <section
-      className="relative z-20 overflow-hidden bg-white pb-8 pt-20 dark:bg-dark lg:pb-[50px] lg:pt-[120px]"
-    >
-      <div className="container mx-auto">
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4">
-            <div className="mx-auto mb-[60px] max-w-[520px] text-center">
-              <span className="mb-2 block text-lg font-semibold text-primary">
-                {siteConfig('STARTER_FAQ_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]"
-              >
-                {siteConfig('STARTER_FAQ_TEXT_1', null, CONFIG)}
-              </h2>
-              <p
-                className="mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6"
-              >
-                {siteConfig('STARTER_FAQ_TEXT_2', null, CONFIG)}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4 lg:w-1/2">
-            <div className="mb-12 flex lg:mb-[70px]">
-              <div
-                className="mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]"
-              >
-                <SVGQuestion/>
-              </div>
-              <div className="w-full">
-                <h3
-                  className="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
-                >
-                 {siteConfig('STARTER_FAQ_1_QUESTION', null, CONFIG)}
-                </h3>
-                <p dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_FAQ_1_ANSWER', null, CONFIG) }
-                } className="text-base text-body-color dark:text-dark-6">
-                </p>
-              </div>
-            </div>
-            <div className="mb-12 flex lg:mb-[70px]">
-              <div
-                className="mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]"
-              >
-                <SVGQuestion/>
-              </div>
-              <div className="w-full">
-              <h3
-                  className="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
-                >
-                 {siteConfig('STARTER_FAQ_2_QUESTION', null, CONFIG)}
-                </h3>
-                <p dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_FAQ_2_ANSWER', null, CONFIG) }
-                } className="text-base text-body-color dark:text-dark-6">
+      <section className='relative z-20 overflow-hidden bg-white pb-8 pt-20 dark:bg-dark lg:pb-[50px] lg:pt-[120px]'>
+        <div className='container mx-auto'>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4'>
+              <div className='mx-auto mb-[60px] max-w-[520px] text-center'>
+                <span className='mb-2 block text-lg font-semibold text-primary'>
+                  {siteConfig('STARTER_FAQ_TITLE')}
+                </span>
+                <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
+                  {siteConfig('STARTER_FAQ_TEXT_1')}
+                </h2>
+                <p className='mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6'>
+                  {siteConfig('STARTER_FAQ_TEXT_2')}
                 </p>
               </div>
             </div>
           </div>
 
-          <div className="w-full px-4 lg:w-1/2">
-            <div className="mb-12 flex lg:mb-[70px]">
-              <div
-                className="mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]"
-              >
-                <SVGQuestion/>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4 lg:w-1/2'>
+              <div className='mb-12 flex lg:mb-[70px]'>
+                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
+                  <SVGQuestion />
+                </div>
+                <div className='w-full'>
+                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
+                    {siteConfig('STARTER_FAQ_1_QUESTION')}
+                  </h3>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_FAQ_1_ANSWER')
+                    }}
+                    className='text-base text-body-color dark:text-dark-6'></p>
+                </div>
               </div>
-              <div className="w-full">
-              <h3
-                  className="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
-                >
-                 {siteConfig('STARTER_FAQ_3_QUESTION', null, CONFIG)}
-                </h3>
-                <p dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_FAQ_3_ANSWER', null, CONFIG) }
-                } className="text-base text-body-color dark:text-dark-6">
-                </p>
+              <div className='mb-12 flex lg:mb-[70px]'>
+                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
+                  <SVGQuestion />
+                </div>
+                <div className='w-full'>
+                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
+                    {siteConfig('STARTER_FAQ_2_QUESTION')}
+                  </h3>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_FAQ_2_ANSWER')
+                    }}
+                    className='text-base text-body-color dark:text-dark-6'></p>
+                </div>
               </div>
             </div>
-            <div className="mb-12 flex lg:mb-[70px]">
-              <div
-                className="mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]"
-              >
-                <SVGQuestion/>
+
+            <div className='w-full px-4 lg:w-1/2'>
+              <div className='mb-12 flex lg:mb-[70px]'>
+                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
+                  <SVGQuestion />
+                </div>
+                <div className='w-full'>
+                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
+                    {siteConfig('STARTER_FAQ_3_QUESTION')}
+                  </h3>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_FAQ_3_ANSWER')
+                    }}
+                    className='text-base text-body-color dark:text-dark-6'></p>
+                </div>
               </div>
-              <div className="w-full">
-              <h3
-                  className="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
-                >
-                 {siteConfig('STARTER_FAQ_4_QUESTION', null, CONFIG)}
-                </h3>
-                <p dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_FAQ_4_ANSWER', null, CONFIG) }
-                } className="text-base text-body-color dark:text-dark-6">
-                </p>
+              <div className='mb-12 flex lg:mb-[70px]'>
+                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
+                  <SVGQuestion />
+                </div>
+                <div className='w-full'>
+                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
+                    {siteConfig('STARTER_FAQ_4_QUESTION')}
+                  </h3>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_FAQ_4_ANSWER')
+                    }}
+                    className='text-base text-body-color dark:text-dark-6'></p>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-    {/* 背景图案 */}
-      <div>
-        <span className="absolute left-4 top-4 -z-[1]">
-          <SVGCircleBG/>
-        </span>
-        <span className="absolute bottom-4 right-4 -z-[1]">
-            <SVGCircleBG/>
-        </span>
-      </div>
-    </section>
-    {/* <!-- ====== FAQ Section End --> */}
+        {/* 背景图案 */}
+        <div>
+          <span className='absolute left-4 top-4 -z-[1]'>
+            <SVGCircleBG />
+          </span>
+          <span className='absolute bottom-4 right-4 -z-[1]'>
+            <SVGCircleBG />
+          </span>
+        </div>
+      </section>
+      {/* <!-- ====== FAQ Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Features.js b/themes/starter/components/Features.js
index c33067464d1..ed2e63a3f36 100644
--- a/themes/starter/components/Features.js
+++ b/themes/starter/components/Features.js
@@ -1,135 +1,114 @@
-import CONFIG from '../config'
-import { siteConfig } from '@/lib/config';
-import { SVGGifts } from './svg/SVGGifts';
-import { SVGTemplate } from './svg/SVGTemplate';
-import { SVGDesign } from './svg/SVGDesign';
-import { SVGEssential } from './svg/SVGEssential';
+import { siteConfig } from '@/lib/config'
+import { SVGDesign } from './svg/SVGDesign'
+import { SVGEssential } from './svg/SVGEssential'
+import { SVGGifts } from './svg/SVGGifts'
+import { SVGTemplate } from './svg/SVGTemplate'
 /**
  * 产品特性相关，将显示在首页中
  * @returns
  */
 export const Features = () => {
-  return <>
-     {/* <!-- ====== Features Section Start --> */}
-     <section className="pb-8 pt-20 dark:bg-dark lg:pb-[70px] lg:pt-[120px]">
-      <div className="container">
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4">
-            <div className="mx-auto mb-12 max-w-[485px] text-center lg:mb-[70px]">
-              <span className="mb-2 block text-lg font-semibold text-primary">
-                {siteConfig('STARTER_FEATURE_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
-              >
-                {siteConfig('STARTER_FEATURE_TEXT_1', null, CONFIG)}
-              </h2>
-              <p className="text-base text-body-color dark:text-dark-6">
-                {siteConfig('STARTER_FEATURE_TEXT_2', null, CONFIG)}
-              </p>
+  return (
+    <>
+      {/* <!-- ====== Features Section Start --> */}
+      <section className='pb-8 pt-20 dark:bg-dark lg:pb-[70px] lg:pt-[120px]'>
+        <div className='container'>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4'>
+              <div className='mx-auto mb-12 max-w-[485px] text-center lg:mb-[70px]'>
+                <span className='mb-2 block text-lg font-semibold text-primary'>
+                  {siteConfig('STARTER_FEATURE_TITLE')}
+                </span>
+                <h2 className='mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+                  {siteConfig('STARTER_FEATURE_TEXT_1')}
+                </h2>
+                <p className='text-base text-body-color dark:text-dark-6'>
+                  {siteConfig('STARTER_FEATURE_TEXT_2')}
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4 md:w-1/2 lg:w-1/4">
-            <div className="wow fadeInUp group mb-12" data-wow-delay=".1s">
-              <div
-                className="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
-              >
-                <span
-                  className="absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
-                ></span>
-                <SVGGifts/>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
+              <div className='wow fadeInUp group mb-12' data-wow-delay='.1s'>
+                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
+                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
+                  <SVGGifts />
+                </div>
+                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
+                  {siteConfig('STARTER_FEATURE_1_TITLE_1')}
+                </h4>
+                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+                  {siteConfig('STARTER_FEATURE_1_TEXT_1')}
+                </p>
+                <a
+                  href={siteConfig('STARTER_FEATURE_1_BUTTON_URL')}
+                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
+                  {siteConfig('STARTER_FEATURE_1_BUTTON_TEXT')}
+                </a>
               </div>
-              <h4 className="mb-3 text-xl font-bold text-dark dark:text-white">
-                {siteConfig('STARTER_FEATURE_1_TITLE_1', null, CONFIG)}
-              </h4>
-              <p className="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
-                {siteConfig('STARTER_FEATURE_1_TEXT_1', null, CONFIG)}
-              </p>
-              <a
-                href={siteConfig('STARTER_FEATURE_1_BUTTON_URL', null, CONFIG)}
-                className="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary"
-              >
-                {siteConfig('STARTER_FEATURE_1_BUTTON_TEXT', null, CONFIG)}
-              </a>
             </div>
-          </div>
-          <div className="w-full px-4 md:w-1/2 lg:w-1/4">
-            <div className="wow fadeInUp group mb-12" data-wow-delay=".15s">
-              <div
-                className="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
-              >
-                <span
-                  className="absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
-                ></span>
-                <SVGTemplate/>
+            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
+              <div className='wow fadeInUp group mb-12' data-wow-delay='.15s'>
+                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
+                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
+                  <SVGTemplate />
+                </div>
+                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
+                  {siteConfig('STARTER_FEATURE_2_TITLE_1')}
+                </h4>
+                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+                  {siteConfig('STARTER_FEATURE_2_TEXT_1')}
+                </p>
+                <a
+                  href={siteConfig('STARTER_FEATURE_2_BUTTON_URL')}
+                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
+                  {siteConfig('STARTER_FEATURE_2_BUTTON_TEXT')}
+                </a>
               </div>
-              <h4 className="mb-3 text-xl font-bold text-dark dark:text-white">
-              {siteConfig('STARTER_FEATURE_2_TITLE_1', null, CONFIG)}
-              </h4>
-              <p className="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
-              {siteConfig('STARTER_FEATURE_2_TEXT_1', null, CONFIG)}
-              </p>
-              <a
-                href={siteConfig('STARTER_FEATURE_2_BUTTON_URL', null, CONFIG)}
-                className="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary"
-              >
-                {siteConfig('STARTER_FEATURE_2_BUTTON_TEXT', null, CONFIG)}
-              </a>
             </div>
-          </div>
-          <div className="w-full px-4 md:w-1/2 lg:w-1/4">
-            <div className="wow fadeInUp group mb-12" data-wow-delay=".2s">
-              <div
-                className="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
-              >
-                <span
-                  className="absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
-                ></span>
-                <SVGDesign/>
+            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
+              <div className='wow fadeInUp group mb-12' data-wow-delay='.2s'>
+                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
+                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
+                  <SVGDesign />
+                </div>
+                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
+                  {siteConfig('STARTER_FEATURE_3_TITLE_1')}
+                </h4>
+                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+                  {siteConfig('STARTER_FEATURE_3_TEXT_1')}
+                </p>
+                <a
+                  href={siteConfig('STARTER_FEATURE_3_BUTTON_URL')}
+                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
+                  {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT')}
+                </a>
               </div>
-              <h4 className="mb-3 text-xl font-bold text-dark dark:text-white">
-                {siteConfig('STARTER_FEATURE_3_TITLE_1', null, CONFIG)}
-              </h4>
-              <p className="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
-              {siteConfig('STARTER_FEATURE_3_TEXT_1', null, CONFIG)}
-              </p>
-              <a
-                href={siteConfig('STARTER_FEATURE_3_BUTTON_URL', null, CONFIG)}
-                className="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary"
-              >
-                {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT', null, CONFIG)}
-              </a>
             </div>
-          </div>
-          <div className="w-full px-4 md:w-1/2 lg:w-1/4">
-            <div className="wow fadeInUp group mb-12" data-wow-delay=".25s">
-              <div
-                className="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
-              >
-                <span
-                  className="absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
-                ></span>
-                <SVGEssential/>
+            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
+              <div className='wow fadeInUp group mb-12' data-wow-delay='.25s'>
+                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
+                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
+                  <SVGEssential />
+                </div>
+                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
+                  {siteConfig('STARTER_FEATURE_4_TITLE_1')}
+                </h4>
+                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+                  {siteConfig('STARTER_FEATURE_4_TEXT_1')}
+                </p>
+                <a
+                  href={siteConfig('STARTER_FEATURE_4_BUTTON_URL')}
+                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
+                  {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT')}
+                </a>
               </div>
-              <h4 className="mb-3 text-xl font-bold text-dark dark:text-white">
-              {siteConfig('STARTER_FEATURE_4_TITLE_1', null, CONFIG)}
-              </h4>
-              <p className="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
-              {siteConfig('STARTER_FEATURE_4_TEXT_1', null, CONFIG)}
-              </p>
-              <a
-                href={siteConfig('STARTER_FEATURE_4_BUTTON_URL', null, CONFIG)}
-                className="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary"
-              >
-                {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT', null, CONFIG)}
-              </a>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    {/* <!-- ====== Features Section End --> */}
+      </section>
+      {/* <!-- ====== Features Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Footer.js b/themes/starter/components/Footer.js
index 5bdc4a813ae..d901c2c38cc 100644
--- a/themes/starter/components/Footer.js
+++ b/themes/starter/components/Footer.js
@@ -1,17 +1,12 @@
 import { siteConfig } from '@/lib/config'
 import SocialButton from '@/themes/fukasawa/components/SocialButton'
-import CONFIG from '../config'
 import { Logo } from './Logo'
 import { SVGFooterCircleBG } from './svg/SVGFooterCircleBG'
 
 /* eslint-disable @next/next/no-img-element */
 export const Footer = props => {
   const latestPosts = props?.latestPosts ? props?.latestPosts.slice(0, 2) : []
-  const STARTER_FOOTER_LINK_GROUP = siteConfig(
-    'STARTER_FOOTER_LINK_GROUP',
-    [],
-    CONFIG
-  )
+  const STARTER_FOOTER_LINK_GROUP = siteConfig('STARTER_FOOTER_LINK_GROUP')
   return (
     <>
       {/* <!-- ====== Footer Section Start --> */}
@@ -26,7 +21,7 @@ export const Footer = props => {
                   <Logo white={true} />
                 </a>
                 <p className='mb-8 max-w-[270px] text-base text-gray-7'>
-                  {siteConfig('STARTER_FOOTER_SLOGAN', null, CONFIG)}
+                  {siteConfig('STARTER_FOOTER_SLOGAN')}
                 </p>
                 <div className='-mx-3 flex items-center'>
                   <div className='mx-3'>
@@ -68,7 +63,7 @@ export const Footer = props => {
             <div className='w-full px-4 md:w-2/3 lg:w-6/12 xl:w-3/12'>
               <div className='mb-10 w-full'>
                 <h4 className='mb-9 text-lg font-semibold text-white'>
-                  {siteConfig('STARTER_FOOTER_BLOG_LATEST_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_FOOTER_BLOG_LATEST_TITLE')}
                 </h4>
                 {/* 展示两条最新博客文章 */}
                 <div className='flex flex-col gap-8'>
@@ -102,42 +97,24 @@ export const Footer = props => {
                 <div className='my-1'>
                   <div className='-mx-3 flex items-center justify-center md:justify-start'>
                     <a
-                      href={siteConfig(
-                        'STARTER_FOOTER_PRIVACY_POLICY_URL',
-                        null,
-                        CONFIG
-                      )}
+                      href={siteConfig('STARTER_FOOTER_PRIVACY_POLICY_URL')}
                       className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
-                      {siteConfig(
-                        'STARTER_FOOTER_PRIVACY_POLICY_TEXT',
-                        null,
-                        CONFIG
-                      )}
+                      {siteConfig('STARTER_FOOTER_PRIVACY_POLICY_TEXT')}
                     </a>
                     <a
                       href={siteConfig(
-                        'STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_URL',
-                        null,
-                        CONFIG
+                        'STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_URL'
                       )}
                       className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
-                      {siteConfig(
-                        'STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_TEXT',
-                        null,
-                        CONFIG
-                      )}
+                      {siteConfig('STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_TEXT')}
                     </a>
                     <a
                       href={siteConfig(
-                        'STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_URL',
-                        null,
-                        CONFIG
+                        'STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_URL'
                       )}
                       className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
                       {siteConfig(
-                        'STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_TEXT',
-                        null,
-                        CONFIG
+                        'STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_TEXT'
                       )}
                     </a>
                   </div>
diff --git a/themes/starter/components/Hero.js b/themes/starter/components/Hero.js
index 259c03274da..28343ea91b5 100644
--- a/themes/starter/components/Hero.js
+++ b/themes/starter/components/Hero.js
@@ -1,96 +1,90 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 /**
  * 英雄大图区块
  */
 export const Hero = () => {
-  return <>
-     {/* <!-- ====== Hero Section Start --> */}
-     <div
-      id="home"
-      className="relative overflow-hidden bg-primary pt-[120px] md:pt-[130px] lg:pt-[160px]"
-    >
-      <div className="container">
-        <div className="-mx-4 flex flex-wrap items-center">
-          <div className="w-full px-4">
-            <div
-              className="hero-content wow fadeInUp mx-auto max-w-[780px] text-center"
-              data-wow-delay=".2s"
-            >
-              {/* 主标题 */}
-              <h1
-                className="mb-6 text-3xl font-bold leading-snug text-white sm:text-4xl sm:leading-snug lg:text-5xl lg:leading-[1.2]"
-              >
-                {siteConfig('STARTER_HERO_TITLE_1', null, CONFIG)}
-              </h1>
-              {/* 次标题 */}
-              <p
-                className="mx-auto mb-9 max-w-[600px] text-base font-medium text-white sm:text-lg sm:leading-[1.44]"
-              >
-                {siteConfig('STARTER_HERO_TITLE_2', null, CONFIG)}
-              </p>
-              {/* 按钮组 */}
-              <ul
-                className="mb-10 flex flex-wrap items-center justify-center gap-5"
-              >
-                {siteConfig('STARTER_HERO_BUTTON_1_TEXT', null, CONFIG) &&
-                <li>
-                  <a
-                    href={siteConfig('STARTER_HERO_BUTTON_1_URL', null, CONFIG)}
-                    className="inline-flex items-center justify-center rounded-md bg-white px-7 py-[14px] text-center text-base font-medium text-dark shadow-1 transition duration-300 ease-in-out hover:bg-gray-2 hover:text-body-color"
-                  >
-                     {siteConfig('STARTER_HERO_BUTTON_1_TEXT', null, CONFIG)}
-                  </a>
-                </li>
-                }
-                {siteConfig('STARTER_HERO_BUTTON_2_TEXT', null, CONFIG) &&
-                <li>
-                  <a
-                    href={siteConfig('STARTER_HERO_BUTTON_2_URL', null, CONFIG)}
-                    target="_blank"
-                    className="flex items-center rounded-md bg-white/[0.12] px-6 py-[14px] text-base font-medium text-white transition duration-300 ease-in-out hover:bg-white hover:text-dark" rel="noreferrer"
-                  >
-                    {siteConfig('STARTER_HERO_BUTTON_2_ICON', null, CONFIG) && <img className='mr-4' src={siteConfig('STARTER_HERO_BUTTON_2_ICON', null, CONFIG)}/>}
-                    {siteConfig('STARTER_HERO_BUTTON_2_TEXT', null, CONFIG)}
-                  </a>
-                </li>
-                }
-              </ul>
-
+  return (
+    <>
+      {/* <!-- ====== Hero Section Start --> */}
+      <div
+        id='home'
+        className='relative overflow-hidden bg-primary pt-[120px] md:pt-[130px] lg:pt-[160px]'>
+        <div className='container'>
+          <div className='-mx-4 flex flex-wrap items-center'>
+            <div className='w-full px-4'>
+              <div
+                className='hero-content wow fadeInUp mx-auto max-w-[780px] text-center'
+                data-wow-delay='.2s'>
+                {/* 主标题 */}
+                <h1 className='mb-6 text-3xl font-bold leading-snug text-white sm:text-4xl sm:leading-snug lg:text-5xl lg:leading-[1.2]'>
+                  {siteConfig('STARTER_HERO_TITLE_1')}
+                </h1>
+                {/* 次标题 */}
+                <p className='mx-auto mb-9 max-w-[600px] text-base font-medium text-white sm:text-lg sm:leading-[1.44]'>
+                  {siteConfig('STARTER_HERO_TITLE_2')}
+                </p>
+                {/* 按钮组 */}
+                <ul className='mb-10 flex flex-wrap items-center justify-center gap-5'>
+                  {siteConfig('STARTER_HERO_BUTTON_1_TEXT') && (
+                    <li>
+                      <a
+                        href={siteConfig('STARTER_HERO_BUTTON_1_URL')}
+                        className='inline-flex items-center justify-center rounded-md bg-white px-7 py-[14px] text-center text-base font-medium text-dark shadow-1 transition duration-300 ease-in-out hover:bg-gray-2 hover:text-body-color'>
+                        {siteConfig('STARTER_HERO_BUTTON_1_TEXT')}
+                      </a>
+                    </li>
+                  )}
+                  {siteConfig('STARTER_HERO_BUTTON_2_TEXT') && (
+                    <li>
+                      <a
+                        href={siteConfig('STARTER_HERO_BUTTON_2_URL')}
+                        target='_blank'
+                        className='flex items-center rounded-md bg-white/[0.12] px-6 py-[14px] text-base font-medium text-white transition duration-300 ease-in-out hover:bg-white hover:text-dark'
+                        rel='noreferrer'>
+                        {siteConfig('STARTER_HERO_BUTTON_2_ICON') && (
+                          <img
+                            className='mr-4'
+                            src={siteConfig('STARTER_HERO_BUTTON_2_ICON')}
+                          />
+                        )}
+                        {siteConfig('STARTER_HERO_BUTTON_2_TEXT')}
+                      </a>
+                    </li>
+                  )}
+                </ul>
+              </div>
             </div>
-          </div>
-
-          {/* 产品预览图片 */}
-          { siteConfig('STARTER_HERO_PREVIEW_IMAGE', null, CONFIG) && <div className="w-full px-4">
-            <div
-              className="wow fadeInUp relative z-10 mx-auto max-w-[845px]"
-              data-wow-delay=".25s"
-            >
 
-              <div className="mt-16">
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={siteConfig('STARTER_HERO_PREVIEW_IMAGE', null, CONFIG)}
-                  alt="hero"
-                  className="mx-auto max-w-full rounded-t-xl rounded-tr-xl"
-                />
-              </div>
+            {/* 产品预览图片 */}
+            {siteConfig('STARTER_HERO_PREVIEW_IMAGE') && (
+              <div className='w-full px-4'>
+                <div
+                  className='wow fadeInUp relative z-10 mx-auto max-w-[845px]'
+                  data-wow-delay='.25s'>
+                  <div className='mt-16'>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={siteConfig('STARTER_HERO_PREVIEW_IMAGE')}
+                      alt='hero'
+                      className='mx-auto max-w-full rounded-t-xl rounded-tr-xl'
+                    />
+                  </div>
 
-              {/* 背景图 */}
-              <div className="absolute -left-9 bottom-0 z-[-1]">
-                <img src='/images/starter/bg-hero-circle.svg'/>
-              </div>
-              <div className="absolute -right-6 -top-6 z-[-1]">
-              <img src='/images/starter/bg-hero-circle.svg'/>
+                  {/* 背景图 */}
+                  <div className='absolute -left-9 bottom-0 z-[-1]'>
+                    <img src='/images/starter/bg-hero-circle.svg' />
+                  </div>
+                  <div className='absolute -right-6 -top-6 z-[-1]'>
+                    <img src='/images/starter/bg-hero-circle.svg' />
+                  </div>
+                </div>
               </div>
-            </div>
+            )}
           </div>
-           }
-
         </div>
       </div>
-    </div>
-    {/* <!-- ====== Hero Section End --> */}
+      {/* <!-- ====== Hero Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Logo.js b/themes/starter/components/Logo.js
index 5027b01fb20..bbbb51447d6 100644
--- a/themes/starter/components/Logo.js
+++ b/themes/starter/components/Logo.js
@@ -5,7 +5,6 @@ import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import CONFIG from '../config'
 
 /**
  * 站点图标
@@ -14,7 +13,7 @@ import CONFIG from '../config'
 export const Logo = ({ white }) => {
   const router = useRouter()
   const { isDarkMode } = useGlobal()
-  const logoWhite = siteConfig('STARTER_LOGO_WHITE', null, CONFIG)
+  const logoWhite = siteConfig('STARTER_LOGO_WHITE')
   const [logo, setLogo] = useState(logoWhite)
   const [logoTextColor, setLogoTextColor] = useState('text-white')
 
@@ -26,10 +25,10 @@ export const Logo = ({ white }) => {
       // 何时显示浅色或白底的logo
       const homePageNavBar = router.route === '/' && scrollY < 10 // 在首页并且视窗在页面顶部
       if (white || isDarkMode || homePageNavBar) {
-        setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG))
+        setLogo(siteConfig('STARTER_LOGO_WHITE'))
         setLogoTextColor('text-white')
       } else {
-        setLogo(siteConfig('STARTER_LOGO', null, CONFIG))
+        setLogo(siteConfig('STARTER_LOGO'))
         setLogoTextColor('text-black')
       }
     }, throttleMs)
diff --git a/themes/starter/components/MenuItem.js b/themes/starter/components/MenuItem.js
index ec08aa28d34..ff184f36b0e 100644
--- a/themes/starter/components/MenuItem.js
+++ b/themes/starter/components/MenuItem.js
@@ -1,6 +1,10 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-
+/**
+ * 菜单链接
+ * @param {*} param0
+ * @returns
+ */
 export const MenuItem = ({ link }) => {
   const hasSubMenu = link?.subMenus?.length > 0
   const router = useRouter()
diff --git a/themes/starter/components/MenuList.js b/themes/starter/components/MenuList.js
index 38ec04f4423..bbfb7925c19 100644
--- a/themes/starter/components/MenuList.js
+++ b/themes/starter/components/MenuList.js
@@ -1,7 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useEffect } from 'react'
-import CONFIG from '../config'
 import { MenuItem } from './MenuItem'
 /**
  * 响应式 折叠菜单
@@ -15,25 +14,25 @@ export const MenuList = props => {
       icon: 'fas fa-archive',
       name: locale.NAV.ARCHIVE,
       href: '/archive',
-      show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG)
+      show: siteConfig('HEO_MENU_ARCHIVE')
     },
     {
       icon: 'fas fa-search',
       name: locale.NAV.SEARCH,
       href: '/search',
-      show: siteConfig('HEO_MENU_SEARCH', null, CONFIG)
+      show: siteConfig('HEO_MENU_SEARCH')
     },
     {
       icon: 'fas fa-folder',
       name: locale.COMMON.CATEGORY,
       href: '/category',
-      show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG)
+      show: siteConfig('HEO_MENU_CATEGORY')
     },
     {
       icon: 'fas fa-tag',
       name: locale.COMMON.TAGS,
       href: '/tag',
-      show: siteConfig('HEO_MENU_TAG', null, CONFIG)
+      show: siteConfig('HEO_MENU_TAG')
     }
   ]
 
diff --git a/themes/starter/components/MessageForm.js b/themes/starter/components/MessageForm.js
index 25bce6eb08d..718cfcd19f2 100644
--- a/themes/starter/components/MessageForm.js
+++ b/themes/starter/components/MessageForm.js
@@ -1,5 +1,4 @@
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 import { useRef, useState } from 'react'
 
 /**
@@ -16,7 +15,7 @@ export const MessageForm = () => {
     message: ''
   })
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     const { name, value } = e.target
     setFormData(prevState => ({
       ...prevState,
@@ -44,89 +43,90 @@ export const MessageForm = () => {
   //     }
   //   }, [submitComments])
 
-  return <>
-                <h3
-                className="mb-8 text-2xl font-semibold text-dark dark:text-white md:text-[28px] md:leading-[1.42]"
-              >
-                {siteConfig('STARTER_CONTACT_MSG_TITLE', null, CONFIG)}
-              </h3>
-              <form ref={formRef}>
-    <div className="mb-[22px]">
-      <label
-        // for="fullName"
-        className="mb-4 block text-sm text-body-color dark:text-dark-6">
-        {siteConfig('STARTER_CONTACT_MSG_NAME', null, CONFIG)}*
-      </label>
-      <input
-        disabled={success}
-        type="text"
-        name="fullName"
-        value={formData.fullName}
-        onChange={handleChange}
-        placeholder="Adam Gelius"
-        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-      />
-    </div>
-    <div className="mb-[22px]">
-      <label
-        // for="email"
-        className="mb-4 block text-sm text-body-color dark:text-dark-6">
-        {siteConfig('STARTER_CONTACT_MSG_EMAIL', null, CONFIG)}*
-      </label >
-      <input
-        disabled={success}
-        type="email"
-        name="email"
-        value={formData.email}
-        onChange={handleChange}
-        placeholder="example@yourmail.com"
-        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-      />
-    </div>
-    <div className="mb-[22px]">
-        <label
-        // for="phone"
-        className="mb-4 block text-sm text-body-color dark:text-dark-6">
-        {siteConfig('STARTER_CONTACT_MSG_PHONE', null, CONFIG)}*
-        </label >
-      <input
-        disabled={success}
-        type="text"
-        name="phone"
-        value={formData.phone}
-        onChange={handleChange}
-        placeholder="+885 1254 5211 552"
-        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-      />
-    </div>
-    <div className="mb-[30px]">
-      <label
-        // for="message"
-        className="mb-4 block text-sm text-body-color dark:text-dark-6">
-        {siteConfig('STARTER_CONTACT_MSG_TEXT', null, CONFIG)}*
-        </label >
-      <textarea
-        disabled={success}
-        name="message"
-        value={formData.message}
-        onChange={handleChange}
-        rows="1"
-        placeholder="type your message here"
-        className="w-full resize-none border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-      ></textarea>
-    </div>
-    <div className="mb-0">
-      <button
-        disabled={success}
-        type="submit"
-        className="inline-flex items-center justify-center rounded-md bg-primary px-10 py-3 text-base font-medium text-white transition duration-300 ease-in-out hover:bg-blue-dark"
-      >
-        {siteConfig('STARTER_CONTACT_MSG_SEND', null, CONFIG)}
-      </button>
-        {/* Success message */}
-        {success && <p className="mt-2 text-green-600 text-sm">{siteConfig('STARTER_CONTACT_MSG_THANKS', null, CONFIG)}</p>}
-
-    </div>
-  </form>
-              </>
+  return (
+    <>
+      <h3 className='mb-8 text-2xl font-semibold text-dark dark:text-white md:text-[28px] md:leading-[1.42]'>
+        {siteConfig('STARTER_CONTACT_MSG_TITLE')}
+      </h3>
+      <form ref={formRef}>
+        <div className='mb-[22px]'>
+          <label
+            // for="fullName"
+            className='mb-4 block text-sm text-body-color dark:text-dark-6'>
+            {siteConfig('STARTER_CONTACT_MSG_NAME')}*
+          </label>
+          <input
+            disabled={success}
+            type='text'
+            name='fullName'
+            value={formData.fullName}
+            onChange={handleChange}
+            placeholder='Adam Gelius'
+            className='w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6'
+          />
+        </div>
+        <div className='mb-[22px]'>
+          <label
+            // for="email"
+            className='mb-4 block text-sm text-body-color dark:text-dark-6'>
+            {siteConfig('STARTER_CONTACT_MSG_EMAIL')}*
+          </label>
+          <input
+            disabled={success}
+            type='email'
+            name='email'
+            value={formData.email}
+            onChange={handleChange}
+            placeholder='example@yourmail.com'
+            className='w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6'
+          />
+        </div>
+        <div className='mb-[22px]'>
+          <label
+            // for="phone"
+            className='mb-4 block text-sm text-body-color dark:text-dark-6'>
+            {siteConfig('STARTER_CONTACT_MSG_PHONE')}*
+          </label>
+          <input
+            disabled={success}
+            type='text'
+            name='phone'
+            value={formData.phone}
+            onChange={handleChange}
+            placeholder='+885 1254 5211 552'
+            className='w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6'
+          />
+        </div>
+        <div className='mb-[30px]'>
+          <label
+            // for="message"
+            className='mb-4 block text-sm text-body-color dark:text-dark-6'>
+            {siteConfig('STARTER_CONTACT_MSG_TEXT')}*
+          </label>
+          <textarea
+            disabled={success}
+            name='message'
+            value={formData.message}
+            onChange={handleChange}
+            rows='1'
+            placeholder='type your message here'
+            className='w-full resize-none border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6'></textarea>
+        </div>
+        <div className='mb-0'>
+          <button
+            disabled={success}
+            type='submit'
+            className='inline-flex items-center justify-center rounded-md bg-primary px-10 py-3 text-base font-medium text-white transition duration-300 ease-in-out hover:bg-blue-dark'>
+            {siteConfig('STARTER_CONTACT_MSG_SEND')}
+          </button>
+          {/* Success message */}
+          {success && (
+            <p className='mt-2 text-green-600 text-sm'>
+              {siteConfig('STARTER_CONTACT_MSG_THANKS')}
+            </p>
+          )}
+        </div>
+      </form>
+    </>
+  )
 }
diff --git a/themes/starter/components/NavBar.js b/themes/starter/components/NavBar.js
index 2d4fda4125e..b11b3cb56c9 100644
--- a/themes/starter/components/NavBar.js
+++ b/themes/starter/components/NavBar.js
@@ -1,21 +1,22 @@
 /* eslint-disable no-unreachable */
-import throttle from 'lodash.throttle';
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
-import { MenuList } from './MenuList';
-import { DarkModeButton } from './DarkModeButton';
-import { Logo } from './Logo';
-import { useRouter } from 'next/router';
-import { siteConfig } from '@/lib/config';
-import CONFIG from '../config';
-import { useGlobal } from '@/lib/global';
+import { DarkModeButton } from './DarkModeButton'
+import { Logo } from './Logo'
+import { MenuList } from './MenuList'
 
 /**
  * 顶部导航栏
  */
-export const NavBar = (props) => {
+export const NavBar = props => {
   const router = useRouter()
   const { isDarkMode } = useGlobal()
-  const [buttonTextColor, setColor] = useState(router.route === '/' ? 'text-white' : '')
+  const [buttonTextColor, setColor] = useState(
+    router.route === '/' ? 'text-white' : ''
+  )
   useEffect(() => {
     if (isDarkMode || router.route === '/') {
       setColor('text-white')
@@ -33,59 +34,54 @@ export const NavBar = (props) => {
   const throttleMs = 200
   const navBarScollListener = useCallback(
     throttle(() => {
-    // eslint-disable-next-line camelcase
-      const ud_header = document.querySelector('.ud-header');
-      const scrollY = window.scrollY;
+      // eslint-disable-next-line camelcase
+      const ud_header = document.querySelector('.ud-header')
+      const scrollY = window.scrollY
       // 控制台输出当前滚动位置和 sticky 值
       if (scrollY > 0) {
-        ud_header?.classList?.add('sticky');
+        ud_header?.classList?.add('sticky')
       } else {
-        ud_header?.classList?.remove('sticky');
+        ud_header?.classList?.remove('sticky')
       }
     }, throttleMs)
   )
 
-  return <>
-        {/* <!-- ====== Navbar Section Start --> */}
-        <div className="ud-header absolute left-0 top-0 z-40 flex w-full items-center bg-transparent" >
-
-        <div className="container">
-
-            <div className="relative -mx-4 flex items-center justify-between">
-
-                {/* Logo */}
-                <Logo/>
+  return (
+    <>
+      {/* <!-- ====== Navbar Section Start --> */}
+      <div className='ud-header absolute left-0 top-0 z-40 flex w-full items-center bg-transparent'>
+        <div className='container'>
+          <div className='relative -mx-4 flex items-center justify-between'>
+            {/* Logo */}
+            <Logo />
 
-                <div className="flex w-full items-center justify-between px-4">
-
-                    {/* 中间菜单 */}
-                    <MenuList {...props}/>
-
-                    {/* 右侧功能 */}
-                    <div className="flex items-center justify-end pr-16 lg:pr-0">
-                        {/* 深色模式切换 */}
-                        <DarkModeButton/>
-                        {/* 注册登录功能 */}
-                        <div className="hidden sm:flex">
-                            <a
-                            href={siteConfig('STARTER_NAV_BUTTON_1_URL', null, CONFIG)}
-                            className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}
-                            >
-                           {siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)}
-                            </a>
-                            <a
-                            href={siteConfig('STARTER_NAV_BUTTON_2_URL', null, CONFIG)}
-                            className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}
-                            >
-                           {siteConfig('STARTER_NAV_BUTTON_2_TEXT', null, CONFIG)}
-                            </a>
-                        </div>
-                    </div>
+            <div className='flex w-full items-center justify-between px-4'>
+              {/* 中间菜单 */}
+              <MenuList {...props} />
 
+              {/* 右侧功能 */}
+              <div className='flex items-center justify-end pr-16 lg:pr-0'>
+                {/* 深色模式切换 */}
+                <DarkModeButton />
+                {/* 注册登录功能 */}
+                <div className='hidden sm:flex'>
+                  <a
+                    href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
+                    className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}>
+                    {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
+                  </a>
+                  <a
+                    href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
+                    className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
+                    {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
+                  </a>
                 </div>
+              </div>
             </div>
+          </div>
         </div>
-    </div>
-    {/* <!-- ====== Navbar Section End --> */}
+      </div>
+      {/* <!-- ====== Navbar Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Pricing.js b/themes/starter/components/Pricing.js
index b75cd366d94..204bdce51a7 100644
--- a/themes/starter/components/Pricing.js
+++ b/themes/starter/components/Pricing.js
@@ -1,178 +1,177 @@
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 
 /**
  * 价格板块
  * @returns
  */
 export const Pricing = () => {
-  return <>
-       {/* <!-- ====== Pricing Section Start --> */}
-       <section
-      id="pricing"
-      className="relative z-20 overflow-hidden bg-white pb-12 pt-20 dark:bg-dark lg:pb-[90px] lg:pt-[120px]"
-    >
-      <div className="container mx-auto">
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4">
-            <div className="mx-auto mb-[60px] max-w-[510px] text-center">
-              <span className="mb-2 block text-lg font-semibold text-primary">
-                {siteConfig('STARTER_PRICING_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
-              >
-                {siteConfig('STARTER_PRICING_TEXT_1', null, CONFIG)}
-              </h2>
-              <p className="text-base text-body-color dark:text-dark-6">
-              {siteConfig('STARTER_PRICING_TEXT_2', null, CONFIG)}
-              </p>
+  return (
+    <>
+      {/* <!-- ====== Pricing Section Start --> */}
+      <section
+        id='pricing'
+        className='relative z-20 overflow-hidden bg-white pb-12 pt-20 dark:bg-dark lg:pb-[90px] lg:pt-[120px]'>
+        <div className='container mx-auto'>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4'>
+              <div className='mx-auto mb-[60px] max-w-[510px] text-center'>
+                <span className='mb-2 block text-lg font-semibold text-primary'>
+                  {siteConfig('STARTER_PRICING_TITLE')}
+                </span>
+                <h2 className='mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+                  {siteConfig('STARTER_PRICING_TEXT_1')}
+                </h2>
+                <p className='text-base text-body-color dark:text-dark-6'>
+                  {siteConfig('STARTER_PRICING_TEXT_2')}
+                </p>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className="-mx-4 flex flex-wrap justify-center">
-
-          {/* 第一个付费计划 */}
-          <div className="w-full px-4 md:w-1/2 lg:w-1/3">
-            <div
-              className="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
-            >
-              <span
-                className="mb-5 block text-xl font-medium text-dark dark:text-white"
-              >
-                {siteConfig('STARTER_PRICING_1_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
-              >
-                <span className="text-xl font-medium">{siteConfig('STARTER_PRICING_1_PRICE_CURRENCY', null, CONFIG)}</span>
-                <span className="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_1_PRICE', null, CONFIG)}</span>
-                <span
-                  className="text-base font-normal text-body-color dark:text-dark-6"
-                >
-                 {siteConfig('STARTER_PRICING_1_PRICE_PERIOD', null, CONFIG)}
+          <div className='-mx-4 flex flex-wrap justify-center'>
+            {/* 第一个付费计划 */}
+            <div className='w-full px-4 md:w-1/2 lg:w-1/3'>
+              <div className='relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14'>
+                <span className='mb-5 block text-xl font-medium text-dark dark:text-white'>
+                  {siteConfig('STARTER_PRICING_1_TITLE')}
                 </span>
-              </h2>
-
-              <div className="mb-[50px]">
-                <h5 className="mb-5 text-lg font-medium text-dark dark:text-white">
-                  {siteConfig('STARTER_PRICING_1_HEADER', null, CONFIG)}
-                </h5>
-                <div className="flex flex-col gap-[14px]">
-                  {siteConfig('STARTER_PRICING_1_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
-                    return <p key={index} className="text-base text-body-color dark:text-dark-6">
-                    {feature}
-                  </p>
-                  })}
+                <h2 className='space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]'>
+                  <span className='text-xl font-medium'>
+                    {siteConfig('STARTER_PRICING_1_PRICE_CURRENCY')}
+                  </span>
+                  <span className='-ml-1 -tracking-[2px]'>
+                    {siteConfig('STARTER_PRICING_1_PRICE')}
+                  </span>
+                  <span className='text-base font-normal text-body-color dark:text-dark-6'>
+                    {siteConfig('STARTER_PRICING_1_PRICE_PERIOD')}
+                  </span>
+                </h2>
 
+                <div className='mb-[50px]'>
+                  <h5 className='mb-5 text-lg font-medium text-dark dark:text-white'>
+                    {siteConfig('STARTER_PRICING_1_HEADER')}
+                  </h5>
+                  <div className='flex flex-col gap-[14px]'>
+                    {siteConfig('STARTER_PRICING_1_FEATURES')
+                      ?.split(',')
+                      .map((feature, index) => {
+                        return (
+                          <p
+                            key={index}
+                            className='text-base text-body-color dark:text-dark-6'>
+                            {feature}
+                          </p>
+                        )
+                      })}
+                  </div>
                 </div>
+                <a
+                  href={siteConfig('STARTER_PRICING_1_BUTTON_URL')}
+                  className='inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark'>
+                  {siteConfig('STARTER_PRICING_1_BUTTON_TEXT')}
+                </a>
               </div>
-              <a
-                href={siteConfig('STARTER_PRICING_1_BUTTON_URL', null, CONFIG)}
-                className="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
-              >
-                {siteConfig('STARTER_PRICING_1_BUTTON_TEXT', null, CONFIG)}
-              </a>
             </div>
-          </div>
 
-          {/* 第二个付费计划 */}
-          <div className="w-full px-4 md:w-1/2 lg:w-1/3">
-            <div
-              className="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
-            >
-              <p style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
-                className="absolute p-1 right-0 top-0 inline-block rounded-bl-md rounded-tl-md bg-primary text-base font-medium text-white tracking-wider"
-              >
-                {siteConfig('STARTER_PRICING_2_TAG', null, CONFIG)}
-              </p>
-              <span
-                className="mb-5 block text-xl font-medium text-dark dark:text-white"
-              >
-                {siteConfig('STARTER_PRICING_2_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
-              >
-                <span className="text-xl font-medium">{siteConfig('STARTER_PRICING_2_PRICE_CURRENCY', null, CONFIG)}</span>
-                <span className="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_2_PRICE', null, CONFIG)}</span>
-                <span
-                  className="text-base font-normal text-body-color dark:text-dark-6"
-                >
-                 {siteConfig('STARTER_PRICING_2_PRICE_PERIOD', null, CONFIG)}
+            {/* 第二个付费计划 */}
+            <div className='w-full px-4 md:w-1/2 lg:w-1/3'>
+              <div className='relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14'>
+                <p
+                  style={{
+                    writingMode: 'vertical-rl',
+                    textOrientation: 'mixed'
+                  }}
+                  className='absolute p-1 right-0 top-0 inline-block rounded-bl-md rounded-tl-md bg-primary text-base font-medium text-white tracking-wider'>
+                  {siteConfig('STARTER_PRICING_2_TAG')}
+                </p>
+                <span className='mb-5 block text-xl font-medium text-dark dark:text-white'>
+                  {siteConfig('STARTER_PRICING_2_TITLE')}
                 </span>
-              </h2>
-
-              <div className="mb-[50px]">
-                <h5 className="mb-5 text-lg font-medium text-dark dark:text-white">
-                  {siteConfig('STARTER_PRICING_2_HEADER', null, CONFIG)}
-                </h5>
-                <div className="flex flex-col gap-[14px]">
-                  {siteConfig('STARTER_PRICING_2_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
-                    return <p key={index} className="text-base text-body-color dark:text-dark-6">
-                    {feature}
-                  </p>
-                  })}
+                <h2 className='space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]'>
+                  <span className='text-xl font-medium'>
+                    {siteConfig('STARTER_PRICING_2_PRICE_CURRENCY')}
+                  </span>
+                  <span className='-ml-1 -tracking-[2px]'>
+                    {siteConfig('STARTER_PRICING_2_PRICE')}
+                  </span>
+                  <span className='text-base font-normal text-body-color dark:text-dark-6'>
+                    {siteConfig('STARTER_PRICING_2_PRICE_PERIOD')}
+                  </span>
+                </h2>
 
+                <div className='mb-[50px]'>
+                  <h5 className='mb-5 text-lg font-medium text-dark dark:text-white'>
+                    {siteConfig('STARTER_PRICING_2_HEADER')}
+                  </h5>
+                  <div className='flex flex-col gap-[14px]'>
+                    {siteConfig('STARTER_PRICING_2_FEATURES')
+                      ?.split(',')
+                      .map((feature, index) => {
+                        return (
+                          <p
+                            key={index}
+                            className='text-base text-body-color dark:text-dark-6'>
+                            {feature}
+                          </p>
+                        )
+                      })}
+                  </div>
                 </div>
+                <a
+                  href={siteConfig('STARTER_PRICING_2_BUTTON_URL')}
+                  className='inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark'>
+                  {siteConfig('STARTER_PRICING_2_BUTTON_TEXT')}
+                </a>
               </div>
-              <a
-                href={siteConfig('STARTER_PRICING_2_BUTTON_URL', null, CONFIG)}
-                className="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
-              >
-                {siteConfig('STARTER_PRICING_2_BUTTON_TEXT', null, CONFIG)}
-              </a>
             </div>
-          </div>
 
-          {/* 第三个付费计划 */}
-          <div className="w-full px-4 md:w-1/2 lg:w-1/3">
-            <div
-              className="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
-            >
-              <span
-                className="mb-5 block text-xl font-medium text-dark dark:text-white"
-              >
-                {siteConfig('STARTER_PRICING_3_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
-              >
-                <span className="text-xl font-medium">{siteConfig('STARTER_PRICING_3_PRICE_CURRENCY', null, CONFIG)}</span>
-                <span className="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_3_PRICE', null, CONFIG)}</span>
-                <span
-                  className="text-base font-normal text-body-color dark:text-dark-6"
-                >
-                 {siteConfig('STARTER_PRICING_3_PRICE_PERIOD', null, CONFIG)}
+            {/* 第三个付费计划 */}
+            <div className='w-full px-4 md:w-1/2 lg:w-1/3'>
+              <div className='relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14'>
+                <span className='mb-5 block text-xl font-medium text-dark dark:text-white'>
+                  {siteConfig('STARTER_PRICING_3_TITLE')}
                 </span>
-              </h2>
-
-              <div className="mb-[50px]">
-                <h5 className="mb-5 text-lg font-medium text-dark dark:text-white">
-                  {siteConfig('STARTER_PRICING_3_HEADER', null, CONFIG)}
-                </h5>
-                <div className="flex flex-col gap-[14px]">
-                  {siteConfig('STARTER_PRICING_3_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
-                    return <p key={index} className="text-base text-body-color dark:text-dark-6">
-                    {feature}
-                  </p>
-                  })}
+                <h2 className='space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]'>
+                  <span className='text-xl font-medium'>
+                    {siteConfig('STARTER_PRICING_3_PRICE_CURRENCY')}
+                  </span>
+                  <span className='-ml-1 -tracking-[2px]'>
+                    {siteConfig('STARTER_PRICING_3_PRICE')}
+                  </span>
+                  <span className='text-base font-normal text-body-color dark:text-dark-6'>
+                    {siteConfig('STARTER_PRICING_3_PRICE_PERIOD')}
+                  </span>
+                </h2>
 
+                <div className='mb-[50px]'>
+                  <h5 className='mb-5 text-lg font-medium text-dark dark:text-white'>
+                    {siteConfig('STARTER_PRICING_3_HEADER')}
+                  </h5>
+                  <div className='flex flex-col gap-[14px]'>
+                    {siteConfig('STARTER_PRICING_3_FEATURES')
+                      ?.split(',')
+                      .map((feature, index) => {
+                        return (
+                          <p
+                            key={index}
+                            className='text-base text-body-color dark:text-dark-6'>
+                            {feature}
+                          </p>
+                        )
+                      })}
+                  </div>
                 </div>
+                <a
+                  href={siteConfig('STARTER_PRICING_3_BUTTON_URL')}
+                  className='inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark'>
+                  {siteConfig('STARTER_PRICING_3_BUTTON_TEXT')}
+                </a>
               </div>
-              <a
-                href={siteConfig('STARTER_PRICING_3_BUTTON_URL', null, CONFIG)}
-                className="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
-              >
-                {siteConfig('STARTER_PRICING_3_BUTTON_TEXT', null, CONFIG)}
-              </a>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    {/* <!-- ====== Pricing Section End --> */}
-
-</>
+      </section>
+      {/* <!-- ====== Pricing Section End --> */}
+    </>
+  )
 }
diff --git a/themes/starter/components/Team.js b/themes/starter/components/Team.js
index dab80a43895..69eda8a6b09 100644
--- a/themes/starter/components/Team.js
+++ b/themes/starter/components/Team.js
@@ -1,9 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 import { SVGAvatarBG } from './svg/SVGAvatarBG'
 
 export const Team = () => {
+  const STARTER_TEAM_ITEMS = siteConfig('STARTER_TEAM_ITEMS')
   return (
     <>
       {/* <!-- ====== Team Section Start --> */}
@@ -15,14 +15,14 @@ export const Team = () => {
             <div className='w-full px-4'>
               <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
                 <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('STARTER_TEAM_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_TEAM_TITLE')}
                 </span>
                 <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
-                  {siteConfig('STARTER_TEAM_TEXT_1', null, CONFIG)}
+                  {siteConfig('STARTER_TEAM_TEXT_1')}
                 </h2>
                 <p
                   dangerouslySetInnerHTML={{
-                    __html: siteConfig('STARTER_TEAM_TEXT_2', null, CONFIG)
+                    __html: siteConfig('STARTER_TEAM_TEXT_2')
                   }}
                   className='text-base text-body-color dark:text-dark-6'></p>
               </div>
@@ -31,7 +31,7 @@ export const Team = () => {
 
           {/* 团队成员排列矩阵 */}
           <div className='-mx-4 flex flex-wrap justify-center'>
-            {CONFIG.STARTER_TEAM_ITEMS.map((item, index) => {
+            {STARTER_TEAM_ITEMS?.map((item, index) => {
               return (
                 <div
                   key={index}
diff --git a/themes/starter/components/Testimonials.js b/themes/starter/components/Testimonials.js
index 27d1506e5e5..f1b6f3b3069 100644
--- a/themes/starter/components/Testimonials.js
+++ b/themes/starter/components/Testimonials.js
@@ -4,7 +4,6 @@
 import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
-import CONFIG from '../config'
 import { SVGLeftArrow } from './svg/SVGLeftArrow'
 import { SVGRightArrow } from './svg/SVGRightArrow'
 
@@ -60,11 +59,7 @@ export const Testimonials = () => {
   }, [])
   // 用户评分
   const ratings = [1, 2, 3, 4, 5]
-  const STARTER_TESTIMONIALS_ITEMS = siteConfig(
-    'STARTER_TESTIMONIALS_ITEMS',
-    [],
-    CONFIG
-  )
+  const STARTER_TESTIMONIALS_ITEMS = siteConfig('STARTER_TESTIMONIALS_ITEMS')
   return (
     <>
       {/* <!-- ====== Testimonial Section Start --> */}
@@ -76,13 +71,13 @@ export const Testimonials = () => {
             <div className='w-full px-4'>
               <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
                 <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('STARTER_TESTIMONIALS_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_TESTIMONIALS_TITLE')}
                 </span>
                 <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
-                  {siteConfig('STARTER_TESTIMONIALS_TEXT_1', null, CONFIG)}
+                  {siteConfig('STARTER_TESTIMONIALS_TEXT_1')}
                 </h2>
                 <p className='text-base text-body-color dark:text-dark-6'>
-                  {siteConfig('STARTER_TESTIMONIALS_TEXT_2', null, CONFIG)}
+                  {siteConfig('STARTER_TESTIMONIALS_TEXT_2')}
                 </p>
               </div>
             </div>
@@ -101,11 +96,7 @@ export const Testimonials = () => {
                             <img
                               key={index}
                               alt='star icon' // 为每个图片设置唯一的 key 属性
-                              src={siteConfig(
-                                'STARTER_TESTIMONIALS_STAR_ICON',
-                                null,
-                                CONFIG
-                              )}
+                              src={siteConfig('STARTER_TESTIMONIALS_STAR_ICON')}
                             />
                           ))}
                         </div>
diff --git a/themes/starter/config.js b/themes/starter/config.js
index 09321df1696..7748e6b0f15 100644
--- a/themes/starter/config.js
+++ b/themes/starter/config.js
@@ -358,6 +358,17 @@ const CONFIG = {
   STARTER_404_TEXT: '抱歉！您要查找的页面不存在。可能已经移动或删除。',
   STARTER_404_BACK: '回到主页',
 
+  // 页面底部的行动呼吁模块
+  STARTER_CTA_ENABLE: true,
+  STARTER_CTA_TITLE: '你还在等待什么呢？',
+  STARTER_CTA_TITLE_2: '现在开始吧',
+  STARTER_CTA_DESCRIOTN:
+    '访问NotionNext的操作文档，我们提供了详细的教程，帮助你即刻搭建站点',
+  STARTER_CTA_BUTTON: true, // 是否显示按钮
+  STARTER_CTA_BUTTON_URL:
+    'https://docs.tangly1024.com/article/vercel-deploy-notion-next',
+  STARTER_CTA_BUTTON_TEXT: '开始体验',
+
   STARTER_POST_REDIRECT_ENABLE: true, // 默認開啟重定向
   STARTER_POST_REDIRECT_URL: 'https://blog.tangly1024.com', // 重定向域名
   STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_STARTER_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
diff --git a/themes/starter/index.js b/themes/starter/index.js
index 55d5abd49fc..5e659341d6e 100644
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -31,12 +31,11 @@ import { Testimonials } from './components/Testimonials'
 import CONFIG from './config'
 import { Style } from './style'
 // import { MadeWithButton } from './components/MadeWithButton'
-import BLOG from '@/blog.config'
 import { loadWowJS } from '@/lib/plugins/wow'
 import Link from 'next/link'
 import { Banner } from './components/Banner'
+import { CTA } from './components/CTA'
 import { SignInForm } from './components/SignInForm'
-import { SignUpForm } from './components/SignUpForm'
 import { SVG404 } from './components/svg/SVG404'
 
 /**
@@ -58,7 +57,7 @@ const LayoutBase = props => {
   return (
     <div
       id='theme-starter'
-      className={`${siteConfig('FONT_STYLE', BLOG.FONT_STYLE, props.NOTION_CONFIG)} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
+      className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
       <Style />
       <NavBar {...props} />
 
@@ -84,29 +83,26 @@ const LayoutIndex = props => {
   return (
     <>
       {/* 英雄区 */}
-      {siteConfig('STARTER_HERO_ENABLE', null, CONFIG) && <Hero />}
+      {siteConfig('STARTER_HERO_ENABLE') && <Hero />}
       {/* 产品特性 */}
-      {siteConfig('STARTER_FEATURE_ENABLE', null, CONFIG) && <Features />}
+      {siteConfig('STARTER_FEATURE_ENABLE') && <Features />}
       {/* 关于 */}
-      {siteConfig('STARTER_ABOUT_ENABLE', null, CONFIG) && <About />}
+      {siteConfig('STARTER_ABOUT_ENABLE') && <About />}
       {/* 价格 */}
-      {siteConfig('STARTER_PRICING_ENABLE', null, CONFIG) && <Pricing />}
+      {siteConfig('STARTER_PRICING_ENABLE') && <Pricing />}
       {/* 评价展示 */}
-      {siteConfig('STARTER_TESTIMONIALS_ENABLE', null, CONFIG) && (
-        <Testimonials />
-      )}
+      {siteConfig('STARTER_TESTIMONIALS_ENABLE') && <Testimonials />}
       {/* 常见问题 */}
-      {siteConfig('STARTER_FAQ_ENABLE', null, CONFIG) && <FAQ />}
+      {siteConfig('STARTER_FAQ_ENABLE') && <FAQ />}
       {/* 团队介绍 */}
-      {siteConfig('STARTER_TEAM_ENABLE', null, CONFIG) && <Team />}
+      {siteConfig('STARTER_TEAM_ENABLE') && <Team />}
       {/* 博文列表 */}
-      {siteConfig('STARTER_BLOG_ENABLE', null, CONFIG) && (
-        <Blog posts={posts} />
-      )}
+      {siteConfig('STARTER_BLOG_ENABLE') && <Blog posts={posts} />}
       {/* 联系方式 */}
-      {siteConfig('STARTER_CONTACT_ENABLE', null, CONFIG) && <Contact />}
+      {siteConfig('STARTER_CONTACT_ENABLE') && <Contact />}
       {/* 合作伙伴 */}
-      {siteConfig('STARTER_BRANDS_ENABLE', null, CONFIG) && <Brand />}
+      {siteConfig('STARTER_BRANDS_ENABLE') && <Brand />}
+      <CTA />
     </>
   )
 }
@@ -123,12 +119,12 @@ const LayoutSlug = props => {
   const router = useRouter()
   if (
     !post &&
-    siteConfig('STARTER_POST_REDIRECT_ENABLE', null, CONFIG) &&
+    siteConfig('STARTER_POST_REDIRECT_ENABLE') &&
     isBrowser &&
     router.route === '/[prefix]/[slug]'
   ) {
     const redirectUrl =
-      siteConfig('STARTER_POST_REDIRECT_URL', null, CONFIG) +
+      siteConfig('STARTER_POST_REDIRECT_URL') +
       router.asPath.replace('?theme=landing', '')
     router.push(redirectUrl)
     return (
@@ -195,15 +191,15 @@ const Layout404 = props => {
                   <SVG404 />
                 </div>
                 <h3 className='mb-5 text-2xl font-semibold text-dark dark:text-white'>
-                  {siteConfig('STARTER_404_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_404_TITLE')}
                 </h3>
                 <p className='mb-8 text-base text-body-color dark:text-dark-6'>
-                  {siteConfig('STARTER_404_TEXT', null, CONFIG)}
+                  {siteConfig('STARTER_404_TEXT')}
                 </p>
                 <Link
                   href='/'
                   className='py-3 text-base font-medium text-white transition rounded-md bg-dark px-7 hover:bg-primary'>
-                  {siteConfig('STARTER_404_BACK', null, CONFIG)}
+                  {siteConfig('STARTER_404_BACK')}
                 </Link>
               </div>
             </div>
@@ -225,13 +221,15 @@ const LayoutTagIndex = props => <></>
  * @returns
  */
 const LayoutSignIn = props => {
+  const title = siteConfig('STARTER_SIGNIN', '登录')
+  const description = siteConfig(
+    'STARTER_SIGNIN_DESCRITION',
+    '这里是演示页面，NotionNext目前不提供会员登录功能'
+  )
   return (
     <>
       <div className='grow mt-20'>
-        <Banner
-          title='登录'
-          description='这里是演示页面，NotionNext目前不提供会员登录功能'
-        />
+        <Banner title={title} description={description} />
         <SignInForm />
       </div>
     </>
@@ -243,17 +241,21 @@ const LayoutSignIn = props => {
  * @param {*} props
  * @returns
  */
-const LayoutSignUp = props => (
-  <>
-    <div className='grow mt-20'>
-      <Banner
-        title='注册'
-        description='这里是演示页面，NotionNext目前不提供会员注册功能'
-      />
-      <SignUpForm />
-    </div>
-  </>
-)
+const LayoutSignUp = props => {
+  const title = siteConfig('STARTER_SIGNIN', '注册')
+  const description = siteConfig(
+    'STARTER_SIGNIN_DESCRITION',
+    '这里是演示页面，NotionNext目前不提供会员注册功能'
+  )
+  return (
+    <>
+      <div className='grow mt-20'>
+        <Banner title={title} description={description} />
+        <SignInForm />
+      </div>
+    </>
+  )
+}
 
 export {
   Layout404,