Merge pull request #1779 from tangly1024/feat/heo-reverse-hero

heo 主题支持配置左右组件颠倒

themes/heo/components/Hero.js

@@ -15,6 +15,7 @@ import CONFIG from '../config'
  * @returns
  */
 const Hero = props => {
+  const HEO_HERO_REVERSE = siteConfig('HEO_HERO_REVERSE', false, CONFIG)
   return (
     <div
       id="hero-wrapper"
@@ -24,12 +25,17 @@ const Hero = props => {
         id="hero"
         style={{ zIndex: 1 }}
         className={
-          'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex xl:space-x-3 relative'
+           `animate__animated animate__fadeIn animate__fast 
+           ${HEO_HERO_REVERSE ? 'xl:flex-row-reverse' : ''}
+           recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative`
         }
       >
         {/* 左侧banner组 */}
         <BannerGroup {...props} />
 
+        {/* 中间留白 */}
+        <div className='px-1.5 h-full'></div>
+
         {/* 右侧置顶文章组 */}
         <TopGroup {...props} />
       </div>

themes/heo/config.js

@@ -9,6 +9,11 @@ const CONFIG = {
     { title: '访问文档中心获取更多帮助', url: 'https://docs.tangly1024.com' }
   ],
 
+  // 英雄区左右侧组件颠倒位置
+  HEO_HERO_REVERSE: false,
+  // 博客主体区左右侧组件颠倒位置
+  HEO_HERO_BODY_REVERSE: false,
+
   // 英雄区(首页顶部大卡)
   HEO_HERO_TITLE_1: '分享编程',
   HEO_HERO_TITLE_2: '与思维认知',

themes/heo/index.js

@@ -61,6 +61,8 @@ const LayoutBase = props => {
   const { fullWidth } = useGlobal()
   const maxWidth = fullWidth ? 'max-w-[96rem] mx-auto' : 'max-w-[86rem]' // 普通最大宽度是86rem和顶部菜单栏对齐，留空则与窗口对齐
 
+  const HEO_HERO_BODY_REVERSE = siteConfig('HEO_HERO_BODY_REVERSE', false, CONFIG)
+
   return (
     <div
       id="theme-heo"
@@ -81,7 +83,7 @@ const LayoutBase = props => {
         <div
           id="container-inner"
           className={
-            'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'
+            `${HEO_HERO_BODY_REVERSE ? 'flex-row-reverse' : ''} w-full mx-auto lg:flex justify-center relative z-10`
           }
         >
           <div className={`w-full h-auto ${className || ''}`}>
@@ -90,11 +92,14 @@ const LayoutBase = props => {
             {children}
           </div>
 
+          <div className='lg:px-2'></div>
+
           <div className="hidden xl:block">
             {/* 主区快右侧 */}
             {slotRight}
           </div>
         </div>
+
       </main>
 
       {/* 页脚 */}