commerce主题新增二维码和文字功能

themes/commerce/components/Footer.js

@@ -1,121 +1,223 @@
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
+import CONFIG from '../config'
 
 /**
  * 页脚
  * @param {*} param0
  * @returns
  */
-const Footer = (props) => {
+const Footer = props => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
   const { categoryOptions, customMenu } = props
 
-  return <footer id="footer-wrapper" className='relative bg-[#2A2A2A] justify-center w-full leading-6 text-gray-300 text-sm p-10'>
-
-        <div id='footer-container' className='w-full mx-auto max-w-screen-xl'>
-
-            <div className='flex'>
-                <div className='hidden md:flex flex-grow my-6 space-x-20 text-lg  '>
-
-                    {/* 分类菜单  */}
-                    <div>
-                        <div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_MENU_1', 'Product Center')}</div>
-                        <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
-                            {categoryOptions?.map(category => {
-                              return (
-                                    <Link
-                                        key={`${category.name}`}
-                                        title={`${category.name}`}
-                                        href={`/category/${category.name}`}
-                                        passHref>
-                                        {category.name}
-                                    </Link>
-                              )
-                            })}
-                        </nav>
-                    </div>
-
-                    {/* 系统菜单  */}
-                    <div>
-                        <div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_MENU_2', 'About US')}</div>
-                        <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
-                            {customMenu?.map(menu => {
-                              return (
-                                    <Link
-                                        key={`${menu.name}`}
-                                        title={`${menu.name}`}
-                                        href={`${menu.to}`}
-                                        passHref>
-                                        {menu.name}
-                                    </Link>
-                              )
-                            })}
-                        </nav>
-                    </div>
-                </div>
-
-                {<div className='md:border-l pl-4 border-gray-600 my-6 whitespace-pre-line text-left flex-grow'>
-                    <div className='font-bold text-l text-white mb-6'>{siteConfig('COMMERCE_TEXT_FOOTER_TITLE', 'Contact US')}</div>
-                    <div className='space-y-4'>
-                        <div className='flex space-x-4 text-2xl'>
-                            {JSON.parse(siteConfig('COMMERCE_CONTACT_WHATSAPP_SHOW'), true) && <div>
-                                {<a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_WHATSAPP', '#')} title={'telegram'} >
-                                    <i className='transform hover:scale-125 duration-150 fa-brands fa-whatsapp dark:hover:text-red-400 hover:text-red-600' />
-                                </a>}
-                            </div>
-                            }
-
-                            {JSON.parse(siteConfig('COMMERCE_CONTACT_TELEGRAM_SHOW', true)) && <div>
-                                {<a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM', '#')} title={'telegram'} >
-                                    <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600' />
-                                </a>}
-                            </div>}
-
-                        </div>
-                        <div className='text-lg'> {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-                            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' /> {siteConfig('CONTACT_EMAIL')}
-                        </a>}</div>
-                        <div className='text-lg'> {siteConfig('CONTACT_PHONE') && <div>
-                            <i className='transform hover:scale-125 duration-150 fas fa-user dark:hover:text-red-400 hover:text-red-600' />  {siteConfig('CONTACT_PHONE')}
-                        </div>}</div>
-                    </div>
-                </div>}
+  return (
+    <footer
+      id='footer-wrapper'
+      className='relative bg-[#2A2A2A] justify-center w-full leading-6 text-gray-300 text-sm p-10'>
+      <div id='footer-container' className='w-full mx-auto max-w-screen-xl'>
+        <div className='flex'>
+          {/* 页脚左侧菜单组 */}
+          <div className='hidden md:flex flex-grow my-6 space-x-20 text-lg  '>
+            {/* 分类菜单  */}
+            <div>
+              <div className='font-bold mb-4 text-white'>
+                {siteConfig('COMMERCE_TEXT_FOOTER_MENU_1', 'Product Center')}
+              </div>
+              <nav
+                id='home-nav-button'
+                className={'flex flex-col space-y-2 text-start'}>
+                {categoryOptions?.map(category => {
+                  return (
+                    <Link
+                      key={`${category.name}`}
+                      title={`${category.name}`}
+                      href={`/category/${category.name}`}
+                      passHref>
+                      {category.name}
+                    </Link>
+                  )
+                })}
+              </nav>
             </div>
 
-            {/* 底部版权相关 */}
-            <div id='footer-copyright-wrapper' className='flex flex-col md:flex-row justify-between border-t border-gray-600 pt-8'>
-                <div className='text-start space-y-1'>
-
-                    {/* 网站所有者 */}
-                    <div> Copyright <i className='fas fa-copyright' /> {`${copyrightDate}`} <a href={siteConfig('LINK')} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a> All Rights Reserved.</div>
-
-                    {/* 技术支持 */}
-                    <div className='text-xs text-light-500 dark:text-gray-700'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a>.</div>
-
-                    {/* 站点统计 */}
-                    <div>
-                        <span className='hidden busuanzi_container_site_pv'>
-                            <i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
-                        <span className='pl-2 hidden busuanzi_container_site_uv'>
-                            <i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-                    </div>
-                </div>
-
-                {/* 右边公司名字 */}
-                <div className='md:text-right'>
-                    <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{siteConfig('TITLE')} {siteConfig('BIO')}</h1>
-                    <h2> {siteConfig('DESCRIPTION')}</h2>
-                    {/* 可选备案信息 */}
-                    {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a></>}
-                </div>
+            {/* 系统菜单  */}
+            <div>
+              <div className='font-bold mb-4 text-white'>
+                {siteConfig('COMMERCE_TEXT_FOOTER_MENU_2', 'About US')}
+              </div>
+              <nav
+                id='home-nav-button'
+                className={'flex flex-col space-y-2 text-start'}>
+                {customMenu?.map(menu => {
+                  return (
+                    <Link
+                      key={`${menu.name}`}
+                      title={`${menu.name}`}
+                      href={`${menu.to}`}
+                      passHref>
+                      {menu.name}
+                    </Link>
+                  )
+                })}
+              </nav>
             </div>
+          </div>
 
+          {/* 页脚中部联系方式 */}
+          {
+            <div className='md:border-l pl-4 border-gray-600 my-6 whitespace-pre-line text-left flex-grow'>
+              <div className='font-bold text-l text-white mb-6'>
+                {siteConfig('COMMERCE_TEXT_FOOTER_TITLE', 'Contact US', CONFIG)}
+              </div>
+              <div className='space-y-4'>
+                <div className='flex space-x-4 text-2xl'>
+                  {JSON.parse(
+                    siteConfig('COMMERCE_CONTACT_WHATSAPP_SHOW', null, CONFIG),
+                    true
+                  ) && (
+                    <div>
+                      {
+                        <a
+                          target='_blank'
+                          rel='noreferrer'
+                          href={siteConfig('CONTACT_WHATSAPP', '#', CONFIG)}
+                          title={'telegram'}>
+                          <i className='transform hover:scale-125 duration-150 fa-brands fa-whatsapp dark:hover:text-red-400 hover:text-red-600' />
+                        </a>
+                      }
+                    </div>
+                  )}
+
+                  {JSON.parse(
+                    siteConfig('COMMERCE_CONTACT_TELEGRAM_SHOW', true, CONFIG)
+                  ) && (
+                    <div>
+                      {
+                        <a
+                          target='_blank'
+                          rel='noreferrer'
+                          href={siteConfig('CONTACT_TELEGRAM', '#', CONFIG)}
+                          title={'telegram'}>
+                          <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600' />
+                        </a>
+                      }
+                    </div>
+                  )}
+                </div>
+                <div className='text-lg'>
+                  {' '}
+                  {siteConfig('CONTACT_EMAIL') && (
+                    <a
+                      target='_blank'
+                      rel='noreferrer'
+                      title={'email'}
+                      href={`mailto:${siteConfig('CONTACT_EMAIL', CONFIG)}`}>
+                      <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' />{' '}
+                      {siteConfig('CONTACT_EMAIL')}
+                    </a>
+                  )}
+                </div>
+                <div className='text-lg'>
+                  {' '}
+                  {siteConfig('CONTACT_PHONE', null, CONFIG) && (
+                    <div>
+                      <i className='transform hover:scale-125 duration-150 fas fa-user dark:hover:text-red-400 hover:text-red-600' />{' '}
+                      {siteConfig('CONTACT_PHONE', null, CONFIG)}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          }
+
+          {/* 页脚右侧图片二维码和文字描述 */}
+          {
+            <div className='pl-4 border-gray-600 my-6 whitespace-pre-line text-center flex-grow'>
+              <div className='font-bold text-l text-white mb-6 text-center'>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  className='h-36'
+                  src={siteConfig(
+                    'COMMERCE_FOOTER_RIGHT_IMG_URL',
+                    null,
+                    CONFIG
+                  )}></img>
+              </div>
+              <div className='space-y-4'>
+                <div className='flex space-x-4 text-center'>
+                  {siteConfig('COMMERCE_FOOTER_RIGHT_TEXT', null, CONFIG)}
+                </div>
+              </div>
+            </div>
+          }
         </div>
 
-    </footer >
+        {/* 底部版权相关 */}
+        <div
+          id='footer-copyright-wrapper'
+          className='flex flex-col md:flex-row justify-between border-t border-gray-600 pt-8'>
+          <div className='text-start space-y-1'>
+            {/* 网站所有者 */}
+            <div>
+              {' '}
+              Copyright <i className='fas fa-copyright' /> {`${copyrightDate}`}{' '}
+              <a
+                href={siteConfig('LINK')}
+                className='underline font-bold  dark:text-gray-300 '>
+                {siteConfig('AUTHOR')}
+              </a>{' '}
+              All Rights Reserved.
+            </div>
+
+            {/* 技术支持 */}
+            <div className='text-xs text-light-500 dark:text-gray-700'>
+              Powered by{' '}
+              <a
+                href='https://github.com/tangly1024/NotionNext'
+                className='dark:text-gray-300'>
+                NotionNext {siteConfig('VERSION')}
+              </a>
+              .
+            </div>
+
+            {/* 站点统计 */}
+            <div>
+              <span className='hidden busuanzi_container_site_pv'>
+                <i className='fas fa-eye' />
+                <span className='px-1 busuanzi_value_site_pv'> </span>{' '}
+              </span>
+              <span className='pl-2 hidden busuanzi_container_site_uv'>
+                <i className='fas fa-users' />{' '}
+                <span className='px-1 busuanzi_value_site_uv'> </span>{' '}
+              </span>
+            </div>
+          </div>
+
+          {/* 右边公司名字 */}
+          <div className='md:text-right'>
+            <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>
+              {siteConfig('TITLE')} {siteConfig('BIO')}
+            </h1>
+            <h2> {siteConfig('DESCRIPTION')}</h2>
+            {/* 可选备案信息 */}
+            {siteConfig('BEI_AN') && (
+              <>
+                <i className='fas fa-shield-alt' />{' '}
+                <a href='https://beian.miit.gov.cn/' className='mr-2'>
+                  {siteConfig('BEI_AN')}
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
 }
 
 export default Footer

themes/commerce/config.js

@@ -9,6 +9,10 @@ const CONFIG = {
   COMMERCE_TEXT_FOOTER_TITLE: 'Contact US', // COMMERCE主题页脚文案标题；按Shift+Enter键可以换行
   COMMERCE_TEXT_FOOTER_MENU_1: 'Product Center', // COMMERCE主题页脚左侧菜单标题1
   COMMERCE_TEXT_FOOTER_MENU_2: 'About US', // COMMERCE主题页脚左侧菜单标题2
+
+  COMMERCE_FOOTER_RIGHT_IMG_URL: null, // 显示页脚右侧的图片，通常放二维码
+  COMMERCE_FOOTER_RIGHT_TEXT: null, // 页脚右侧图片下的文字描述
+
   COMMERCE_HOME_POSTS_COUNT: 9, // 首页展示商品数
   COMMERCE_CONTACT_WHATSAPP_SHOW: true, // 是否展示whatsapp联系按钮 请配置 CONTACT_WHATSAPP
   COMMERCE_CONTACT_TELEGRAM_SHOW: true // 联系栏展示telegram按钮 请配置 CONTACT_TELEGRAM