diff --git a/.gitignore b/.gitignore
index dcb5930f..a1a007c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,7 @@ yarn-error.log*
 # dev
 /data.json
 /yarn.lock
+/pnpm-lock.yaml
 .idea
 .vscode
 
diff --git a/README.md b/README.md
index 137323ab..d166eac3 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,14 @@
   <td align="center"><a href="https://github.com/Ylarod"><img src="https://avatars.githubusercontent.com/u/30978685" width="64px;"  alt="Ylarod"/><br/><sub><b>Ylarod</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Ylarod" title="Ylarod" >🔧 🐛</a></td>
 
   <td align="center"><a href="https://github.com/lifeafter619"><img src="https://avatars.githubusercontent.com/u/65111206" width="64px;"  alt="Etherrreal."/><br/><sub><b>Etherrreal.</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=lifeafter619" title="Etherrreal." >🔧 🐛</a></td>
+  
+  <td align="center"><a href="https://github.com/ykxkykx"><img src="https://avatars.githubusercontent.com/u/17985993" width="64px;"  alt="Joshua Astray"/><br/><sub><b>Joshua Astray</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=ykxkykx" title="ykxkykx" >🔧 🐛</a></td>
+
+  <td align="center"><a href="https://github.com/Vixcity"><img src="https://avatars.githubusercontent.com/u/57704177" width="64px;"  alt="Vixcity"/><br/><sub><b>Vixcity</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Vixcity" title="Vixcity" >🔧 🐛</a></td>
+
+  <td align="center"><a href="https://github.com/ipatpat"><img src="https://avatars.githubusercontent.com/u/39089551" width="64px;"  alt="ipatpat"/><br/><sub><b>ipatpat</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=ipatpat" title="ipatpat" >🔧 🐛</a></td>
+
+  <td align="center"><a href="https://github.com/xloong"><img src="https://avatars.githubusercontent.com/u/8479955" width="64px;"  alt="xloong"/><br/><sub><b>xloong</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=xloong" title="xloong" >🔧 🐛</a></td>
 
 </tr>
 </table>
diff --git a/blog.config.js b/blog.config.js
index 418c2bc3..0dc79180 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -25,10 +25,14 @@ const BLOG = {
   // 网站默认使用PingFangSC及NotoSansSC，
   // 如需自定义字体，请将CUSTOM_FONT改为 true，并将CUSTOM_FONT_URL改为你的字体CSS地址，同时在CUSTOM_FONT_SANS与CUSTOM_FONT_SERIF中指定你的font-family
   CUSTOM_FONT: process.env.NEXT_PUBLIC_CUSTOM_FONT || false, // 是否使用自定义字体
+  // 自定义字体示例： 请先将 CUSTOM_FONT 改为 true， 并将 CUSTOM_FONT_URL 改为你的字体CSS地址，同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily
   CUSTOM_FONT_URL: ['https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css'], // 自定义字体的CSS
   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
@@ -51,20 +55,46 @@ const BLOG = {
   POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', //  是否在列表加载文章预览
   POST_PREVIEW_LINES: 12, // 预览博客行数
   POST_RECOMMEND_COUNT: 6, // 推荐文章数量
-  POSTS_PER_PAGE: 6, // post counts per page
+  POSTS_PER_PAGE: 12, // post counts per page
   POSTS_SORT_BY: 'notion', // 排序方式 'date'按时间,'notion'由notion控制
 
   PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
   PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
 
   // 鼠标点击烟花特效
-  FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 鼠标点击烟花特效
+  FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 开关
+  // 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
+  FIREWORKS_COLOR: ['255, 20, 97', '24, 255, 146', '90, 135, 255', '251, 243, 140'],
 
   // 悬浮挂件
   WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
   WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
   WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
 
+  // 音乐播放插件
+  MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
+  MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停
+  MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
+  MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）
+  MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random
+  MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
+    {
+      name: '风を共に舞う気持ち',
+      artist: 'Falcom Sound Team jdk',
+      url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',
+      cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+    },
+    {
+      name: '王都グランセル',
+      artist: 'Falcom Sound Team jdk',
+      url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',
+      cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+    }
+  ],
+  MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS
+  MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]
+  MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id
+
   // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
 
   // twikoo
diff --git a/components/CommonScript.js b/components/CommonScript.js
index ae924fbd..446b0017 100644
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -101,6 +101,10 @@ const CommonScript = () => {
               }}
       />
     </>)}
+
+    {/* 引入音乐播放 */}
+    {JSON.parse(BLOG.MUSIC_PLAYER) && <script async src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" />}
+    {JSON.parse(BLOG.MUSIC_PLAYER) && JSON.parse(BLOG.MUSIC_PLAYER_METING) && <script async src="https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js" />}
   </>)
 }
 
