diff --git a/README.md b/README.md
index 137323ab..2fb4d39d 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,8 @@
   <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>
 
 </tr>
 </table>
diff --git a/blog.config.js b/blog.config.js
index 418c2bc3..74188d83 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -25,6 +25,7 @@ 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'], // 自定义衬线字体
@@ -51,7 +52,7 @@ 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为不限制
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/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/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/matery/components/SideBar.js b/themes/matery/components/SideBar.js
index 20449e19..f02d3245 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>
@@ -45,7 +45,7 @@ const SideBar = (props) => {
                     const selected = (router.pathname === link.to) || (router.asPath === link.to)
                     return <Link key={link.to} title={link.to} href={link.to} >
                             <a target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-                               className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+                              className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
                                 (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')} >
                                 <div className='my-auto items-center justify-between flex '>
                                     <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />