feat 支持侧栏布局反转左变右,右变左, 通过 blog.config.js 内的 LAYOUT_SIDEBAR_REVERSE 控制

已支持主题: hexo next medium fukasawa example
tangly1024 · Jan 3, 2023 · 7a115a6 · 7a115a6
1 parent 4258699
commit 7a115a6
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 7 deletions.
diff --git a/blog.config.js b/blog.config.js
@@ -30,6 +30,9 @@ const BLOG = {
   CUSTOM_FONT_SANS: ['LXGW WenKai'], // 自定义无衬线字体
   CUSTOM_FONT_SERIF: ['LXGW WenKai'], // 自定义衬线字体
 
+  // 侧栏布局 是否反转(左变右,右变左) 已支持主题: hexo next medium fukasawa example
+  LAYOUT_SIDEBAR_REVERSE: false,
+
   // 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext
   FACEBOOK_PAGE_TITLE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄 e.g FACEBOOK 粉絲團'
   FACEBOOK_PAGE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE || null, // Facebook Page 的連結 e.g https://www.facebook.com/tw.andys.pro

diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js
@@ -6,6 +6,7 @@ import { Footer } from './components/Footer'
 import { Title } from './components/Title'
 import { SideBar } from './components/SideBar'
 import JumpToTopButton from './components/JumpToTopButton'
+import BLOG from '@/blog.config'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -28,7 +29,7 @@ const LayoutBase = props => {
 
                 <Title {...props} />
 
-                <div className="container mx-auto justify-center md:flex items-start py-8 px-2">
+                <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' container mx-auto justify-center md:flex items-start py-8 px-2'}>
 
                     <div className='w-full max-w-3xl xl:px-14 lg:px-4 '>{children}</div>
 

diff --git a/themes/fukasawa/LayoutBase.js b/themes/fukasawa/LayoutBase.js
@@ -2,6 +2,7 @@ import CommonHead from '@/components/CommonHead'
 import TopNav from './components/TopNav'
 import AsideLeft from './components/AsideLeft'
 import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -27,7 +28,7 @@ const LayoutBase = (props) => {
   return (<>
     <CommonHead meta={meta} />
     <TopNav {...props}/>
-    <div className='flex'>
+    <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
       <AsideLeft {...props} slot={leftAreaSlot}/>
       <main id='wrapper' className='flex w-full py-8 justify-center'>
         <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full'>

diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js
@@ -69,7 +69,7 @@ const LayoutBase = props => {
       <main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen">
         <div
           id="container-inner"
-          className="pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center"
+          className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center'}
         >
           <div className="w-full max-w-4xl overflow-x-hidden scroll-hidden">
             {onLoading ? <LoadingCover /> : children}

diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js
@@ -11,6 +11,7 @@ import BottomMenuBar from './components/BottomMenuBar'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -26,7 +27,7 @@ const LayoutBase = props => {
   return (
     <div className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
       <CommonHead meta={meta} />
-      <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
+      <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex justify-between w-full h-full mx-auto'}>
         {/* 桌面端左侧菜单 */}
         {/* <LeftMenuBar/> */}
 

diff --git a/themes/next/LayoutBase.js b/themes/next/LayoutBase.js
@@ -13,6 +13,7 @@ import React from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
 import CONFIG_NEXT from './config_next'
 import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
 import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
 import { isBrowser } from '@/lib/utils'
@@ -75,7 +76,7 @@ const LayoutBase = (props) => {
 
       <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block'/>
 
-      <main id='wrapper' className='flex justify-center flex-1 pb-12'>
+      <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex justify-center flex-1 pb-12'}>
           {/* 左侧栏样式 */}
           <SideAreaLeft slot={leftAreaSlot} targetRef={targetRef} {...props}/>
           <section id='container-inner' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'mt-40' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}>

diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
@@ -8,6 +8,7 @@ import Tabs from '@/components/Tabs'
 import Logo from './Logo'
 import Card from './Card'
 import CONFIG_NEXT from '../config_next'
+import BLOG from '@/blog.config'
 
 /**
  * 侧边平铺
@@ -22,7 +23,7 @@ const SideAreaLeft = props => {
   const { post, slot, postCount } = props
   const { locale } = useGlobal()
   const showToc = post && post.toc && post.toc.length > 1
-  return <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
+  return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60'}>
 
         <section
             data-aos="fade-down"

diff --git a/themes/next/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js
@@ -24,7 +24,7 @@ const SideAreaRight = (props) => {
   const { tags, currentTag, slot, categories, currentCategory } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  return (<aside id='right' className='hidden 2xl:block flex-col w-60 ml-4'>
+  return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' hidden 2xl:block flex-col w-60'}>
 
       {CONFIG_NEXT.RIGHT_AD && <Card className='mb-2'>
         {/* 展示广告  */}