diff --git a/components/Fireworks.js b/components/Fireworks.js
index 3ccdec7e..6d80772e 100644
--- a/components/Fireworks.js
+++ b/components/Fireworks.js
@@ -4,6 +4,7 @@
  */
 import React from 'react'
 import anime from 'animejs'
+import BLOG from 'blog.config'
 
 export const Fireworks = () => {
   React.useEffect(() => {
@@ -17,9 +18,8 @@ export const Fireworks = () => {
    * @param config
    */
 function createFireworks(config) {
-  const defaultColors = ['102, 167, 221', '62, 131, 225', '33, 78, 194']
   const defaultConfig = {
-    colors: defaultColors,
+    colors: BLOG.FIREWORKSCOLOR,
     numberOfParticules: 20,
     orbitRadius: {
       min: 50,
@@ -44,7 +44,7 @@ function createFireworks(config) {
   let pointerY = 0
 
   // sky blue
-  const colors = config.colors || defaultColors
+  const colors = config.colors
 
   const canvasEl = document.querySelector('.fireworks')
   const ctx = canvasEl.getContext('2d')
diff --git a/components/MusicPlayer.js b/components/MusicPlayer.js
new file mode 100644
index 00000000..7e788639
--- /dev/null
+++ b/components/MusicPlayer.js
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const MusicPlayer = dynamic(
+  () => import('@/components/Player'),
+  { ssr: false }
+)
+export default MusicPlayer
diff --git a/components/Player.js b/components/Player.js
new file mode 100644
index 00000000..c85b30a0
--- /dev/null
+++ b/components/Player.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+
+const Player = () => {
+  const [player, setPlayer] = React.useState()
+  const ref = React.useRef(null)
+
+  const showLrc = JSON.parse(BLOG.MUSIC_PLAYER_SHOW_LRC)
+  const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
+  const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY)
+
+  const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING)
+
+  React.useEffect(() => {
+    if (!meting && window.APlayer) {
+      setPlayer(new window.APlayer({
+        container: ref.current,
+        fixed: true,
+        showlrc: showLrc,
+        autoplay: autoPlay,
+        order: BLOG.MUSIC_PLAYER_ORDER,
+        audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
+      }))
+    }
+    return () => {
+      setPlayer(undefined)
+    }
+  }, [])
+
+  return (
+    <div className={playerVisible ? 'visible' : 'invisible'}>
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css"
+      />
+      {meting
+        ? <meting-js
+            fixed
+            type="playlist"
+            autoplay={autoPlay}
+            order={BLOG.MUSIC_PLAYER_ORDER}
+            server={BLOG.MUSIC_PLAYER_METING_SERVER}
+            id={BLOG.MUSIC_PLAYER_METING_ID}
+          />
+        : <div ref={ref} data-player={player} />
+      }
+    </div>
+  )
+}
+
+export default Player
diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
index dac43d75..47052db9 100644
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -29,22 +29,22 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
     if (showStatus) {
-      sideBarDrawer.classList.replace('-ml-56', 'ml-0')
+      sideBarDrawer.classList.replace('-ml-60', 'ml-0')
       sideBarDrawerBackground.classList.replace('hidden', 'block')
     } else {
-      sideBarDrawer.classList.replace('ml-0', '-ml-56')
+      sideBarDrawer.classList.replace('ml-0', '-ml-60')
       sideBarDrawerBackground.classList.replace('block', 'hidden')
     }
   }
 
-  return <div id='sidebar-wrapper' className={' ' + className }>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-56'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+  return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
+    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
       {children}
     </div>
 
     {/* 背景蒙版 */}
     <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
-         className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
   </div>
 }
 export default SideBarDrawer
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 756284b2..d9d8b9b6 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -15,7 +15,7 @@ export function ThemeSwitch() {
 
   return (<>
         <Draggable>
-            <div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
+            <div id="draggableBox" className="fixed left-1 bottom-20 text-white bg-black z-50 rounded-lg shadow-card">
                 <div className="p-2 flex items-center">
                     <i className='fas fa-arrows cursor-move px-2' />
                     {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
diff --git a/components/WalineComponent.js b/components/WalineComponent.js
index 22d6ceee..7ddc00ee 100644
--- a/components/WalineComponent.js
+++ b/components/WalineComponent.js
@@ -28,7 +28,12 @@ const WalineComponent = (props) => {
         el: containerRef.current,
         serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
         lang: BLOG.lang,
-        reaction: true
+        reaction: true,
+        emoji: [
+          '//npm.elemecdn.com/@waline/emojis@1.1.0/tieba',
+          '//npm.elemecdn.com/@waline/emojis@1.1.0/weibo',
+          '//npm.elemecdn.com/@waline/emojis@1.1.0/bilibili'
+        ]
       })
     }
 
diff --git a/pages/_app.js b/pages/_app.js
index ca101940..26cee7d9 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -25,6 +25,7 @@ import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Fireworks } from '@/components/Fireworks'
+import MusicPlayer from '@/components/MusicPlayer'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -47,6 +48,7 @@ const MyApp = ({ Component, pageProps }) => {
         {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
         {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
         {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
+        {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
     </>
 
   // 默认Webfont:  请在font.js文件中检查font-family 新版改从npm本地导入；
diff --git a/pages/sitemap.xml.js b/pages/sitemap.xml.js
index 083edc0b..17980067 100644
--- a/pages/sitemap.xml.js
+++ b/pages/sitemap.xml.js
@@ -8,32 +8,32 @@ export const getServerSideProps = async (ctx) => {
   const defaultFields = [
     {
       loc: `${BLOG.LINK}`,
-      lastmod: new Date(),
+      lastmod: new Date().toISOString().split('T')[0],
       changefreq: 'daily',
       priority: '0.7'
     }, {
       loc: `${BLOG.LINK}/archive`,
-      lastmod: new Date(),
+      lastmod: new Date().toISOString().split('T')[0],
       changefreq: 'daily',
       priority: '0.7'
     }, {
       loc: `${BLOG.LINK}/category`,
-      lastmod: new Date(),
+      lastmod: new Date().toISOString().split('T')[0],
       changefreq: 'daily',
       priority: '0.7'
     }, {
       loc: `${BLOG.LINK}/feed`,
-      lastmod: new Date(),
+      lastmod: new Date().toISOString().split('T')[0],
       changefreq: 'daily',
       priority: '0.7'
     }, {
       loc: `${BLOG.LINK}/search`,
-      lastmod: new Date(),
+      lastmod: new Date().toISOString().split('T')[0],
       changefreq: 'daily',
       priority: '0.7'
     }, {
       loc: `${BLOG.LINK}/tag`,
-      lastmod: new Date(),
+      lastmod: new Date().toISOString().split('T')[0],
       changefreq: 'daily',
       priority: '0.7'
     }
@@ -41,7 +41,7 @@ export const getServerSideProps = async (ctx) => {
   const postFields = allPages?.map(post => {
     return {
       loc: `${BLOG.LINK}/${post.slug}`,
-      lastmod: new Date(post?.date?.start_date || post?.createdTime),
+      lastmod: new Date(post?.date?.start_date || post?.createdTime).toISOString().split('T')[0],
       changefreq: 'daily',
       priority: '0.7'
     }
diff --git a/tailwind.config.js b/tailwind.config.js
index 0c5e4a68..6da86610 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,8 +19,11 @@ module.exports = {
           'black-gray': '#101414',
           'light-gray': '#e5e5e5'
         }
+      },
+      maxWidth: {
+        side: '14rem'
       }
-    }
+    },
   },
   variants: {
     extend: {}
diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js
index 9d33a0dc..1f7138cb 100644
--- 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
index 35395416..012cdb44 100644
--- 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
index cf438314..db32f89a 100644
--- 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/matery/components/SideBar.js b/themes/matery/components/SideBar.js
index 9c8a1e8e..fd89b5e0 100644
--- a/themes/matery/components/SideBar.js
+++ b/themes/matery/components/SideBar.js
@@ -31,8 +31,8 @@ const SideBar = (props) => {
 
   return (
       <div id='side-bar' className=''>
-          <div className="h-48 w-full bg-indigo-700">
-              <div className='mx-5 pt-6'>
+          <div className="mh-48 w-full bg-indigo-700">
+              <div className='mx-5 pt-6 pb-2'>
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={BLOG.AUTHOR} />
                   <div className='text-white text-xl my-1'>{siteInfo?.title}</div>
@@ -59,14 +59,14 @@ const SideBar = (props) => {
                           {link.slot}
 
                       </Link>
-                  );
+                  )
                 } else {
                   return <></>
                 }
               })}
           </nav>
       </div>
-  );
+  )
 }
 
 export default SideBar
diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js
index 427b3676..6d51e797 100644
--- 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
index 07b614e4..fb70957c 100644
--- 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
index 0d8b3ff2..b77275c6 100644
--- 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
index 2447d489..8d180cb6 100644
--- a/themes/next/components/SideAreaRight.js
+++ b/themes/next/components/SideAreaRight.js
@@ -24,8 +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'>
           {/* 展示广告  */}
@@ -98,6 +97,6 @@ const SideAreaRight = (props) => {
 
         </div>
       </aside>
-  );
+  )
 }
 export default SideAreaRight