Merge pull request #2387 from tangly1024/feat/theme-commerce-fix

Feat/theme commerce fix

lib/config.js

@@ -31,7 +31,6 @@ export const siteConfig = (key, defaultVal = null, extendConfig = null) => {
   if (global) {
     val = global.NOTION_CONFIG?.[key]
     siteInfo = global.siteInfo
-    // console.log('当前变量', key, val)
   }
 
   if (!val) {

themes/commerce/components/Footer.js

@@ -1,121 +1,229 @@
 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'
+                  dangerouslySetInnerHTML={{
+                    __html: 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/components/ProductCenter.js

@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
 import ProductCard from './ProductCard'
 import ProductCategories from './ProductCategories'
 
@@ -9,25 +10,42 @@ import ProductCategories from './ProductCategories'
  */
 export default function ProductCenter(props) {
   const { allNavPages } = props
-  const posts = allNavPages.slice(0, parseInt(siteConfig('COMMERCE_HOME_POSTS_COUNT', 9)))
-
-  return <div className='w-full my-4 mx-4'>
-        <div className='w-full text-center text-4xl font-bold'>{siteConfig('COMMERCE_TEXT_CENTER_TITLE', 'Product Center')}</div>
-        {siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION') && <div className='w-full text-center text-lg my-3 text-gray-500'>{siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION')}</div>}
-
-        <div className='flex'>
-
-            <ProductCategories {...props} />
-
-            <div className='w-full p-4 mx-2'>
-                {/* 文章列表 */}
-                <div className="grid md:grid-cols-3 grid-cols-2 gap-5">
-                    {posts?.map(post => (
-                        <ProductCard index={posts.indexOf(post)} key={post.id} post={post} />
-                    ))}
-                </div>
-
-            </div>
+  const posts = allNavPages.slice(
+    0,
+    parseInt(siteConfig('COMMERCE_HOME_POSTS_COUNT', 9))
+  )
+  const COMMERCE_TEXT_CENTER_TITLE = siteConfig(
+    'COMMERCE_TEXT_CENTER_TITLE',
+    'Product Center',
+    CONFIG
+  )
+  return (
+    <div className='w-full my-4 mx-4'>
+      <div className='w-full text-center text-4xl font-bold'>
+        {COMMERCE_TEXT_CENTER_TITLE}
+      </div>
+      {siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION') && (
+        <div className='w-full text-center text-lg my-3 text-gray-500'>
+          {siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION')}
         </div>
+      )}
+
+      <div className='flex'>
+        <ProductCategories {...props} />
+
+        <div className='w-full p-4 mx-2'>
+          {/* 文章列表 */}
+          <div className='grid md:grid-cols-3 grid-cols-2 gap-5'>
+            {posts?.map(post => (
+              <ProductCard
+                index={posts.indexOf(post)}
+                key={post.id}
+                post={post}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
+  )
 }

themes/commerce/config.js

@@ -2,15 +2,19 @@ const CONFIG = {
   // 封面大图
   COMMERCE_HOME_BANNER_ENABLE: true,
 
-  COMMERCE_TEXT_CENTER_TITLE: 'Product Center', //中间产品区块标题
+  COMMERCE_TEXT_CENTER_TITLE: 'Product Center', // 中间产品区块标题
   COMMERCE_TEXT_CENTER_DESCRIPTION:
     'The vision of NotionNext is to help you effortlessly and seamlessly build your own website, amplifying the value of your brand.', // 中间产品区块文字描述
-  COMMERCE_TEXT_CENTER_CATEGORY_TITLE: 'Product Categories', //左侧产品分类标题
+  COMMERCE_TEXT_CENTER_CATEGORY_TITLE: 'Product Categories', // 左侧产品分类标题
   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_HOME_POSTS_COUNT: 9, //首页展示商品数
-  COMMERCE_CONTACT_WHATSAPP_SHOW: true, //是否展示whatsapp联系按钮 请配置 CONTACT_WHATSAPP
-  COMMERCE_CONTACT_TELEGRAM_SHOW: true //联系栏展示telegram按钮 请配置 CONTACT_TELEGRAM
+  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
 }
 export default CONFIG

themes/commerce/index.js

@@ -256,16 +256,17 @@ const LayoutSlug = props => {
               <div className='flex md:flex-row flex-col w-full justify-between py-4'>
                 <div
                   id='left-img'
-                  className='w-1/2 flex justify-center items-center border'>
+                  className='md:w-1/2 flex justify-center items-center border'>
                   <LazyImage
                     src={headerImage}
                     className='m-auto w-full h-auto aspect-square object-cover object-center'
                   />
                 </div>
 
-                <div id='info-right' className='w-1/2 p-4'>
+                <div id='info-right' className='md:w-1/2 p-4'>
                   <div>{post?.title}</div>
-                  <div>{post?.summary}</div>
+                  <div
+                    dangerouslySetInnerHTML={{ __html: post?.summary }}></div>
                 </div>
               </div>
             )}